Úvod

DynamicD3 nabízí vlastní vizualizace dat pomocí D3.js. Ve spolupráci s vámi pomůžeme vybrat nejefektivnější způsob zobrazení vašich dat: může jít o sloupcové grafy, čárové grafy, piškotové grafy, sankeyho diagramy nebo exotičtější vizualizace dat, jako jsou chloroplety, bublinové grafy nebo sluneční diagramy.

Vizualizace dat v D3.js mohou obsahovat velké množství doplňků, jako jsou náhledy nástrojů, zvětšení, přejetí myší a animace. Ty pomáhají uživatelům intuitivněji porozumět datům a poskytují poutavý zážitek, což u statických vizualizací dat není možné. Můžeme také vytvořit vlastní uživatelské rozhraní - pomocí radiových tlačítek, zaškrtávacích políček, posuvníků nebo přepínačů - které ještě více rozšiřují škálu interaktivních zážitků.

Nabízíme vám buď prostý JavaScript, který můžete vložit přímo do svých webových stránek, nebo komponentu React. Jako ukázku vytvoříme jednoduchou webovou stránku zdarma. Volitelně můžeme vytvořit datovou mřížku, abyste mohli data snadno aktualizovat.

D3.js může používat data ze statického souboru JSON nebo CSV nebo může přebírat data z rozhraní API. Můžeme také vytvořit datovou mřížku, abyste mohli data snadno aktualizovat.

Sloupcové grafy

Sloupcové grafy se obvykle používají pro kategoriální data, jako je tento příklad porovnávající počet operací tří konkrétních orgánů ve velké nemocnici.

Všimněte si, že sloupcový graf není totéž co histogram, i když vypadají podobně. Histogram neobsahuje kategoriální data, jako jsou například země (v nichž je datový bod jednoznačně zařazen do jedné nebo druhé kategorie). Spíše zobrazuje data, která tvoří kontinuum, ale která jsou rozdělena do různých rozsahů, tzv. binů. Například soubor dat, v němž osa x ukazuje vzdálenost od určitého bodu, by mohl být rozdělen do intervalů. Tyto rozsahy jsou však libovolné a obvykle se volí tak, aby data byla zobrazena přehledně.

D3.js lze použít buď pro sloupcový graf, nebo pro histogram, přičemž oba mohou reprezentovat jednu nebo více sad dat. Lze jej také použít k zobrazení spojitých dat. Ta je však vhodnější zobrazit v čárovém grafu nebo grafu rozptylu.

Čárové grafy

Line Charts and Area Charts displays data points over a continuous interval or time period. Depending on the curve used to connect the lines it shows trends and patterns over time. The horizontal, or x-axis represents the independent variable (often time), while the vertical axis represents the dependent variable (the value which has been measured). If the horizontal axis represents time this can be labelled using standard units of time and date, such as seconds, minutes, months and years. D3.js is extremely flexible in this regard. Date and time labels can be localized (for example, by using words in another language to represent the months).

Čárové grafy jsou užitečné zejména pro zobrazení více datových souborů, které spolu nějakým způsobem souvisejí. Tyto datové sady obvykle používají stejnou osu x, ale mohou mít různá měřítka a různé osy y. Jsou obzvláště užitečné pro sledování trendů v různých souborech dat (např. porovnání, kdy je v různých zemích vrchol nemocnosti). V tomto příkladu je použito uživatelské rozhraní pro přepínání mezi různými kombinacemi datových sad. Všimněte si, že D3.js dokáže automaticky upravovat měřítko svislé osy podle toho, jak se mění data.

Další silnou stránkou čárových grafů je schopnost efektivně analyzovat trendy. Lze nakreslit křivku, která prochází každým bodem nebo která ukazuje krátkodobé či dlouhodobé trendy. Ve výše odkazovaném příkladu bylo přidáno uživatelské rozhraní, takže uživatelé mohou zkoumat soubor dat různými způsoby pomocí různých křivek.

A variation on the line chart is the area chart, in which the area under the line is shaded. This is also shown in the example on the Line Chart page

Koláčové grafy

V koláčovém grafu je úhel každého dílku úměrný množství, které představuje. Koláčové grafy a koblihové grafy jsou stejné, s tím rozdílem, že koblihové grafy mají uprostřed otvor, který může obsahovat data. Donutové diagramy mohou mít více prstenců zobrazujících hierarchii datových hodnot; tento typ diagramu se však označuje jako Sunburst diagram.

Koláčové grafy se běžně používají v novinách. Přestože jsou známé a snadno pochopitelné, nejsou nejlepším způsobem zobrazení proporcionálních nebo kategoriálních dat, protože je obtížné porovnávat různé hodnoty (na rozdíl od sloupcového grafu, kde lze snadno porovnávat výšky obdélníků. Jsou však užitečné, pokud data představují podíl celkové hodnoty. Poměry lze zobrazit také pomocí sloupcových grafů, ale to je méně intuitivně zřejmé.

Metaforu koláče můžeme rozšířit tak, že z něj vytáhneme jeden kousek. To lze provést staticky nebo pomocí efektu najetí myší, jak je znázorněno na stránce Pie Chart. Tomuto postupu se říká rozbalený koláčový graf. Podrobnější informace lze uvést u explodované části.

Sunburst Diagramy

Grafy Sunburst jsou formou víceúrovňového koláčového grafu. Někdy se jim říká radiální stromové mapy, protože data mají stejnou hierarchickou strukturu jako běžná stromová mapa.

Tento typ vizualizace dat zobrazuje hierarchii prostřednictvím řady kroužků, které jsou rozřezány pro každý uzel kategorie. Každý kruh odpovídá jedné úrovni v hierarchii, přičemž centrální kruh představuje kořenový uzel a hierarchie se od něj posouvá směrem ven. Například v tomto příkladu jsou rozděleny typy operací. První kruh rozděluje operace podle orgánu, který je jimi zasažen. Další kruh rozděluje jednotlivé části podle typu léčby (konzervativní, operace, transplantace nebo léky) a další kruh ukazuje, zda pacienti byli či nebyli pojištěni. Po najetí myší se zobrazí základní hodnoty na displeji v dolní části. To znamená, že uživatelé mohou data zkoumat pohybem po displeji. Mohou například chtít zjistit, jak se liší podíl pacientů, kteří podstoupili léčbu ledvin, v závislosti na jejich pojištění.

Barvu lze použít ke zvýraznění hierarchických skupin nebo konkrétních kategorií. Ve výše uvedeném příkladu může uživatel změnit barevné schéma, aby zdůraznil různé aspekty souboru dat. V prvním příkladu jsou pro každý kroužek použity různé rozsahy barev. To usnadňuje pochopení dat zobrazených v jednotlivých kroužcích a zároveň zřetelně ukazuje hranice oddílů. Tento postup však nefunguje u velkých souborů dat. V takovém případě je přehlednější, když mají všechny úseky v určitém prstenci stejný odstín. A konečně, v některých případech lze použít náhodné barvy. Ty znesnadňují pochopení významu jednotlivých úrovní v hierarchii, ale usnadňují přehled o různých sektorech. Zobrazení uživatelského rozhraní v příkladu Sunburst přepíná mezi těmito alternativami.

Sankeyho diagram

Sankeyho diagramy se používají k znázornění tokových procesů, jako je tok peněz v rámci organizace (jak je znázorněn ve finančním výkazu), tok energie nebo surovin prostřednictvím řady průmyslových procesů nebo tok abstraktnějších aktiv, jako jsou informace. Výška nebo šířka každého uzlu představuje celkové množství toku procházejícího daným uzlem a tloušťka čar mezi jednotlivými dvojicemi uzlů představuje množství toku procházejícího mezi těmito uzly. Barva může být použita buď k zobrazení množství toku (například pomocí barevného gradientu), nebo k zobrazení jiného aspektu procesu, jako je tomu v tomto Sankeyho diagramu, který používá barvy k znázornění toku uprchlíků.

Jednou z oblastí, kde se Sankeys často používají, je energetika. Mohou například ukazovat zdroj zemního plynu podle zemí, způsob, jakým se dostává na místo určení (plynovod, loď atd.), a pak způsob jeho využití (koncoví uživatelé). Takovéto diagramy jsou užitečné pro tvůrce politik, protože upozorňují na oblasti, kde lze zlepšit účinnost.

Sankeyho diagramy jsou obzvláště intuitivním způsobem zobrazení změn v čase. Na tomto Sankeyho diagramu je znázorněn tok uprchlíků z různých zemí původu do Spojených států v určitém časovém období. Posuvník umožňuje uživatelům pohybovat se po časové ose a plynulé přechody usnadňují sledování uzlů, jejichž význam roste nebo klesá.

Chloroplet

Choroplethy využívají barvy k zobrazení toho, jak se proměnná v zeměpisné oblasti mění. Jsou podobné tepelným mapám; na rozdíl od nich však rozdělují mapu na geopolitické podjednotky, jako jsou země, státy, provincie nebo kraje.

Hodnoty použité v chloropletech musí zohledňovat různou velikost oblastí. Například mezi velikostí různých zemí je obrovský rozdíl, takže nemá smysl vybarvovat země pouze na základě jejich počtu obyvatel. Místo toho by se tyto údaje "normalizovaly" napříč regiony pomocí hustoty obyvatelstva, nikoliv absolutního počtu obyvatel. U obou typů zobrazení tmavší nebo intenzivnější barvy obvykle představují vyšší hodnoty, zatímco světlejší nebo bledší barvy označují nižší hodnoty.

Bohužel data z reálného světa nejsou obvykle rozdělena do přirozených kategorií. Například chloropleth, v němž by intenzita barvy byla úměrná hustotě obyvatelstva, by mohl fungovat, pokud by existoval podobný rozdíl mezi hustotou obyvatelstva v různých regionech (například mezi různými okresy ve stejném státě USA). Často však data obsahují hodnoty, které jsou řádově vyšší než jiné hodnoty ve stejném souboru dat. Naštěstí má D3.js bohatou sadu měřítek. V některých případech může být vhodnější logaritmické měřítko: to by dobře zobrazilo malé rozdíly, ale také mnohem větší rozdíly. V jiných případech by bylo možné použít jednu barvu pro zobrazení hodnot nad nebo pod určitou prahovou hodnotou. Právě díky této vysoké flexibilitě je D3.js tak mocným nástrojem pro vytváření vizualizací dat.

Kromě toho, že nám D3.js pomáhá měnit měřítko dat, umožňuje nám používat širokou škálu mapových projekcí: ty mají zásadní vliv na způsob, jakým jsou data vnímána. Chloroplety vytvořené pomocí jiných knihoven často používají standardní projekce, jako je Mercatorova projekce, což může v některých částech světa vést k velkým zkreslením. To je menší problém tam, kde mapa zobrazuje menší oblasti, například hrabství ve Velké Británii, nebo kde jsou všechny zobrazené oblasti na podobné zeměpisné šířce.

Nakonec je možné použít dva samostatné (ale související) údaje, každý s jinou barevnou škálou. To je známé jako dvourozměrný kloropleth.

Bublinový graf

Bublinové grafy jsou jako grafy rozptylu s daty nahrazenými kružnicemi. Zatímco v rozptylovém grafu lze k vyjádření informace použít pouze polohu a barvu bodu, bublinový graf má také horizontální a vertikální rozměry. Díky tomu jsou bublinové grafy obzvláště vhodné pro zobrazení vícerozměrných vztahů.

Pokud je třeba zobrazit pouze jednu další informaci pro každý kruh, lze ji znázornit plochou kruhu. To však může být problematické, protože uživatelé mají tendenci posuzovat relativní velikosti kruhů spíše na základě jejich průměru než plochy. Je důležité, aby to bylo v legendě jasně uvedeno.

Bublinové grafy fungují hůře, pokud je datových bodů hodně a pokud je velký rozsah dat. Když je datových bodů příliš mnoho, může zobrazení vypadat přeplněně a bubliny se mohou překrývat. Když je v souboru dat velký rozsah hodnot, menší bubliny nemusí být dobře viditelné. Tyto problémy lze do jisté míry překonat použitím interakce s myší, která poskytne více informací, například přesnou hodnotu základního datového bodu.

Posledním problémem bublinových grafů je iluze váženého průměru: velikost bublin ovlivňuje vnímání hodnot x a y datového bodu. Toto zkreslení je třeba vzít v úvahu při odhadu průměrných hodnot x a y.

Bublinové grafy, které mají zobrazovat záporné hodnoty, lze vytvořit buď pomocí symbolu uprostřed bublin představujících záporné hodnoty, různých barev pro kladné a záporné hodnoty, nebo dokonce různých tvarů. S D3.js je tato úroveň flexibility možná, což však není případ většiny knihoven pro vizualizaci dat.