Gemakkelijkere visuele gegevens in de browser met variabeliagrammen

 jaar, bacons 1990,20 1995,231 2000,639 2005,1625 2010,7000 2015,16000 

 
Bacon data
     jaar    

 en voeg de volgende stijlen toe aan a style.css het dossier:

.container breedte: 50%; marge: 60px auto;  .container-kaart width: 100%; Hoogte: 400px; 

Let op een paar dingen hier:

• De grafiekmarkering lijkt veel op HTML. Het is in feite een geldige XML die Variance gebruikt om ons staafdiagram te bouwen. We hebben deze aangepaste tagging ook gebruikt om de CSV-gegevens in te pakken. We verwijzen naar dat CSV-element in de tabel label.
• scale-y-lineaire vertelt ons wat de schaal van de y-richting zou moeten zijn. In ons geval gaat onze dataset naar 16000, maar begint bij slechts 20. Om het bereik te dekken, stellen we onze onderkant op 0 en onze top op 20000.
• gids-x / gids-y maakt een vinkje op de respectieve assen.
•  doorloopt onze gegevens en maakt items op basis van elk gegevenspunt.
• aantekening is een label dat rond een bepaald item kan worden geplaatst, zoals een bar. Curly-accolades bieden u de mogelijkheid om een ​​stuk gegevens weer te geven; in ons geval, jaar bevindt zich in onze CSV, zodat we eenvoudig jaar kunnen produceren.
• bar maakt een bar-element, en map-lengthdefinieert de breedte van de balk  bacons kaarten naar de CSV.

Super goed! Hoe maken we het nu minder lelijk?

De grafiek stylen

Om de grafiek te stylen, stylen we simpelweg zoals we normale elementen in CSS zouden doen. De staafelementen van de grafiek zijn normale DOM-elementen op blokniveau en worden gepositioneerd met behulp van flexbox. We zullen enkele stijlen toevoegen aan onze CSS, die er dan ongeveer zo uit zou moeten zien.

body color: # 3f130c; height: 100%; font-family: sans-serif; achtergrondafbeelding: url (... /bg.jpg); background-size: dekken; 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: dekken; background-position: center; background-repeat: no-repeat; background-attachment: fixed; marge: 100px auto; padding: 100px;  .bacon-diagram positie: relatief; z-index: 999;  .bacon-chart h3 margin: 0 0 1em;  .container: na background-color: rgba (255,255,255,0,4); positie: absoluut; top: 0; left: 0; Breedte: 100%; height: 100%; inhoud:"";  .container-kaart width: 100%; Hoogte: 400px;  .bacon-chart bar background-colour: rgba (96,28,18,0,7); border: none; 

Notitie: we hebben een Google-lettertype toegevoegd aan het indexbestand boven onze style.css-link:

We hebben hier een kleine bonus opgenomen: het effect "wazig venster" is zichtbaar tussen de container en de lichaamselementen. We gebruiken hiervoor een tweede achtergrondafbeelding.

Nu hebben we een nuttiger diagram. Maar het wordt veel, veel beter.

Animatie en tooltips

Tijd voor wat bloeitijd, te beginnen met een aantal tooltips op de balken. Om dingen uit te schakelen, zullen we voor elke balk een nieuwe annotatie toevoegen, zodat onze grafiekopmaak er als volgt uitziet:

    jaar  Bacons   

Hierna zullen we een aantal nieuwe stijlen aan onze CSS toevoegen die enkele interessante hover-effecten en eenvoudige overgangen voor de tooltip mogelijk zullen maken:

.spek-staafdiagram achtergrondkleur: rgba (96, 28, 18, 0,7); border: none; margin: 0 belangrijk;  datum overflow: verborgen;  .tooltip width: auto; height: auto; background-color: # 444; color: # fff; ondoorzichtigheid: 0; Links: -100%; font-size: .6em; -webkit-overgang: alle .4s; -moz-overgang: alle .4s; -ms-overgang: alle .4s; -o-overgang: alle .4s; overgang: alle .4s; padding: 6px;  datum: hover background-color: rgba (255,255,255,0,1);  datum: hover .tooltip display: block; opaciteit: 1; left: 0; 

animatie

Ten slotte willen we onze bars animeren. We doen dit met een keyframe-animatie:

@ -webkit - hoofdframesbalkenIn 0% bottom: -100%;  100% onder: 0; 

Wat we dan zullen toepassen op ons bar-element:

.spek - kaartbalk achtergrond - kleur: rgba (96, 28, 18, 0.7); marge: 0! belangrijk; rand: geen; hoogte: 0; - webkit - animatie: barsIn 1s; 

Dit kan ook worden bereikt met behulp van iets als-webkit-transform: schaal (1, 0), maar we wilden het zo simpel mogelijk houden. Je moet er ook voor zorgen dat je de juiste voorvoegsels toevoegt als dat nodig is.

Meer over Variantie

Variance is een uitstekend hulpmiddel om complexere voorbeelden uit te leggen en biedt ook een geweldige index van documentatie. Je zult zien dat Variantie in staat is tot veel complexere visualisaties. We zullen hier kort enkele van de belangrijkste punten bespreken.

Variantie gebruikt namen van verschillende kerngedeelten van een diagram om het maken van de diagrammen eenvoudig te maken, inclusief punt,punt, reeks, bar, boxplot, en lijn. Elk van deze heeft zijn eigen bepaalbare inputs. Deze kunnen allemaal in combinatie met elkaar worden gebruikt en kunnen op een iteratieve manier worden gemaakt met de herhaling blok.

Variantie kan ook gekoppelde gegevens gebruiken, wat API-gestuurde visualisaties mogelijk maakt met dynamisch bijgewerkte informatie.

Conclusie

Vandaag hebt u geleerd hoe u een volledig declaratieve, geanimeerde, opgemaakte grafiek kunt maken met behulp van variantiekaarten. In een poging om u snel van start te laten gaan, hebben we een groot deel van de functionaliteit die beschikbaar is in Variance weggelaten, dus zorg ervoor dat u het zelf uitprobeert!

Baconfoto door jeffreyww op Flickr, bewerkt. Creative Commons 2.0