Share
I dag skal vi dykke i Variance Charts; en unik JavaScript-basert "grammatikk av grafikk" som gir en abstrakt, declarative markup stil for å lage det som ellers ville være ganske komplekse diagrammer. Variantdiagrammer sitter et sted mellom D3.js og HighCharts, som gir fleksibilitet mens du beholder en tilnærbar syntax.
Bruke Variant Charts stoler ikke på dypere kunnskap om JavaScript. La oss ta en titt!
Variance gir en ikke-kommersiell versjon, hostet gjennom sin egen CDN, som du bør inkludere på siden din slik:
Du vil inkludere en style.css fil også. Vi vil ikke gå gjennom prosessen med å forklare det grunnleggende oppsettet for HTML-filen, da de fleste av disse detaljene er enkle.
Variansen kan lese både JSON og CSV; Vi vil lage et enkelt strekdiagram ved hjelp av følgende uoffisielle CSV-data om bacon popularitet:
år, bacons 1990,20 1995,231 2000,639 2005,1625 2010,7000 2015,16000
Som vi kan se fra disse verdiparene, blir bacon eksponentielt mer og mer populært. For eksempel, paret 1990,20 viser at bacon var 20 populær (uansett hva det betyr) i 1990, men da ved 1995 popularitet hadde steget til 231.
Men egentlig, for å se dette visuelt, vil vi gjerne presentere det ved hjelp av et linjediagram. Her er et eksempel på hvordan vi skulle merke vårt diagram (vi går over de ulike elementene i et øyeblikk).
Bacon data
år
Vi vil også trenge noen medfølgende CSS for å angi størrelsen på diagrammet. For å gjøre dette vil vi pakke inn alle våre oppslag i en Legg merke til noen ting her: Flott! Nå hvordan gjør vi det mindre styggt? For å utforme diagrammet, stiler vi ganske enkelt som vi ville normale elementer i CSS. Stangelementene i diagrammet er blokknivå normale DOM-elementer og er plassert ved hjelp av flexbox. Vi vil legge til noen stiler til vårt CSS, som da skal se slik ut. Merk: Vi har lagt til en Google-skrift i indeksfilen over vår style.css-kobling: Vi har tatt med en liten bonus her: "Sløret vindu" -effekten kan sees opp mellom beholderen og kroppsdelene. Vi benytter et annet bakgrunnsbilde for å oppnå dette. Nå har vi et mer nyttig diagram. Men det blir mye, mye bedre. Tid for noen blomstrer, begynner med noen verktøytips på stolpene. For å sparke ting, legger vi til en ny kommentar for hver linje, slik at vårt kartoppslag ser slik ut: Etter det vil vi legge til noen nye stiler til vårt CSS som vil tillate noen interessante hovereffekter og enkle overganger for verktøytipset: Til slutt vil vi animere våre barer i. Vi oppnår dette med en keyframe-animasjon: Som vil vi da søke på barelementet vårt: Dette kan også oppnås ved å bruke noe lignende Varianse gjør en god jobb med å forklare mer komplekse eksempler, og gir også en god indeks for dokumentasjon. Du vil oppdage at Variance er i stand til langt mer komplekse visualiseringer. Vi berører kort om noen av hovedpoengene her. Varians benytter navn på forskjellige kjerneelementer i et diagram for å gjøre det enklere å bygge diagrammer, inkludert Varians kan også bruke koblede data, som tillater API-drevne visualiseringer som har dynamisk oppdatert informasjon. I dag har du lært hvordan du oppretter et helt deklarativt, animert, stilert diagram ved hjelp av variasjonskart. I et forsøk på å komme i gang raskt, har vi slått ut mye av funksjonaliteten tilgjengelig i Variance, så sørg for å sjekke det ut for deg selv! Bacon bilde av jeffreyww på Flickr, redigert. Creative Commons 2.0style.css fil:.beholder bredde: 50%; margin: 60px auto; .container chart width: 100%; høyde: 400 piksler;
diagram stikkord.skala-y-lineær forteller oss hva skalaen av y-retningen skal være. I vårt tilfelle går vårt datasett til 16000, men starter så lavt som 20. For å dekke rekkevidden, setter vi vår nedre ende på 0, og vår topp på 20000.guide-x / guide-y lager en tick-mark guide på de respektive aksene.merknad er en etikett som kan plasseres rundt et bestemt element, for eksempel a Bar. Curly braces lar deg vise et stykke data; i vårt tilfelle, år er i vår CSV, så vi kan enkelt utføre år.Bar lager et barelement, og map-lengdedefinerer bredden på linjen bacons kart til CSV.Styling diagrammet
kropp farge: # 3f130c; høyde: 100%; font-family: uten seriffer; bakgrunnsbilde: url (... /bg.jpg); Bakgrunnen-størrelse: deksel; Bakgrunnen-stilling: center; background-repeat: no-repeat; Bakgrunnen-vedlegg: fast; h1, h2, h3, h4 font-family: Tauri, sans-serif; .container width: 50%; stilling: i forhold; bakgrunnsbilde: url (... /bg-blur.jpg); Bakgrunnen-størrelse: deksel; Bakgrunnen-stilling: center; background-repeat: no-repeat; Bakgrunnen-vedlegg: fast; margin: 100px auto; padding: 100 piksler; .bacon-diagram posisjon: relativ; z-index: 999; .bacon-diagram h3 margin: 0 0 1em; .container: etter bakgrunnsfarge: rgba (255,255,255,0,4); stilling: absolutt; topp: 0; venstre: 0; bredde: 100%; høyde: 100%; innhold:""; .container chart width: 100%; høyde: 400 piksler; .bacon-chart bar bakgrunnsfarge: rgba (96,28,18,0,7); border: none;
Animasjon og verktøytips
.bacon-kartlinje bakgrunnsfarge: rgba (96,28,18,0,7); border: none; margin: 0 viktig; dato overflow: hidden; .tooltip width: auto; height: auto; background-color: # 444; farge: #fff; opacity: 0; venstre: -100%; font-size: .6em; -webkit-overgang: alle .4s; -moz-overgang: alle .4s; -ms-overgang: alle .4s; -o-overgang: alle .4s; overgang: alle .4s; padding: 6 piksler; dato: hover bakgrunnsfarge: rgba (255,255,255,0,1); dato: hover .tooltip display: block; opacity: 1; venstre: 0;
animasjon
@ -webkit - keyframes barsIn 0% bunn: -100%; 100% bunn: 0;
.bacon - kartlinje bakgrunn - farge: rgba (96, 28, 18, 0,7); margin: 0! viktig; grense: ingen; høyde: 0; - webkit - animasjon: barer i 1s;
-webkit-transform: skala (1, 0), men vi ønsket å holde det så enkelt som mulig. Du bør også sørge for at du legger til de riktige prefiksene etter behov.Mer om variasjon
punkt,punktum, område, Bar, boxplot, og linje. Hver av disse har sine egne determinerbare innganger. Disse kan alle brukes i kombinasjon med hverandre, og kan opprettes på iterativ måte med gjenta blokkere.Konklusjon
Accentsconagua