Datavisualisering er en vigtig del af fortællingen af historier, men du kan gå tabt i ukrudtet med D3.js i timevis bare for at lave et par enkle diagrammer. Hvis diagrammer er alt hvad du behøver, er der masser af biblioteker, der omslutter D3 og giver dig praktiske måder til at opbygge enkle visualiseringer. Denne uge begynder vi at se på React-vis, et kortbibliotek, som Uber oprettede og open source.
React og d3.js har et interessant forhold. React handler om deklarativ gengivelse af komponenter, og D3.js handler om nødvendig manipulering af DOM-elementer. Det er muligt at bruge dem sammen refs, men det er meget pænere at indkapsle al manipulationskoden i en separat komponent, så du ikke behøver at skifte kontekst så meget. Heldigvis gør React-vis-biblioteket det allerede for os med en masse komponerbare komponenter, som vi kan bruge til at opbygge vores visualiseringer.
Den bedste måde at teste datavisualiseringsbiblioteker eller ethvert bibliotek på er ved at bygge noget med det. Lad os gøre det ved hjælp af City of New Yorks populære datasæt til babynavne.
Forberedelse af data til React-vis
For at starte har jeg startet et React-projekt med Opret-reager-app og tilføjede et par afhængigheder: reager-vis, d3-hent for at hjælpe med at trække CSV-data ind, og øjeblik for at hjælpe med datoformatering. Jeg sammensatte også en smule kedelpladekode for at trække og parse CSV'en, der indeholder de populære navne ved hjælp af d3-hent. I JSON-format har datasættet, vi trækker i, ca. 11.000 rækker, og hver post ser sådan ud:
{ "Fødselsår": "2016",
"Køn kvinde",
"Etnicitet": "ASIAN OG PACIFIC ISLANDER",
"Barns fornavn": "Olivia",
"Count": "172",
"Rang": "1"
}
Fordi mellemrummene i tasterne og numrene, der er repræsenteret som strenge, gør disse data ubelejlige at arbejde med, ændrer vi dataene ved indlæsningstid for at massere. Denne kode bruger simpelthen dsv metode fra d3-hent:
importer {dsv} fra 'd3-fetch';importer øjeblik fra 'øjeblik';
dsv (",", dataUrl, (d) => {
Vend tilbage {
yearOfBirth: + d ['Fødselsår'],
køn: d ['Køn'],
etnicitet: d ['Etnicitet'],
fornavn: d ['Fornavn til barn'],
count: + d ['Count'],
rang: + d ['Rang'],
};
});
Nu er vores inputdata meget venligere. Det ser sådan ud:
{ "yearOfBirth": 2016,
"køn kvinde",
"etnicitet": "ASIAN OG PACIFIC ISLANDER",
"firstName": "Olivia",
"antal": 172,
"rang": 1
}
Vores første plot med React-vis
Den første komponent, du sandsynligvis bruger, er en form for en XYPlot, som indeholder andre komponenter og findes i næsten ethvert diagram, du bygger. Dette er for det meste bare en indpakning, der definerer størrelsen på visualiseringen, men det kan også omfatte nogle egenskaber, der også overføres til børn. Af sig selv XYPlot gengiver ikke andet end noget tomt rum:
<>bredde = {300}
højde = {300}
>
For faktisk at vise data skal vi bruge en række af en slags. En serie er den komponent, der faktisk tegner dataene, f.eks. Et lodret søjlediagram (VerticalBarSeries) eller et linjediagram (LineSeries). Vi har 14 serier til rådighed ud af kassen, men vi starter med en simpel VerticalBarSeries. Hver serie arver fra et basissæt af attributter. Den mest nyttige for os vil være data attribut:
<>bredde = {300}
højde = {300}
>
data = {data}
/>
Dette vil dog mislykkes, fordi React-vis forventer, at elementerne i dataarrayet har følgende form:
{ x: 2016, // Dette kortlægges til x-aksen
y: 4 // Dette kortlægges til y-aksen
}
For eksempel for at vise det samlede antal babyer, der tælles i datasættet efter år, skal vi behandle dataene for at få et enkelt objekt for hvert år, hvor x attribut er året og y attribut er det samlede antal babyer i datasættet. Koden jeg skrev for at gøre det er ret kort:
const totalBabiesByYear = Object.entries (data.reduce ((acc, række) => { if (row.yearOfBirth i henhold til) {
acc [row.yearOfBirth] = acc [row.yearOfBirth] + række.antal
} andet {
acc [row.yearOfBirth] = række.antal
}
returnere acc;
kort (([k, v]) => ({x: + k, y: v}));
Når du tilslutter det til VerticalBarSeries, vi får nogle resultater!
Dette er ikke særligt nyttigt alene, men heldigvis indeholder React-vis-biblioteket nogle yderligere komponenter, der kan bruges til at kontekstualisere oplysningerne. Lad os importere XAxis og YAxis så vi kan vise mere information i vores diagram. Vi gengiver disse komponenter inde i XYPlot ved siden af vores VerticalBarSeries. Koden og resultaterne ser sådan ud:
<>bredde = {600}
højde = {600}
>
data = {totalBabiesByYear}
/>
Vores etiketter på y-aksen er afskåret, og vores x-akse-etiketter formateres som tal, men vi gør fremskridt. For at få x-aksen behandlet som diskrete ordinale værdier i modsætning til et kontinuerligt numerisk område, tilføjer vi xType = "ordinal" som en ejendom på XYPlot. Mens vi er ved det, kan vi tilføje nogle venstre margener til diagrammet, så vi kan se flere af y-aksens etiketter:
<>bredde = {600}
højde = {600}
margin = {{
venstre: 70
}}
xType = "ordinal"
>
Vi har forretning! Vores diagram ser allerede godt ud - og det meste af det arbejde, vi var nødt til at gøre, var relateret til at massere data, ikke rent faktisk gengive dem.
Næste uge vil vi fortsætte med at udforske komponenterne i React-vis-biblioteket og definere nogle grundlæggende interaktioner. Tjek dette projekt på GitHub, hvis du vil lege med datasættet og React-vis-biblioteket. Har du nogen visualiseringer, du har lavet med React-vis? Send mig et screenshot på Twitter @freethejazz.
