Date vizuale mai ușoare în browserul cu diagrame de variație

 an, bacon 1990,20 1995,231 2000,639 2005,1625 2010,7000 2015,16000 

 
Datele baconului
     an    

 și adăugați următoarele stiluri la a style.css fişier:

.container lățime: 50%; margine: 60 pixeli auto;  .container chart width: 100%; height: 400px; 

Observați câteva lucruri aici:

• Marcajul grafic arată foarte mult ca HTML. De fapt, este valabil XML pe care Variance îl folosește pentru a-și construi graficul de bare. De asemenea, am folosit această etichetare personalizată pentru a împacheta datele CSV. Referindu - ne elementul CSV în diagramă etichetă.
• scale-y-liniar ne spune ce scară a direcției y ar trebui să fie. În cazul nostru, setul nostru de date merge la 16000, dar începe la 20 de grade. Pentru a acoperi gama, ne-am stabilit capătul inferior la 0, iar vârful nostru la 20000.
• ghid-x / ghid-y creează un ghidaj pentru marcaje pe axele respective.
•  buclele asupra datelor noastre și creează elemente bazate pe fiecare punct de date.
• adnotare este o etichetă care poate fi plasată în jurul unui anumit element, cum ar fi a bar. Curbele curbate vă permit să afișați o bucată de date; în cazul nostru, an este în CSV-ul nostru, astfel încât să putem scoate cu ușurință anul.
• bar creează un element de bara și harta-lungimedefinește lățimea barei  bacon hărți către CSV.

Grozav! Acum cum o facem mai puțin urâtă?

Modelarea graficului

Pentru a modela graficul, pur și simplu ne-am simțit așa cum ar fi elemente normale în CSS. Elementele barei din diagramă sunt elementele DOM normale la nivel de bloc și sunt poziționate utilizând flexbox. Vom adăuga câteva stiluri la CSS-ul nostru, care ar trebui să arate astfel.

corp culoare: # 3f130c; înălțime: 100%; font-family: sans-serif; fundal-imagine: url (... / bg.jpg); background-size: capac; background-position: centru; background-repeat: no-repetare; background-attachment: fix;  h1, h2, h3, h4 font-family: Tauri, sans-serif;  .container lățime: 50%; Poziția: relativă; imaginea de fundal: url (... /bg-blur.jpg); background-size: capac; background-position: centru; background-repeat: no-repetare; background-attachment: fix; margine: 100 pixeli automat; padding: 100px; . bacon-chart poziție: relativă; z-index: 999;  .bacon-diagramă h3 marja: 0 0 1em;  .container: după background-color: rgba (255,255,255,0,4); Poziția: absolută; top: 0; stânga: 0; lățime: 100%; înălțime: 100%; conţinut:"";  .container chart width: 100%; height: 400px; . bacon-diagramă bar background-color: rgba (96,28,18,0,7); frontieră: nici una; 

Notă: am adăugat un font Google în fișierul index deasupra linkului nostru stil.css:

Am inclus un bonus mic aici: efectul "fereastră neclară" poate fi văzut creat între elementul container și corp. Folosim oa doua imagine de fundal pentru a realiza acest lucru.

Acum avem o diagramă mai utilă. Dar devine mult, mult mai bine.

Animație și instrumente

Timpul pentru unele infloriri, incepand cu cateva sfaturi pe baruri. Pentru a elimina lucrurile, vom adăuga o nouă adnotare pentru fiecare bar, astfel încât marcajele diagramelor noastre să arate astfel:

    an  bacon   

După aceasta, vom adăuga câteva stiluri noi CSS-ului nostru care vor permite unele efecte interesante de hover și tranziții simple pentru tooltip:

.bacon-diagramă bar fundal-culoare: rgba (96,28,18,0,7); frontieră: nici una; Marja: 0 importantă;  datum overflow: hidden;  .tooltip width: auto; înălțime: auto; background-color: # 444; Culoare: #fff; opacitate: 0; stânga: -100%; font-size: .6em; -webkit-transition: all .4s; -moz-transition: all .4s; -ms-transition: toate .4s; -o-tranziție: toate .4s; tranziție: toate .4s; padding: 6px;  datum: hover fundal-culoare: rgba (255,255,255,0,1);  datum: hover .tooltip afișare: bloc; opacitate: 1; stânga: 0; 

Animaţie

În cele din urmă, vrem să animăm barurile noastre. Vom realiza acest lucru cu o animație cheie cheie:

@ -webkit - bare de cadre cheieIn 0% bottom: -100%;  100% bottom: 0; 

Ceea ce vom aplica apoi elementului nostru de bare:

.bacon - grafic bar fundal - culoare: rgba (96, 28, 18, 0.7); marja: 0! important; frontieră: nici una; înălțime: 0; - webkit - animație: bare în 1s; 

Acest lucru poate fi, de asemenea, realizat folosind ceva de genul-webkit-transform: scară (1, 0), dar am vrut să-l păstrăm cât mai simplu posibil. De asemenea, trebuie să vă asigurați că adăugați prefixele corespunzătoare după cum este necesar.

Mai multe despre varianță

Diferența face o treabă excelentă de a explica exemple mai complexe și oferă, de asemenea, un indiciu excelent de documentare. Veți găsi că variația este capabilă de vizualizări mult mai complexe. Vom atinge pe scurt câteva dintre punctele principale de aici.

Varianta utilizează nume de părți diferite ale unei diagrame pentru a face construirea diagramelor ușor, inclusiv punct,punct, gamă, bar, grafic cu căsuțe, și linia. Fiecare dintre acestea are propriile intrări determinabile. Acestea pot fi folosite în combinație cu altele și pot fi create în mod iterativ cu repeta bloc.

Varianța poate utiliza, de asemenea, date corelate, care permit vizualizări bazate pe API care au o informație actualizată dinamic.

Concluzie

Astăzi, ați învățat cum să creați o diagramă complet declarată, animată, folosind diagramele de variație. Într-un efort de a vă face să începeți rapid, am lăsat o mulțime de funcționalități disponibile în variantă, deci asigurați-vă că ați verificat-o pentru dvs.!

Fotografia cu bacon de către jeffreyww pe Flickr, editată. Creative Commons 2.0