Programovanie

Výukový program pre JavaScript: Jednoduchá vizualizácia údajov pomocou aplikácie React-vis

Vizualizácia údajov je dôležitou súčasťou rozprávania príbehov, ale s burzou D3.js sa môžete stratiť v burine celé hodiny, aby ste vytvorili niekoľko jednoduchých máp. Ak sú grafy všetko, čo potrebujete, existuje veľa knižníc, ktoré obsahujú D3 a poskytujú vám pohodlné spôsoby vytvárania jednoduchých vizualizácií. Tento týždeň sa začneme zaoberať knižnicou grafov React-vis, ktorú Uber vytvoril a otvorene získava.

React a d3.js majú zaujímavý vzťah. React je o deklaratívnom vykreslení komponentov a D3.js je o imperatívnej manipulácii s prvkami DOM. Ich spoločné použitie je možné pomocou refs, ale je oveľa príjemnejšie zapuzdriť všetok manipulačný kód do samostatného komponentu, takže nemusíte toľko prepínať kontexty. Knižnica React-vis to už našťastie robí pre nás s hromadou skladateľných komponentov, ktoré môžeme použiť na zostavenie našich vizualizácií.

Najlepším spôsobom, ako otestovať knižnice na vizualizáciu údajov, alebo skutočne ľubovoľnú knižnicu, je vytvoriť niečo takého. Urobme to pomocou súboru údajov Populárnych detských mien mesta New York.

Príprava údajov pre React-vis

Na začiatok som zaviedol bootovací projekt React create-react-app a pridal niekoľko závislostí: reagovať-vis, d3-načítať - pomôcť pri načítaní údajov CSV a - okamih pomôcť s formátovaním dátumu. Tiež som dal dohromady trochu štandardného kódu, aby som vtiahol a analyzoval CSV, ktorý obsahuje populárne mená pomocou d3-aport. Vo formáte JSON má načítaná sada údajov asi 11 000 riadkov a každá položka vyzerá takto:

{

"Rok narodenia": "2016",

"Pohlavie žena",

"Ethnicity": "ASIAN AND PACIFIC ISLANDER",

"Meno dieťaťa": "Olivia",

"Count": "172",

"Rank": "1"

}

Pretože medzery v klávesoch a čísla reprezentované ako reťazce by robili tieto dáta nepohodlnými pri práci, upravíme ich v čase načítania, aby sme vykonali nejaké masírovanie. Tento kód jednoducho používa znak dsv metóda z d3-aport:

importovať {dsv} z 'd3-fetch';

importovať okamih od „okamihu“;

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

návrat {

yearOfBirth: + d ['Year of Birth'],

pohlavie: d ['Pohlavie'],

etnická príslušnosť: d ['etnická príslušnosť'],

meno: d ['Krstné meno dieťaťa'],

count: + d ['Count'],

hodnotenie: + d ['hodnotenie'],

  };

});

Teraz sú naše vstupné údaje oveľa priateľskejšie. Vyzerá to takto:

{

"yearOfBirth": 2016,

"pohlavie žena",

"ethnicity": "ASIAN AND PACIFIC ISLANDER",

"firstName": "Olivia",

"count": 172,

„poradie“: 1

}

Náš prvý plán s React-vis

Prvý komponent, ktorý pravdepodobne použijete, je nejaká forma súboru XYPlot, ktorý obsahuje ďalšie komponenty a je prítomný takmer v každom zostavenom grafe. Väčšinou ide iba o obal, ktorý definuje veľkosť vizualizácie, ale môže obsahovať niektoré vlastnosti, ktoré sa odovzdajú aj deťom. Sama o sebe XYPlot nevykresľuje nič iné ako nejaké prázdne miesto:

<>

šírka = {300}

výška = {300}

Aby sme skutočne zobrazili údaje, budeme musieť použiť niekoľko rád. Séria je komponent, ktorý v skutočnosti čerpá údaje, napríklad vertikálny stĺpcový graf (VerticalBarSeries) alebo spojnicový graf (LineSeries). Máme k dispozícii 14 sérií po vybalení z krabice, ale začneme jednoduchou VerticalBarSeries. Každá séria dedí zo základnej množiny atribútov. Najužitočnejším pre nás bude údaje atribút:

<>

šírka = {300}

výška = {300}

data = {data}

  />

To sa však nepodarí, pretože React-vis očakáva, že prvky v dátovom poli budú v nasledujúcom tvare:

{

x: 2016, // Bude to namapované na os x

y: 4 // Bude to namapované na os y

}

Napríklad, aby sme zobrazili celkový počet detí spočítaných v množine údajov podľa rokov, budeme musieť tieto údaje spracovať, aby sme pre každý rok dostali jeden objekt, kde X atribút je rok a r atribút je celkový počet detí v súbore údajov. Kód, ktorý som k tomu napísal, je dosť strohý:

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

if (row.yearOfBirth in acc) {

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

} else {

acc [row.yearOfBirth] = row.count

  }

návrat podľa;

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

Keď ho zapojíte do VerticalBarSeries, máme nejaké výsledky!

Samotné to nie je zvlášť užitočné, ale našťastie knižnica React-vis poskytuje niektoré ďalšie komponenty, ktoré možno použiť na kontextualizáciu informácií. Poďme na import XAxis a YAxis aby sme mohli v našom grafe zobraziť viac informácií. Tieto komponenty vykreslíme vo vnútri XYPlot popri našom VerticalBarSeries. Kód a výsledky vyzerajú takto:

<>

šírka = {600}

výška = {600}

data = {totalBabiesByYear}

  />

Naše štítky na osi y sú orezané a naše štítky na osi x sú formátované ako čísla, ale robíme pokrok. Ak chcete, aby sa s osou x zaobchádzalo ako s diskrétnymi radovými hodnotami na rozdiel od spojitého číselného rozsahu, pridáme xType = "ordinal" ako nehnuteľnosť na XYPlot. Keď už sme pri tom, môžeme do grafu pridať trochu ľavého okraja, aby sme videli viac štítkov na osi y:

<>

šírka = {600}

výška = {600}

marža = {{

vľavo: 70

  }}

xType = "ordinal"

Podnikáme! Náš graf už vyzerá skvele - a väčšina práce, ktorú sme museli urobiť, sa týkala masírovania údajov, nie ich skutočného vykreslenia.

Budúci týždeň budeme pokračovať v skúmaní komponentov knižnice React-vis a definujeme niekoľko základných interakcií. Ak sa chcete pohrať s množinou údajov a knižnicou React-vis, pozrite si tento projekt na GitHub. Máte nejaké vizualizácie, ktoré ste vytvorili pomocou aplikácie React-vis? Pošlite mi snímku obrazovky na Twitteri @freethejazz.

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