Programmering

JavaScript tutorial: Enkle datavisualiseringer med React-vis

Datavisualisering er en viktig del av å fortelle historier, men du kan gå deg vill i ugresset med D3.js i flere timer bare for å lage noen få enkle diagrammer. Hvis diagrammer er alt du trenger, er det mange biblioteker som pakker D3 og gir deg praktiske måter å lage enkle visualiseringer på. Denne uken begynner vi å se på React-vis, et kartbibliotek som Uber opprettet og åpent.

React og d3.js har et interessant forhold. React handler om deklarativ gjengivelse av komponenter og D3.js handler om nødvendig manipulering av DOM-elementer. Det er mulig å bruke dem sammen refs, men det er mye hyggeligere å kapsle inn all manipulasjonskoden i en egen komponent, slik at du ikke trenger å bytte sammenheng så mye. Heldigvis gjør React-vis-biblioteket det allerede for oss med en rekke komponerbare komponenter som vi kan bruke til å bygge visualiseringene våre.

Den beste måten å teste ut datavisualiseringsbiblioteker, eller noe bibliotek egentlig, er å bygge noe med det. La oss gjøre det ved å bruke datasettet for populære babynavn i City of New York.

Klargjøre dataene for React-vis

For å starte har jeg startet opp et React-prosjekt med create-react-app og la til noen avhengigheter: reager vis, d3-hent for å hjelpe med å hente inn CSV-data, og øyeblikk for å hjelpe med datoformatering. Jeg har også satt sammen litt kokerplatekode for å hente inn og analysere CSV som inneholder de populære navnene som brukes d3-henting. I JSON-format har datasettet vi trekker i omtrent 11 000 rader, og hver oppføring ser slik ut:

{

"Fødselsår": "2016",

"Kjønn kvinnelig",

"Etnisitet": "ASIAN AND PACIFIC ISLANDER",

"Child's First Name": "Olivia",

"Count": "172",

"Rangering": "1"

}

Fordi mellomrommene i nøklene og tallene som er representert som strenger, vil gjøre disse dataene upraktiske å jobbe med, vil vi endre dataene ved belastningstid for å massere. Denne koden bruker bare dsv metode fra d3-henting:

importer {dsv} fra 'd3-fetch';

importer øyeblikk fra 'øyeblikk';

dsv (",", dataUrl, (d) => {

komme tilbake {

yearOfBirth: + d ['Fødselsår'],

kjønn: d ['Kjønn'],

etnisitet: d ['Etnisitet'],

fornavn: d ['Fornavn for barn'],

count: + d ['Count'],

rangering: + d ['Rangering'],

  };

});

Nå er inngangsdataene våre mye vennligere. Det ser slik ut:

{

"yearOfBirth": 2016,

"kjønn kvinnelig",

"etnisitet": "ASIAN AND PACIFIC ISLANDER",

"firstName": "Olivia",

"telle": 172,

"rang": 1

}

Vår første plott med React-vis

Den første komponenten du sannsynligvis vil bruke er en eller annen form for en XYPlot, som inneholder andre komponenter og er til stede i nesten hvert diagram du bygger. Dette er stort sett bare en innpakning som definerer størrelsen på visualiseringen, men den kan inkludere noen egenskaper som også blir overført til barn. Av seg selv, XYPlot gir ikke annet enn noe tomt sted:

<>

bredde = {300}

høyde = {300}

For å faktisk vise data, må vi bruke en serie av noe slag. En serie er komponenten som faktisk tegner dataene, for eksempel et loddrett søylediagram (VerticalBarSeries) eller et linjediagram (LineSeries). Vi har 14 serier tilgjengelig fra esken, men vi begynner med en enkel VerticalBarSeries. Hver serie arver fra et basissett med attributter. Den mest nyttige for oss vil være data Egenskap:

<>

bredde = {300}

høyde = {300}

data = {data}

  />

Dette kommer imidlertid til å mislykkes, fordi React-vis forventer at elementene i dataarrayen skal ha følgende form:

{

x: 2016, // Dette blir kartlagt til x-aksen

y: 4 // Dette blir kartlagt til y-aksen

}

For eksempel, for å vise det totale antallet babyer som telles i datasettet etter år, må vi behandle dataene for å få et enkelt objekt for hvert år der x attributt er året og y attributt er det totale antallet babyer i datasettet. Koden jeg skrev for å gjøre er ganske kort:

const totalBabiesByYear = Object.entries (data.reduce ((acc, row) => {

if (row.yearOfBirth i samsvar) {

acc [row.yearOfBirth] = acc [row.yearOfBirth] + rad.telling

} annet {

acc [row.yearOfBirth] = rad.antall

  }

retur acc;

}, {})). kart (([k, v]) => ({x: + k, y: v}));

Når du kobler den til VerticalBarSeries, vi får noen resultater!

Dette er ikke spesielt nyttig alene, men heldigvis gir React-vis-biblioteket noen ekstra komponenter som kan brukes til å kontekstualisere informasjonen. La oss importere XAxis og YAxis slik at vi kan vise mer informasjon i diagrammet vårt. Vi gjengir komponentene inne i XYPlot ved siden av vår VerticalBarSeries. Koden og resultatene ser slik ut:

<>

bredde = {600}

høyde = {600}

data = {totalBabiesByYear}

  />

Y-akse-etikettene våre er avskåret og x-akse-etikettene blir formatert som tall, men vi gjør fremskritt. For å få x-aksen behandlet som diskrete ordinale verdier i motsetning til et kontinuerlig numerisk område, legger vi til xType = "ordinær" som en eiendom på XYPlot. Mens vi er i gang, kan vi legge til litt venstre marg i diagrammet, slik at vi kan se flere av y-aksens etiketter:

<>

bredde = {600}

høyde = {600}

margin = {{

venstre: 70

  }}

xType = "ordinær"

Vi er i virksomhet! Diagrammet vårt ser allerede bra ut - og det meste av arbeidet vi måtte gjøre, var å massere data, faktisk ikke gjengi det.

Neste uke vil vi fortsette å utforske React-vis-bibliotekets komponenter og definere noen grunnleggende interaksjoner. Ta en titt på dette prosjektet på GitHub hvis du vil leke med datasettet og React-vis-biblioteket. Har du noen visualiseringer du har laget med React-vis? Send meg et skjermbilde på Twitter @freethejazz.

$config[zx-auto] not found$config[zx-overlay] not found