Dati visivi più facili nel browser con grafici di variant

.contenitore larghezza: 50%; margine: 60px auto;  .container chart width: 100%; altezza: 400px; 

Notate alcune cose qui:

• Il markup grafico assomiglia molto all'HTML. In effetti, è un XML valido che Variance utilizza per costruire il nostro grafico a barre. Abbiamo anche utilizzato questo tag personalizzato per racchiudere i dati CSV. Facciamo riferimento a questo elemento CSV nel grafico etichetta.
• scala-y-lineare ci dice quale dovrebbe essere la scala della direzione y. Nel nostro caso, il nostro set di dati va a 16000, ma inizia a partire da 20. Per coprire l'intervallo, impostiamo la nostra fascia bassa a 0 e la nostra cima a 20000.
• guida-x / guida-y crea una guida di segni di spunta sui rispettivi assi.
•  esegue loops sui nostri dati e crea elementi in base a ciascun punto di dati.
• annotazione è un'etichetta che può essere posizionata attorno a un particolare oggetto, come a bar. Le parentesi graffe consentono di visualizzare un dato; nel nostro caso, anno è nel nostro CSV, quindi possiamo facilmente uscire l'anno.
• bar crea un elemento bar, e Mappa di lunghezzadefinisce la larghezza della barra  pancette mappe per il CSV.

Grande! Ora come lo rendiamo meno brutto?

Disegnare il grafico

Per dare uno stile al grafico, modelliamo semplicemente come faremmo con i normali elementi nei CSS. Gli elementi della barra del grafico sono normali elementi DOM a livello di blocco e sono posizionati tramite Flexbox. Aggiungeremo alcuni stili al nostro CSS, che dovrebbe quindi assomigliare a questo.

body color: # 3f130c; height: 100%; font-family: sans-serif; background-image: url (... /bg.jpg); background-size: copertura; background-position: center; background-repeat: no-repeat; background-attachment: fixed;  h1, h2, h3, h4 font-family: Tauri, sans-serif;  .container width: 50%; position: relative; background-image: url (... /bg-blur.jpg); background-size: copertura; background-position: center; background-repeat: no-repeat; background-attachment: fixed; margine: 100px auto; padding: 100px;  .bacon-chart position: relative; z-index: 999;  .bacon-chart h3 margin: 0 0 1em;  .container: after background-color: rgba (255,255,255,0.4); position: absolute; top: 0; a sinistra: 0; width: 100%; height: 100%; soddisfare:"";  .container chart width: 100%; altezza: 400px;  .bacon-chart bar background-color: rgba (96,28,18,0.7); border: none; 

Nota: abbiamo aggiunto un carattere Google al file di indice sopra il nostro collegamento style.css:

Abbiamo incluso un piccolo bonus qui: l'effetto "finestra sfocata" può essere visto creato tra il contenitore e gli elementi del corpo. Facciamo uso di una seconda immagine di sfondo per raggiungere questo obiettivo.

Ora abbiamo un grafico più utile. Ma diventa molto, molto meglio.

Animazione e suggerimenti

Il tempo per alcuni rigiri, a cominciare da alcuni suggerimenti sulle barre. Per dare il via, aggiungeremo una nuova annotazione per ogni barra, in modo che il nostro markup grafico assomiglia a questo:

    anno  pancette   

Dopodiché, aggiungeremo alcuni nuovi stili al nostro CSS che consentiranno alcuni interessanti effetti al passaggio del mouse e transizioni semplici per il suggerimento:

.barra del grafico a bacon background-color: rgba (96,28,18,0.7); border: none; margin:! 0 importante;  datum overflow: hidden;  .tooltip width: auto; height: auto; background-color: # 444; color: #fff; Opacità: 0; sinistra: -100%; font-size: .6em; -webkit-transition: all .4s; -moz-transition: all .4s; -ms-transition: tutti .4s; -o-transizione: tutti .4s; transizione: tutti .4s; padding: 6px;  datum: hover background-color: rgba (255,255,255,0.1);  datum: hover .tooltip display: block; opacità: 1; a sinistra: 0; 

Animazione

Infine, vogliamo animare le nostre barre. Lo realizzeremo con un'animazione di fotogrammi chiave:

@ -webkit - barre dei keyframeIn 0% bottom: -100%;  100% bottom: 0; 

Che poi applicheremo al nostro elemento barra:

.bacon - chart bar background - color: rgba (96, 28, 18, 0.7); margine: 0! importante; confine: nessuno; altezza: 0; - webkit - animation: barsIn 1s; 

Questo può anche essere realizzato usando qualcosa di simile-webkit-transform: scale (1, 0), ma abbiamo voluto mantenerlo il più semplice possibile. Dovresti anche assicurarti di aggiungere i prefissi appropriati, se necessario.

Ulteriori informazioni sulla varianza

La varianza fa un ottimo lavoro di spiegazione di esempi più complessi e fornisce anche un ottimo indice di documentazione. Scoprirai che la Varianza è in grado di visualizzazioni molto più complesse. Toccheremo brevemente alcuni dei punti principali qui.

Variance utilizza i nomi delle diverse parti principali di un grafico per rendere facile la creazione di grafici, incluso punto,punto, gamma, bar, boxplot, e linea. Ognuno di questi ha i propri input determinabili. Questi possono essere utilizzati in combinazione tra loro e possono essere creati in modo iterativo con ripetere bloccare.

La varianza può anche utilizzare i dati collegati, che consente visualizzazioni basate su API che hanno informazioni aggiornate dinamicamente.

Conclusione

Oggi, hai imparato come creare un grafico completamente dichiarativo, animato e stilizzato usando i grafici di varianza. Nel tentativo di iniziare rapidamente, abbiamo tralasciato molte delle funzionalità disponibili in Variance, quindi assicurati di verificarlo!

Foto di pancetta di jeffreyww su Flickr, edita. Creative Commons 2.0