Datu vizualizācija ir svarīga stāstu stāstīšanas sastāvdaļa, taču stundām ilgi var pazust nezālēs ar D3.js, lai izveidotu dažas vienkāršas diagrammas. Ja diagrammas ir viss, kas jums nepieciešams, ir daudz bibliotēku, kas iesaiņo D3 un nodrošina ērtus veidus, kā izveidot vienkāršas vizualizācijas. Šonedēļ mēs sāksim aplūkot React-vis - diagrammu bibliotēku, kuru Uber izveidoja un atklāja.
React un d3.js ir interesantas attiecības. React ir visu par deklaratīvu komponentu atveidošanu, bet D3.js - par obligātu manipulēšanu ar DOM elementiem. To lietošana kopā ir iespējama atsauces, bet ir daudz jaukāk visu manipulācijas kodu iekapsulēt atsevišķā komponentā, lai jums nebūtu tik daudz jāmaina konteksti. Par laimi, React-vis bibliotēka to jau dara mūsu vietā ar virkni komponējamu komponentu, kurus mēs varam izmantot, lai izveidotu savas vizualizācijas.
Vislabākais veids, kā pārbaudīt datu vizualizācijas bibliotēkas vai jebkuru bibliotēku, ir kaut ko veidot ar to. Darīsim to, izmantojot Ņujorkas pilsētas populāro bērnu vārdu datu kopu.
Datu sagatavošana React-vis
Lai sāktu, esmu izveidojis React projektu izveidot-reaģēt-lietotni un pievienoja dažas atkarības: reaģēt-vis, d3-atnest - palīdzēt iegūt CSV datus un brīdi lai palīdzētu datuma formatēšanā. Es arī saliku nedaudz katla koda, lai ievilktu un parsētu CSV, kurā iekļauti populārie vārdi d3-atnest. JSON formātā datu kopai, kuru ievācam, ir aptuveni 11 000 rindu, un katrs ieraksts izskatās šādi:
{ "Dzimšanas gads": "2016",
"Dzimums Sieviete",
"Etniskā piederība": "Āzijas un Klusā okeāna sala",
"Bērna vārds": "Olivia",
"Count": "172",
"Rangs": "1"
}
Tā kā atstarpes taustiņos un cipari, kas attēloti kā virknes, padarītu šos datus neērtus strādāt, mēs datus pārveidosim ielādes laikā, lai veiktu nelielu masāžu. Šis kods vienkārši izmanto dsv metode no d3-atnest:
importēt {dsv} no 'd3-fetch';importa brīdis no “brīža”;
dsv (",", dataUrl, (d) => {
atgriezties {
yearOfBirth: + d ['Dzimšanas gads'],
dzimums: d ['Dzimums'],
etniskā piederība: d ['Etniskā piederība'],
firstName: d ['Bērna vārds'],
skaits: + d ['Count'],
rangs: + d ['rangs]],
};
});
Tagad mūsu ievades dati ir daudz draudzīgāki. Tas izskatās šādi:
{ "yearOfBirth": 2016,
"Dzimums Sieviete",
"etniskā piederība": "Āzijas un Klusā okeāna salu sala",
"firstName": "Olivia",
"skaits": 172,
"rangs": 1
}
Mūsu pirmais sižets ar React-vis
Pirmais komponents, kuru, iespējams, izmantosit, ir kāda veida XYPlot, kas satur citus komponentus un atrodas gandrīz katrā jūsu izveidotajā diagrammā. Tas galvenokārt ir tikai iesaiņojums, kas nosaka vizualizācijas lielumu, taču tas var ietvert dažas īpašības, kas tiek nodotas arī bērniem. Viens pats, XYPlot nepārveido neko citu kā tikai tukšu vietu:
<>platums = {300}
augstums = {300}
>
Lai faktiski parādītu datus, mums būs jāizmanto sava veida virkne. Sērija ir komponents, kas faktiski zīmē datus, piemēram, vertikālā joslu diagramma (VerticalBarSeries) vai līniju diagramma (LineSeries). Mūsu rīcībā ir 14 sērijas ārpus kastes, bet mēs sāksim ar vienkāršu VerticalBarSeries. Katra sērija tiek mantota no pamata atribūtu kopas. Visnoderīgākais mums būs dati atribūts:
<>platums = {300}
augstums = {300}
>
dati = {dati}
/>
Tomēr tas neizdosies, jo React-vis sagaida, ka datu masīva elementi būs šādā formā:
{ x: 2016, // Tas tiks kartēts ar x asi
y: 4 // Tas tiks kartēts ar y asi
}
Piemēram, lai parādītu kopējo zīdaiņu skaitu, kas uzskaitīti datu kopās pa gadiem, mums būs jāapstrādā dati, lai iegūtu vienu objektu par katru gadu, x atribūts ir gads un y atribūts ir kopējais mazuļu skaits datu kopā. Kods, ko es uzrakstīju, lai to izdarītu, ir diezgan īss:
const totalBabiesByYear = Object.entries (dati.samazināt ((acc, rinda) => { if (row.yearOfBirth acc) {
acc [row.yearOfBirth] = acc [row.yearOfBirth] + row.count
} cits
acc [row.yearOfBirth] = rinda.skaits
}
atgriešanās acc;
}, {})). karte (([k, v]) => ({x: + k, y: v}));
Kad jūs to pievienojat VerticalBarSeries, mēs iegūstam dažus rezultātus!
Tas pats par sevi nav īpaši noderīgs, taču par laimi React-vis bibliotēka piedāvā dažus papildu komponentus, kurus var izmantot informācijas kontekstualizēšanai. Importēsim XAxis un YAxis lai mēs varētu parādīt vairāk informācijas mūsu diagrammā. Mēs atveidosim šos komponentus XYPlot līdzās mūsu VerticalBarSeries. Kods un rezultāti izskatās šādi:
<>platums = {600}
augstums = {600}
>
dati = {totalBabiesByYear}
/>
Mūsu y ass etiķetes ir nogrieztas, un mūsu x ass etiķetes tiek formatētas kā skaitļi, taču mēs progresējam. Lai x asi uzskatītu par atsevišķām kārtas vērtībām, nevis pret nepārtrauktu skaitlisko diapazonu, mēs pievienosim xType = "kārtas numurs" kā īpašums XYPlot. Kamēr esam pie tā, diagrammai varam pievienot nedaudz kreisās malas, lai mēs varētu redzēt vairāk y ass iezīmju:
<>platums = {600}
augstums = {600}
starpība = {{
pa kreisi: 70
}}
xType = "kārtas numurs"
>
Mēs strādājam biznesā! Mūsu diagramma jau izskatās lieliski - un lielākā daļa darba, kas mums bija jādara, bija saistīts ar datu masēšanu, nevis patiesu atveidošanu.
Nākamnedēļ mēs turpināsim izpētīt React-vis bibliotēkas komponentus un definēt dažas pamata mijiedarbības. Pārbaudiet šo projektu vietnē GitHub, ja vēlaties spēlēt kopā ar datu kopu un React-vis bibliotēku. Vai jums ir kādas vizualizācijas, ko veicāt, izmantojot React-vis? Nosūtiet man ekrānuzņēmumu vietnē Twitter @freethejazz.
