Vizualizacija podatkov je pomemben del pripovedovanja zgodb, vendar se lahko z D3.jsom ure in ure izgubite v plevelu, samo da naredite nekaj preprostih kart. Če so grafikoni vse, kar potrebujete, obstaja veliko knjižnic, ki zavijejo D3 in vam nudijo priročne načine za izdelavo preprostih vizualizacij. Ta teden si bomo začeli ogledovati React-vis, knjižnico grafikonov, ki jo je Uber ustvaril in odprl.
React in d3.js imata zanimiv odnos. React je vse v deklarativnem upodabljanju komponent, D3.js pa v nujni manipulaciji elementov DOM. Njihova skupna uporaba je možna refs, vendar je veliko lepše vključiti vso manipulacijsko kodo v ločeno komponento, tako da vam ni treba toliko spreminjati kontekstov. Na srečo knjižnica React-vis to že počne s kopico sestavljivih komponent, ki jih lahko uporabimo za izdelavo svojih vizualizacij.
Najboljši način za preizkus knjižnic za ponazoritev podatkov ali katere koli druge knjižnice je, če z njimi nekaj zgradite. Naredimo to z uporabo nabora podatkov Popular Baby Names mesta New York.
Priprava podatkov za React-vis
Za začetek sem zagnal projekt React ustvariti-reagirati-app in dodal nekaj odvisnosti: odziv-vis, d3-donos za pomoč pri vnosu podatkov CSV in trenutek za pomoč pri oblikovanju datuma. Sestavil sem tudi nekaj vzorčne kode, da povlečem in razčlenim CSV, ki vključuje priljubljena imena d3-fetch. V obliki JSON ima nabor podatkov, ki ga vnašamo, približno 11.000 vrstic in vsak vnos je videti tako:
{ "Leto rojstva": "2016",
"Gender": "FEMALE",
"Etničnost": "Azijski in pacifiški OTOK",
"Ime otroka": "Olivia",
"Štetje": "172",
"Rank": "1"
}
Ker bodo presledki v tipkah in številke, predstavljeni kot nizi, s temi podatki neprijetno delati, bomo podatke med nalaganjem spremenili, da bomo nekaj masirali. Ta koda preprosto uporablja dsv metoda iz d3-fetch:
uvoz {dsv} iz 'd3-fetch';uvozni trenutek iz 'trenutka';
dsv (",", dataUrl, (d) => {
vrni {
yearOfBirth: + d ['Leto rojstva'],
spol: d ['Spol'],
narodnost: d ['narodnost'],
firstName: d ['Ime otroka'],
count: + d ['Count'],
rank: + d ['Rank'],
};
});
Zdaj so naši vhodni podatki veliko bolj prijazni. Izgleda takole:
{ "yearOfBirth": 2016,
"gender": "FEMALE",
"narodnost": "Azijski in pacifiški OTOK",
"firstName": "Olivia",
"štetje": 172,
"rank": 1
}
Naš prvi zaplet z React-vis
Prva komponenta, ki jo boste verjetno uporabljali, je neka oblika XYPlot, ki vsebuje druge komponente in je prisoten v skoraj vseh grafikonih, ki jih sestavite. To je večinoma samo ovoj, ki določa velikost vizualizacije, lahko pa vključuje nekatere lastnosti, ki se posredujejo tudi otrokom. Samo po sebi, XYPlot ne prikazuje ničesar, razen nekaj praznega prostora:
<>širina = {300}
višina = {300}
>
Za dejansko prikazovanje podatkov bomo morali uporabiti nekakšen niz. Serija je komponenta, ki dejansko črpa podatke, na primer navpični stolpčni grafikon (VerticalBarSeries) ali črtni grafikon (LineSeries). Na voljo imamo 14 serij iz škatle, vendar bomo začeli s preprostim VerticalBarSeries. Vsaka serija podeduje iz osnovnega nabora atributov. Najbolj uporaben nam bo podatkov atribut:
<>širina = {300}
višina = {300}
>
podatki = {podatki}
/>
To pa ne bo uspelo, ker React-vis pričakuje, da bodo elementi v podatkovnem polju v naslednji obliki:
{ x: 2016, // To bo preslikano na os x
y: 4 // Ta bo preslikana na os y
}
Če želimo na primer prikazati skupno število dojenčkov, štetih v naboru podatkov po letih, bomo morali podatke obdelati, da dobimo en predmet za vsako leto, kjer x atribut je leto in y atribut je skupno število dojenčkov v naboru podatkov. Koda, za katero sem napisal, je precej kratka:
const totalBabiesByYear = Object.entries (data.reduce ((acc, row) => { if (row.yearOfBirth v skladu) {
acc [row.yearOfBirth] = acc [row.yearOfBirth] + row.count
} še {
acc [row.yearOfBirth] = število vrstic
}
vrnitev po;
}, {})). map (([k, v]) => ({x: + k, y: v}));
Ko ga priključite na VerticalBarSeries, smo dobili nekaj rezultatov!
To samo po sebi ni posebej koristno, vendar na srečo knjižnica React-vis ponuja nekaj dodatnih komponent, s katerimi lahko informacije kontekstualiziramo. Uvozimo Osi X in Osi tako da lahko v našem grafikonu prikažemo več informacij. Te komponente bomo upodobili znotraj XYPlot poleg našega VerticalBarSeries. Koda in rezultati so videti tako:
<>širina = {600}
višina = {600}
>
podatki = {totalBabiesByYear}
/>
Naše oznake osi y so odrezane in oznake osi x so oblikovane kot številke, vendar napredujemo. Da bomo os x obravnavali kot diskretne redne vrednosti v nasprotju z neprekinjenim številskim obsegom, bomo dodali xType = "redni" kot lastnina na XYPlot. Ko smo že pri tem, lahko grafikonu dodamo nekaj levega roba, da bomo lahko videli več oznak osi y:
<>širina = {600}
višina = {600}
marža = {{
levo: 70
}}
xType = "redni"
>
Poslujemo! Naš grafikon je že videti odlično - in večina dela, ki smo ga morali opraviti, je bilo povezano z masiranjem podatkov, ne pa z dejanskim upodabljanjem.
Naslednji teden bomo nadaljevali z raziskovanjem komponent knjižnice React-vis in opredelili nekaj osnovnih interakcij. Oglejte si ta projekt na GitHubu, če se želite poigrati z naborom podatkov in knjižnico React-vis. Imate kakšno vizualizacijo, ki ste jo naredili z React-vis? Pošljite mi posnetek zaslona na Twitter @freethejazz.
