Datan visualisointi on tärkeä osa tarinoiden kertomista, mutta D3.js: n avulla voi eksyä rikkaruohoihin tuntikausia vain muutaman yksinkertaisen kaavion luomiseksi. Jos kaaviot ovat kaikki mitä tarvitset, on paljon kirjastoja, jotka kietovat D3: n ja tarjoavat sinulle käteviä tapoja rakentaa yksinkertaisia visualisointeja. Tällä viikolla alamme tarkastella React-vis -karttakirjastoa, jonka Uber loi ja hankki.
Reactilla ja d3.js: llä on mielenkiintoinen suhde. React on kyse komponenttien deklaratiivisesta renderoinnista ja D3.js on DOM-elementtien pakottavasta manipuloinnista. Niiden käyttö yhdessä on mahdollista viites, mutta on paljon mukavampaa kapseloida kaikki manipulointikoodi erilliseen komponenttiin, jotta sinun ei tarvitse vaihtaa kontekstia niin paljon. Onneksi React-vis-kirjasto tekee sen jo meille joukolla komposiittikomponentteja, joita voimme käyttää visualisointien rakentamiseen.
Paras tapa testata datan visualisointikirjastoja tai mitä tahansa kirjastoa on rakentamalla jotain sen kanssa. Tehdään se New Yorkin kaupungin suosittujen vauvojen nimien tietojoukon avulla.
Tietojen valmistelu React-vis
Aluksi olen käynnistänyt React-projektin luoda-reagoida-sovellus ja lisäsi muutaman riippuvuuden: reagoi visiin, d3-hae - auttaa CSV-tietojen hakemisessa ja hetki auttaa päivämäärän muotoilussa. Laitoin myös vähän kattilakoodia vetämään ja jäsentämään CSV: n, joka sisältää suositut nimet d3-nouto. JSON-muodossa vedettävässä tietojoukossa on noin 11 000 riviä, ja jokainen merkintä näyttää tältä:
{ "Syntymävuosi": "2016",
"Sukupuoli Nainen",
"Etnisyys": "Aasian ja Tyynenmeren saaret",
"Lapsen etunimi": "Olivia",
"Count": "172",
"Sijoitus": "1"
}
Koska näppäinten välilyönnit ja merkkijonoina esitetyt numerot tekisivät näistä tiedoista hankalia työskennellä, muokkaamme tietoja lataushetkellä hieromaan. Koodi käyttää yksinkertaisesti dsv menetelmä d3-nouto:
tuo {dsv} d3-fetchistä;tuontihetki hetkestä alkaen;
dsv (",", dataUrl, (d) => {
paluu {
yearOfBirth: + d ['syntymävuosi'],
sukupuoli: d ['Sukupuoli'],
etnisyys: d ['Etnisyys'],
etunimi: d ['Lapsen etunimi'],
count: + d ['Count'],
sijoitus: + d ['sijoitus'],
};
});
Nyt syöttötiedot ovat paljon ystävällisempiä. Se näyttää tältä:
{ "yearOfBirth": 2016,
"Sukupuoli Nainen",
"etnisyys": "Aasian ja Tyynenmeren saaristo",
"etunimi": "Olivia",
"count": 172,
"sijoitus": 1
}
Ensimmäinen juoni React-vis: n kanssa
Ensimmäinen todennäköisesti käyttämäsi komponentti on jonkinlainen XYPlot, joka sisältää muita komponentteja ja on läsnä melkein jokaisessa luomassasi kaaviossa. Tämä on enimmäkseen vain kääre, joka määrittelee visualisoinnin koon, mutta se voi sisältää joitain ominaisuuksia, jotka siirtyvät myös lapsille. Itsestään, XYPlot ei renderöi muuta kuin tyhjää tilaa:
<>leveys = {300}
korkeus = {300}
>
Tietojen näyttämiseksi meidän on käytettävä jonkinlaista sarjaa. Sarja on komponentti, joka todella piirtää tiedot, kuten pystysuora palkkikaavio (VerticalBarSeries) tai viivakaavio (LineSeries). Meillä on käytössämme 14 sarjaa laatikosta, mutta aloitamme yksinkertaisella VerticalBarSeries. Jokainen sarja perii perusmääritteestä. Hyödyllisin niistä on meille tiedot attribuutti:
<>leveys = {300}
korkeus = {300}
>
data = {data}
/>
Tämä kuitenkin epäonnistuu, koska React-vis odottaa tietoryhmän elementtien olevan seuraavassa muodossa:
{ x: 2016, // Tämä yhdistetään x-akseliin
y: 4 // Tämä kartoitetaan y-akselille
}
Esimerkiksi, jotta voimme näyttää tietojoukossa laskettujen vauvojen kokonaismäärän vuosittain, meidän on käsiteltävä tietoja saadaksemme yhden objektin jokaiselta vuodelta, x attribuutti on vuosi ja y attribuutti on vauvojen kokonaismäärä tietojoukossa. Koodin, jonka kirjoitin tekemään, on melko suppea:
const totalBabiesByYear = Object.entries (data.reduce ((acc, rivi) => { if (rivi.vuosiOfBirth in acc) {
acc [row.yearOfBirth] = acc [row.yearOfBirth] + row.count
} muu {
acc [row.yearOfBirth] = rivin määrä
}
paluu acc;
}, {})). kartta (([k, v]) => ({x: + k, y: v}));
Kun liität sen VerticalBarSeries, saamme tuloksia!
Tämä ei yksinään ole erityisen hyödyllinen, mutta onneksi React-vis-kirjasto tarjoaa joitain lisäkomponentteja, joita voidaan käyttää tietojen kontekstualisointiin. Tuodaan XAxis ja YAxis jotta voimme näyttää lisätietoja kaaviossamme. Me renderöimme nämä komponentit XYPlot meidän rinnalla VerticalBarSeries. Koodi ja tulokset näyttävät tältä:
<>leveys = {600}
korkeus = {600}
>
data = {totalBabiesByYear}
/>
Y-akselimerkkimme leikataan pois ja x-akselimerkkimme muotoillaan numeroiksi, mutta edistymme. Lisäämällä x-akselin pidetään erillisinä järjestysarvoina jatkuvan numeerisen alueen sijaan xType = "järjestys" kiinteistönä XYPlot. Kun olemme siinä, voimme lisätä kaavioon vasemman marginaalin, jotta voimme nähdä enemmän y-akselin tarroja:
<>leveys = {600}
korkeus = {600}
marginaali = {{
vasemmalla: 70
}}
xType = "järjestys"
>
Olemme liiketoimintaa! Kaavio näyttää jo hyvältä - ja suurin osa työstä, joka meidän oli tehtävä, liittyi tietojen hierontaan, ei tosiasialliseen renderointiin.
Ensi viikolla jatkamme React-vis-kirjaston komponenttien tutkimista ja määrittelemme joitain perustoimintoja. Katso tämä projekti GitHubissa, jos haluat leikkiä tietojoukon ja React-vis-kirjaston kanssa. Onko sinulla React-visillä tekemiäsi visualisointeja? Lähetä minulle kuvakaappaus Twitterissä @freethejazz.
