Vizualizace dat je důležitou součástí vyprávění příběhů, ale můžete se ztratit v plevelech s D3.js celé hodiny, abyste vytvořili několik jednoduchých grafů. Pokud jsou grafy vše, co potřebujete, existuje spousta knihoven, které zabalí D3 a poskytnou vám pohodlné způsoby vytváření jednoduchých vizualizací. Tento týden se začneme zabývat knihovnou grafů React-vis, kterou Uber vytvořil a otevřeně získává.
React a d3.js mají zajímavý vztah. React je o deklarativním vykreslování komponent a D3.js je o imperativně manipulaci s prvky DOM. Společné použití je možné pomocí refs, ale je mnohem hezčí zapouzdřit veškerý manipulační kód do samostatné komponenty, takže nemusíte tolik přepínat kontexty. Naštěstí to knihovna React-vis již dělá pro nás s hromadou složitelných komponent, které můžeme použít k sestavení našich vizualizací.
Nejlepší způsob, jak otestovat knihovny vizualizace dat nebo jakoukoli jinou knihovnu, je něco s tím vytvořit. Udělejme to pomocí datové sady Populární dětská jména města New York.
Příprava dat pro React-vis
Nejprve jsem spustil projekt React s vytvořit-reagovat-aplikaci a přidal několik závislostí: reagovat-vis, d3-načíst pomoci získat data CSV a okamžik pomoci s formátováním data. Také jsem dal dohromady trochu standardizovaného kódu, abych vytáhl a analyzoval CSV, který obsahuje populární jména pomocí d3-načíst. Ve formátu JSON má datová sada, kterou stahujeme, přibližně 11 000 řádků a každá položka vypadá takto:
{ "Year of Birth": "2016",
"Pohlaví Žena",
"Ethnicity": "ASIAN AND PACIFIC ISLANDER",
"Křestní jméno dítěte": "Olivia",
"Count": "172",
"Rank": "1"
}
Vzhledem k tomu, že mezery v klávesách a čísla představovaná jako řetězce by práci s těmito daty znepříjemňovaly, upravíme je v době načítání, abychom provedli nějaké masáže. Tento kód jednoduše používá dsv metoda od d3-načíst:
importovat {dsv} z 'd3-fetch';importovat okamžik od „okamžiku“;
dsv (",", dataUrl, (d) => {
vrátit se {
yearOfBirth: + d ['Year of Birth'],
pohlaví: d ['Pohlaví'],
etnický původ: d ['Ethnicity'],
křestní jméno: d ['křestní jméno dítěte'],
count: + d ['Count'],
hodnocení: + d ['Hodnocení'],
};
});
Nyní jsou naše vstupní data mnohem přátelštější. Vypadá to takto:
{ "yearOfBirth": 2016,
"Pohlaví Žena",
"ethnicity": "ASIAN AND PACIFIC ISLANDER",
"firstName": "Olivia",
"count": 172,
"rank": 1
}
Náš první plán s React-vis
První komponenta, kterou pravděpodobně používáte, je nějaká forma XYPlot, který obsahuje další komponenty a je přítomen téměř v každém grafu, který vytváříte. Jedná se většinou jen o obálku, která definuje velikost vizualizace, ale může obsahovat některé vlastnosti, které se předávají také dětem. Sám o sobě, XYPlot nevykreslí nic jiného než prázdné místo:
<>šířka = {300}
výška = {300}
>
Abychom skutečně zobrazili data, budeme muset použít řadu nějakého druhu. Řada je komponenta, která ve skutečnosti kreslí data, například svislý sloupcový graf (VerticalBarSeries) nebo spojnicový graf (LineSeries). Máme k dispozici 14 sérií po vybalení z krabice, ale začneme jednoduchou VerticalBarSeries. Každá řada dědí ze základní sady atributů. Nejužitečnější pro nás bude data atribut:
<>šířka = {300}
výška = {300}
>
data = {data}
/>
To se ale nezdaří, protože React-vis očekává, že prvky v datovém poli budou v následujícím tvaru:
{ x: 2016, // Toto bude mapováno na osu x
y: 4 // Toto bude mapováno na osu y
}
Chcete-li například zobrazit celkový počet dětí počítaných v datové sadě podle roku, budeme muset data zpracovat, abychom pro každý rok získali jeden objekt, kde X atribut je rok a y Atribut je celkový počet dětí v datové sadě. Kód, který jsem k tomu napsal, je celkem strohý:
const totalBabiesByYear = Object.entries (data.reduce ((acc, řádek) => { if (row.yearOfBirth in acc) {
acc [row.yearOfBirth] = acc [row.yearOfBirth] + row.count
} else {
acc [row.yearOfBirth] = row.count
}
návrat podle;
}, {})). map (([k, v]) => ({x: + k, y: v}));
Když jej zapojíte do VerticalBarSeries, máme nějaké výsledky!
To samo o sobě není nijak zvlášť užitečné, ale naštěstí knihovna React-vis poskytuje některé další komponenty, které lze použít pro kontextualizaci informací. Pojďme importovat XAxis a YAxis abychom mohli v našem grafu zobrazit více informací. Tyto komponenty vykreslíme uvnitř XYPlot vedle našeho VerticalBarSeries. Kód a výsledky vypadají takto:
<>šířka = {600}
výška = {600}
>
data = {totalBabiesByYear}
/>
Naše štítky osy y jsou oříznuty a štítky osy x jsou formátovány jako čísla, ale děláme pokrok. Aby byla osa x považována za diskrétní pořadové hodnoty na rozdíl od spojitého číselného rozsahu, přidáme xType = "ordinal" jako nemovitost na XYPlot. Když už jsme u toho, můžeme do grafu přidat nějaký levý okraj, abychom viděli více štítků na ose y:
<>šířka = {600}
výška = {600}
marže = {{
vlevo: 70
}}
xType = "ordinal"
>
Jsme v podnikání! Náš graf již vypadá skvěle - a většina práce, kterou jsme museli udělat, se týkala masírování dat, nikoli jejich skutečného vykreslení.
Příští týden budeme pokračovat ve zkoumání komponent knihovny React-vis a definujeme některé základní interakce. Podívejte se na tento projekt na GitHubu, pokud si chcete pohrát s datovou sadou a knihovnou React-vis. Máte nějaké vizualizace, které jste vytvořili pomocí React-vis? Zašlete mi snímek obrazovky na Twitteru @freethejazz.
