Programavimas

„JavaScript“ pamoka: Lengva duomenų vizualizacija naudojant „React-vis“

Duomenų vizualizavimas yra svarbi pasakojimo dalis, tačiau valandomis galite pasiklysti piktžolėse su D3.js, kad susidarytumėte keletą paprastų diagramų. Jei jums reikia tik diagramų, yra daugybė bibliotekų, kurios apgaubia D3 ir suteikia jums patogius paprastų vizualizacijų kūrimo būdus. Šią savaitę pradėsime žiūrėti į „React-vis“ - diagramų biblioteką, kurią sukūrė „Uber“ ir kuri buvo atvira.

„React“ ir „d3.js“ palaiko įdomius santykius. „React“ yra apie deklaratyvų komponentų atvaizdavimą, o „D3.js“ - apie būtiną manipuliavimą DOM elementais. Naudoti juos kartu galima nuorodas, bet daug maloniau visą manipuliavimo kodą sukomponuoti į atskirą komponentą, kad nereikėtų tiek daug perjungti kontekstų. Laimei, „React-vis“ biblioteka tai jau daro mums naudodama daugybę komponuojamų komponentų, kuriuos galime panaudoti kurdami vizualizacijas.

Geriausias būdas išbandyti duomenų vizualizavimo bibliotekas ar bet kurią biblioteką yra kuriant ką nors jomis. Padarykime tai naudodamiesi Niujorko miesto populiarių kūdikių vardų duomenų rinkiniu.

Duomenų paruošimas „React-vis“

Norėdami pradėti, aš įkūriau „React“ projektą sukurti-reaguoti-programą ir pridėjo keletą priklausomybių: reaguoti-vis, d3-gauti padėti surinkti CSV duomenis ir momentas kad padėtų formuoti datas. Aš taip pat sudėjau šiek tiek katilo kodo, kad ištraukčiau ir išanalizuočiau CSV, kuriame yra naudojami populiarūs vardai d3-atnešti. JSON formatu duomenų rinkinyje, kurį traukiame, yra apie 11 000 eilučių, o kiekvienas įrašas atrodo taip:

{

„Gimimo metai“: „2016“,

"Lytis Moteris",

"Etniškumas": "Azijos ir Ramiojo vandenyno salos",

„Vaiko vardas“: „Olivia“,

„Grafas“: „172“,

„Reitingas“: „1“

}

Kadangi tarpai klavišuose ir skaičiai, pavaizduoti kaip eilutės, padarytų šiuos duomenis nepatogu dirbti, mes pakeisime duomenis įkėlimo metu, kad šiek tiek masažuotume. Šis kodas paprasčiausiai naudoja dsv metodas nuo d3-atnešti:

importuoti {dsv} iš 'd3-fetch';

importo momentas nuo „momento“;

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

grįžti {

yearOfBirth: + d ['Gimimo metai'],

lytis: d ['Lytis'],

tautybė: d ['Etniškumas'],

firstName: d [„Vaiko vardas“],

skaičius: + d ['Count'],

reitingas: + d ['reitingas]],

  };

});

Dabar mūsų įvesties duomenys yra daug draugiškesni. Tai atrodo taip:

{

„yearOfBirth“: 2016 m.

"Lytis Moteris",

"etninė kilmė": "Azijos ir Ramiojo vandenyno salos",

"firstName": "Olivia",

„skaičius“: 172,

„rangas“: 1

}

Pirmasis mūsų planas su „React-vis“

Pirmasis komponentas, kurį tikriausiai naudosite, yra tam tikra „ „XYPlot“, kuriame yra kitų komponentų ir yra beveik kiekvienoje jūsų sukurtoje diagramoje. Tai dažniausiai yra tik apvalkalas, apibrėžiantis vizualizacijos dydį, tačiau jis gali apimti keletą savybių, kurios perduodamos ir vaikams. Savaime, „XYPlot“ nepateikia nieko, išskyrus tuščią vietą:

<>

plotis = {300}

aukštis = {300}

Norėdami iš tikrųjų rodyti duomenis, turėsime naudoti tam tikras serijas. Serija yra komponentas, kuris iš tikrųjų piešia duomenis, pvz., Vertikali juostinė diagrama („VerticalBarSeries“) arba linijinę diagramą („LineSeries“). Mūsų dėžutėje yra 14 serijų, bet mes pradėsime nuo paprastos „VerticalBarSeries“. Kiekviena serija paveldi iš pagrindinio atributų rinkinio. Mums naudingiausias bus duomenis atributas:

<>

plotis = {300}

aukštis = {300}

duomenys = {duomenys}

  />

Tačiau tai nepavyks, nes „React-vis“ tikisi, kad duomenų masyvo elementai bus tokios formos:

{

x: 2016, // Tai bus susieta su x ašimi

y: 4 // Tai bus susieta su y ašimi

}

Pvz., Norėdami parodyti bendrą kūdikių skaičių, suskaičiuotą duomenų rinkinyje pagal metus, turėsime apdoroti duomenis, kad gautume po vieną objektą kiekvienais metais, kai x atributas yra metai ir y atributas yra bendras kūdikių skaičius duomenų rinkinyje. Kodas, kurį parašiau tai padaryti, yra gana trumpas:

const totalBabiesByYear = Object.entries (duomenys.sumažinti ((acc, eilutė) => {

if (row.yearOfBirth pagal acc) {

acc [row.yearOfBirth] = acc [row.yearOfBirth] + eilutė.count

} Kitas {

acc [row.yearOfBirth] = eilutė.skaičius

  }

grįžti acc;

}, {})). žemėlapis (([k, v]) => ({x: + k, y: v}));

Kai prijungsite jį prie „VerticalBarSeries“, mes gauname keletą rezultatų!

Tai savaime nėra ypač naudinga, tačiau, laimei, „React-vis“ biblioteka pateikia keletą papildomų komponentų, kuriuos galima naudoti norint kontekstualizuoti informaciją. Importuokime XAxis ir „YAxis“ kad galėtume pateikti daugiau informacijos savo diagramoje. Tuos komponentus pateiksime „XYPlot“ greta mūsų „VerticalBarSeries“. Kodas ir rezultatai atrodo taip:

<>

plotis = {600}

aukštis = {600}

duomenys = {totalBabiesByYear}

  />

Y ašies etiketės yra iškirptos, o x ašies etiketės formatuojamos kaip skaičiai, tačiau mes darome pažangą. Norėdami, kad x ašis būtų traktuojama kaip atskiros eilės vertės, o ne ištisinis skaitinis diapazonas, pridėsime xType = "eilinis" kaip nuosavybė „XYPlot“. Tuo metu mes galime pridėti kairę paraštę diagramoje, kad galėtume pamatyti daugiau y ašies etikečių:

<>

plotis = {600}

aukštis = {600}

paraštė = {{

liko: 70

  }}

xType = "eilinis"

Mes užsiimame verslu! Mūsų diagrama jau atrodo puikiai - ir dauguma darbų, kuriuos turėjome atlikti, buvo susiję su duomenų masažavimu, o ne iš tikrųjų jų pateikimu.

Kitą savaitę mes toliau tyrinėsime „React-vis“ bibliotekos komponentus ir apibrėžsime keletą pagrindinių sąveikų. Peržiūrėkite šį projektą „GitHub“, jei norite žaisti su duomenų rinkiniu ir „React-vis“ biblioteka. Turite vizualizacijų, kurias atlikote naudodami „React-vis“? Atsiųskite man ekrano kopiją „Twitter“ @freethejazz.

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