lettere visuel data i browseren med varians diagrammer,,,,, at vi i dag vil dykke ned i varians kort, en enestående javascript baseret "grammatik for grafik", som giver et abstrakt erklærende - stil til at skabe, hvad ville   ellers være   temmelig komplekse figurer.varians kort sidder et sted mellem d3.js og highcharts med fleksibilitet og samtidig bevare en letforståelig syntaks., ved hjælp af varians kort er   ikke påberåbe sig dybere kendskab til javascript.  , så lad os tage et kig.,, at biblioteket, varians er en ikke - kommerciel version var vært for, gennem sine egne cdn,  , som du bør omfatte i din side, som så:,, < manuskript src = "http://variancecharts.com/cdn/variance-noncommercial-standalone-9bc0f5e.min.js" charset = "utf - 8" > < /manuskript >,, du vil omfatte en  , stil. css,   fil.vi vil ikke gå igennem processen med at forklare den grundlæggende opbygning af http: //- sagen, som de fleste af disse oplysninger er ligetil.,, vores første diagram, strid kan læse både json og csv. vi vil skabe en enkel søjlediagram ved anvendelse af følgende uofficielle csv - data om bacon popularitet:,, < csv - id = "årlige bacons" > år, bacons 1990,20 1995231 2000639 20051625 20107000 201516000 < /csv >,, som vi kan se af disse værdi par, bacon bliver eksponentielt mere og mere populær.  f.eks. par, 1990,20, viser, at bacon var 20, populær (, hvad pokker betyder) i 1990, men derefter, 1995, popularitet vokset til, 231,.,, men virkelig, at se det visuelt, vi vil gerne præsentere den ved hjælp af et søjlediagram.Here's an example of how we'd markup our chart (we'll go over the various elements in a moment).,,,<div class="bacon-chart"> <h3>Bacon data</h3> <chart data="#yearly-bacons" scale-y-linear="0 20000"> <guide-x></guide-x> <guide-y></guide-y> <repeat> <annotation class="bottom">{{year}}</annotation> <bar map-length="bacons"></bar> </repeat> </chart> </div>,,We will also need some accompanying CSS to set the size of the chart. for at gøre dette, vil vi få alle vores avance i et  , < div klasse ='container ">,   og tilføje følgende   stil et  , stil. css,   fil:,,. container (bredde: 50% margen: 60px auto.}) figur. (bredde: 100%, højde: 400px;}, nogle ting her:,, kort - - ligner html.det er faktisk gyldig xml, som afviger bruger til at opbygge vores bar figur.vi brugte også denne skik med at pakke csv - data.vi nævner, at csv - element i  , kort,   mærke,.,, scale-y-linear,   fortæller os, hvad omfanget af y - retningen skal være.i vores tilfælde, vores data går til 16.000, men begynder så lavt som 20.for at dække det område, vi sætter vores bunden på 0, og vores top på 20.000.,, guide-x /guide-y,   skaber en blodmide mark vejledning om de respektive opgaver.,, < gentager >,   loops over vores data og skaber produkter baseret på hvert datapunkt. anmærkning,,,   er en etiket, der kan anbringes på et bestemt punkt, som f.eks. en  , bar.curly bøjle tillade dig at vise en del af data i vores sag,  , år,   er i vores csv, så vi kan nemt produktion.,,,   skaber en bar element, og  , kort længde, definerer bredden af bar   , bacons,   kort til csv., fantastisk!hvordan skal vi gøre det mindre grim?- kortet,,,, at stil kortet, er vi blot stil, som vi normalt ville elementer i ccs.de bar elementer i diagrammet er gade niveau normale dom elementer og er placeret ved hjælp af flexbox.vi vil tilføje nogle former for vores forskning, som vil se noget som dette, organ (farve:f130c. højde: 100%; skrifttype familie: uden serif; baggrund billede: url (.. /bg jpg); baggrund størrelse: dække; baggrund holdning: center; baggrund gentager: ingen gentagelse; baggrund tillæg: fast;} h1, h2, h3, h4 (font familie: tauri, uden serif;}. container (bredde: 50%; holdning: relativ; baggrund billede: url (.. /bg tåge. jpg); baggrund størrelse: dække; baggrund holdning: center; baggrund gentager: ingen gentagelse tillæg: faste; baggrund; margen: 100px auto; polstring: 100px;}. bacon figur {holdning: relativ; z-index: 999.}. bacon figur h3 (margen: 0 0 1em;}. beholder: efter {baggrund farve: rgba (255255255,0.4); stilleion: absolut; top: 0; tilbage: 0; bredde: 100%, højde: 100% indhold: "").) figur (bredde: 100%, højde: 400px;}. bacon figur bar {baggrund farve: rgba (96,28,18,0.7); grænse: ingen;}, note:,   vi har tilføjet en google skrifttype til indeks fil over vores style.css link:,, < forbindelse href = http://fonts.googleapis.com/css?familie = tauri "rel ='stylesheet type ='text /css" >,, vi har medtaget en lille bonus her: "sløret vindue" virkning kan være set skabt mellem beholderens krop og elementer.vi gør brug af en anden baggrund image for at opnå dette, har vi nu en mere nyttigt kort.men det bliver meget bedre.,, animation og tooltips, tid til en blomstrer,   begynder med   nogle tooltips på barer.To kick things off, we'll add a new annotation for each bar, so that our chart markup looks like this:,,<chart data="#yearly-bacons" scale-y-linear="0 20000" scale-y-linear="1990 2015"> <guide-x></guide-x> <guide-y></guide-y> <repeat> <annotation class="bottom">{{year}}</annotation> <annotation class="tooltip" map-position="bacons">{{bacons}}</annotation> <bar map-length="bacons"></bar> </repeat> </chart>,,After that, we will add some new styles to our CSS that will allow for some interesting hover effects and simple transitions for the tooltip:,,.bacon-chart bar { background-color:rgba(96,28,18,0.7); border- ingen; margen: 0.vigtige;} datum {overløb: skjult.}. tooltip (bredde: auto, højde: auto; baggrund farve:Ƽ farve:&#fff; uklarhed: 0; tilbage: - 100%; skriftstørrelsen:. 6em; - webkit overgang. 4s, - - overgang. 4. - fru overgang. 4s; - o-transition: alle. 4s; overgang. 4s, polstring: 6px;} datum: den {baggrund farve: rgba (255255255,0.1)} datum: svæv. tooltip (display: blok; uklarhed: 1; tilbage: 0}, animation, endelig ønsker vi at manipulerer vores barer.vi vil gøre dette med en keyframe informationskampagne:,, @ - webkit - keyframes barsin {0% (nederst: - 100%} 100% {nederst: 0}},, som vi så vil finde anvendelse på vores bar element:,,. bacon - figur bar {baggrund - farve: rgba (96 28, 18, 7) margen: 0.vigtige; grænse: ingen. højde: 0 - webkit - informationskampagne: barsin 1s;}, kan dette også ske med sådan noget, - webkit omdanne: skala (1, 0), men vi ville beholde det så enkelt som muligt.du bør også   du tilføje en præfikser som nødvendigt.,, mere om strid, varians er et stort stykke arbejde med at forklare   mere komplicerede eksempler, og indeholder også en stor indeks for   dokumentation.du vil opdage, at varians er i stand til   langt mere kompleks visualitioner.jeg vil kort komme ind på nogle af de vigtigste punkter her.,, varians bruger navne af forskellige centrale dele af et skema for at gøre opbygningen af kortene, let, herunder  ,,,,, dot,  , afstand,  , bar,,  , boxplot, og  , linje.hver af disse har deres egne bestemmelige input.disse kan anvendes i kombination med hinanden og kan oprettes i iterativ mode med  , gentager,   blok.,, strid kan også bruge   forbundne data, som gør det muligt for api drevet visualitioner, der er dynamisk ajourførte oplysninger.,, konklusion i dag, du har lært at skabe et helt erklæringer, tegnefilm, såkaldte figur ved hjælp af varians diagrammer.i et forsøg på at komme i gang hurtigt, vi har lagt en masse de funktioner, der er til rådighed i strid, så sørg for at tjekke det ud for dig selv!,, bacon billede   af jeffreyww på flickr redigeret.   kreative underhuset 2.0,