Doplňky

Ukazatele nástrojů

Do jakéhokoli grafu nebo diagramu můžeme přidat popisky. Ty jsou užitečné zejména v případě velkého množství datových bodů (například v grafu rozptylu). I v případě menších datových sad pomáhají graf zpřehlednit a umožňují uživatelům soustředit se na celkové vzorce.

Jsou také užitečné ve složitých grafech, kde různé části grafu vyjadřují různé aspekty souboru dat, což nemusí být zřejmé uživatelům, kteří tento typ diagramu neznají. Například v tomto Sunburst diagramu mohou uživatelé myší přejíždět po segmentech, aby viděli jak základní datový bod, tak kontext tohoto datového bodu. V tomto případě diagram Sunburst rozděluje lékařské zákroky na typ, orgán, který je postižen, a stav pojištění pacienta. Tyto informace se zobrazují v dolní části displeje a mění se při přejetí myší nad jednotlivými segmenty.

Jednou z velkých předností systému D3 je jeho velká flexibilita. Tip nástroje může obsahovat jakákoli data, která jsou přítomna v datové sadě, kontextový text, nebo dokonce hodnoty ze zcela jiné datové sady. Například tento Sankey ukazuje uživatelům, že uzly představují celkový počet uprchlíků, zatímco čáry představují počet uprchlíků pohybujících se mezi jednotlivými místy původu (v tomto případě zemí) a určení (v tomto případě státem USA). Tento text může být v libovolném jazyce, což velmi pomáhá při lokalizaci.

Pokud jsou v zobrazení použity dvě nebo více datových sad, mohou nápovědy nástrojů zobrazit jejich srovnání. Mohou například zobrazovat jak letošní, tak loňské hodnoty nebo datové sady pro různé regiony. Naopak u jedné datové sady mohou být použity k zobrazení intervalů spolehlivosti, procentuálních hodnot nebo jiných statistických informací týkajících se datových bodů, což uživatelům pomáhá posoudit spolehlivost dat.

Další výhodou tipů nástrojů je, že jsou zábavné! Zvyšují interaktivitu tím, že umožňují uživatelům zapojit se do práce s grafem a prozkoumat data podle svých vlastních podmínek.

Přiblížení

Přiblížení umožňuje uživatelům přiblížit určité oblasti grafu nebo diagramu a podrobněji prozkoumat datové body a trendy. To je užitečné zejména u velkých souborů dat. Je také užitečné v případech, kdy se uživatelé zajímají o různé aspekty souboru dat: někteří uživatelé se například mohou chtít zaměřit na určité časové období.

Přiblížení také umožňuje uživatelům podrobně porovnávat různé části souboru dat. Data mohou interaktivně zkoumat přiblížením jedné oblasti a následným přesunem do jiné oblasti. To jim pomáhá lépe vidět korelace, odlehlé hodnoty a vzorce.

Další výhodou zoomů je, že umožňují uživatelům používat menší zařízení, jako jsou chytré telefony, aby si mohli prohlédnout celý soubor dat, a přesto si mohli prohlédnout potřebné detaily. Uživatelé chytrých telefonů jsou zvyklí zvětšovat zobrazení pomocí "gesta štípnutí".

Zvětšení také pomáhá zlepšit přístupnost pro osoby se zrakovými vadami.

Štětce

Kartáčování funguje podobně jako zvětšování, protože nabízí uživatelům možnost interakce s částí datového souboru. Místo zvětšení části grafu se však velikost této oblasti nemění. Rozšířená oblast může být označena jiným způsobem, například změnou barvy.

K filtrování dat lze použít štětec - uživatelé mohou například pohybem myši procházet podél osy x plošného grafu. Oblast, která byla vyčištěna štětcem, by se pak mohla zobrazit v jiné části displeje. Dalším způsobem použití štětce je přidání samostatného grafu zobrazujícího stejná data v jiném měřítku. V této situaci funguje štětec podobně jako zvětšení. Jeho použití však může být jednodušší, protože původní graf nemění své rozměry.

Animace

Animace pomáhají několika způsoby. Například v případě jednoduchého sloupcového grafu se sloupce mohou posouvat pomalu, místo aby se objevily okamžitě. K informačnímu obsahu grafu to přidává jen velmi málo, ale pro uživatele je to zajímavější.

Animace hrají vážnější roli, když se používají pro přechody. Například tento Sankeyho diagram zobrazuje data za několik let. Když uživatel přechází z jednoho roku do druhého pomocí posuvníku, mění se relativní velikosti uzlů. Ty se pohybují, protože jsou uspořádány v pořadí podle velikosti. Bez animace by změna byla trhavá a bylo by obtížné udržet "stálost objektu". Uživatele by například mohlo zajímat, jak se mění tok (v tomto případě uprchlíků) přicházejících z určité země v jednotlivých letech. Pokud by tento uzel přeskakoval bez plynulého přechodu, bylo by to obtížné.

Další příklad přechodu je zobrazen v tomto PieChart. Při přejetí myší se výseč mírně posune. Díky použití plynulého přechodu působí tento pohyb přirozeně a pomáhá zachovat metaforu koláče. Bez něj by tato část koláčového grafu přeskakovala z jedné pozice na druhou. Ze stejného důvodu fungují animace obzvlášť dobře při zobrazování časových řad dat, například hodnot na burzovním ukazateli. Výhodou je opět to, že oko snáze sleduje konkrétní hodnotu při její změně.

Pokud se k přechodu mezi sadami dat používá animace a tyto přechody jsou ovládány uživatelským rozhraním, například <TransLink>tento posuvník</TransLink>, může uživatel zkoumat hodnoty téměř jako na videozáznamu.

Barvy

Protože grafy a diagramy D3 jsou vytvářeny pomocí JavaScriptu, je možné nastavit barvy pomocí funkce. To znamená, že barvy lze používat způsoby, které nejsou možné v jiných knihovnách pro vizualizaci dat.

Nejzřetelnějším použitím barvy je odlišení různých datových sad - například tento Sloupcový graf obsahuje data pro více sad podobných dat. Použitím různých barev pro každou datovou sadu a vysvětlením významu těchto barev v legendě je možné kombinovat je dohromady v jednom grafu.

Barvu lze také použít k seskupení podobných sad hodnot. Například tento Sluneční diagram zobrazuje hierarchii dat. Každý kroužek představuje jinou úroveň v hierarchii. Pomocí barvy můžeme seskupit hodnoty, které patří do stejné úrovně, a vysvětlit je v legendě.

Další výhodou D3 je možnost měnit sytost barvy i její odstín. Například v tomto diagramu Sunburst (horní příklad) se sytost barvy v jednotlivých výsečích mění, zatímco všechny výseče ve stejném kruhu mají stejnou barvu. V tomto případě je intenzita jednoduše náhodná, aby se jednotlivé úseky lépe odlišily (srovnejte to s příkladem, ve kterém má každý úsek v kruhu stejný odstín i stejnou sytost). Sytost však může souviset i s podkladovým datovým bodem. V tomto případě je lepší, když nejsou úseky uspořádány podle velikosti, jinak by bylo příliš těžké rozlišit menší sektory.

Dalším příkladem použití barev pro zpřehlednění diagramu je tento Sankeyho diagram. V horních dvou příkladech jsou jednou barvou znázorněny výchozí uzly a jinou barvou cílové uzly. Hustota barvy navíc představuje velikost jednotlivých uzlů. Stejné barvy jsou použity i u spojovacích čar. Existuje tedy zřejmá vazba mezi hodnotami reprezentovanými uzly a hodnotami reprezentovanými spojovacími čarami. V posledních dvou příkladech jsou použity dvě barvy a základní hodnoty dat jsou reprezentovány relativními hodnotami těchto dvou barev. To může být někdy přehlednější, zejména pokud jsou rozdíly mezi hodnotami dat nepatrné.

A konečně, barva může být někdy použita pouze k oddělení částí diagramu, bez jakéhokoli základního významu. To je případ třetího příkladu diagramu Sunburst. Barvy jsou speciálně zvoleny tak, aby byly jasně viditelné hranice mezi sektory v Sunburstově diagramu. To je užitečné zejména tehdy, když jsou hodnoty malé a sektory velmi úzké.

Dalším způsobem, jak lze barvu použít, je odlišení určité sady datových bodů. To lze kombinovat se štětcem (viz výše). Pomocí štětce nad grafem mohou uživatelé filtrovat datové body. Filtrované hodnoty mohou být zobrazeny jinou barvou, která může být spojena se samostatnou legendou.

I bez štětce mohou být barvy užitečné pro zvýraznění konkrétních hodnot. Například pomocí D3.js můžeme odlehlé hodnoty označit specifickou barvou nebo použít různé barvy pro záporné a kladné hodnoty. Vizualizace dat jsou mnohem přehlednější, když se barvy používají inteligentně, zejména když je datových bodů hodně. Barevné kódování lze také použít k zobrazení celkové struktury vizualizace dat.

Při interakci mohou pomoci také barvy. Barva datového bodu, sloupce nebo čáry se může při najetí myší změnit a zdůraznit, že byl vybrán.

Datová mřížka

Data pro graf nebo tabulku D3js obvykle pocházejí z jednoho ze tří zdrojů. Pokud je nepravděpodobné, že se data budou často měnit, mohou být uložena v souboru JSON nebo CSV na serveru. Pokud data pocházejí z místní databáze, bude třeba tuto databázi přímo aktualizovat, a to buď pomocí vlastního rozhraní, nebo pomocí databázového nástroje, například DBeaver. To pro vás můžeme nastavit.

However, if data needs to be updated by somebody with no technical skills, the best option is for us to create a data grid for you. This looks and feels much like an Excel spreadsheet. It can either be on a page which is shielded from search engines or which is password-protected.

Variantou datové mřížky je formulář: funguje podobně jako kontaktní formulář na webových stránkách. To může být vhodnější v případě, že údaje musí zadávat pracovníci, kteří nejsou obeznámeni s datovou mřížkou.

Prvky uživatelského rozhraní

Přestože D3.js nabízí omezenou sadu nástrojů uživatelského rozhraní, je lepší je kódovat buď pomocí knihovny komponent, jako je MUI, nebo jako prosté HTML.

Nejužitečnějšími prvky uživatelského rozhraní jsou rádiová tlačítka a zaškrtávací políčka. Ty jsou někdy zaměňovány. Rádiová tlačítka, jako jsou ta zobrazená v tomto Stacked Bar Chart, umožňují uživatelům vybrat si mezi sadou vzájemně se vylučujících možností: v tomto případě si mohou vybrat jednu sadu dat, zobrazenou jako jednoduchý sloupcový graf, nebo více sad dat, zobrazených jako Stacked Bar Chart. Lze je však také použít ke změně způsobu zobrazení dat. V této Sunburst vizualizaci dat ovlivňují rádiová tlačítka způsob použití barev, aby vynikly různé aspekty datové sady.

Zaškrtávací políčka naproti tomu umožňují uživatelům vybrat libovolnou permutaci možností: v tomto případě se možnosti vzájemně nevylučují. V příkladu se zaškrtávacím polem Vizualizace dat v čárovém grafu může zobrazit pouze jednu datovou sadu, libovolné dvě datové sady nebo všechny tři. To je velmi užitečné, když uživatelé potřebují provést specifické porovnání dvojic datových sad: například mohou chtít porovnat hodnoty operací srdce a jater a pro lepší přehlednost odstranit hodnoty operací sleziny.

Dalším prvkem uživatelského rozhraní, který je užitečný pro vylepšení vizualizací dat D3.js, je přepínač. Používá se v případech, kdy se diagram může nacházet v jednom ze dvou stavů, nebo když chcete dát uživatelům možnost vypnout část vizualizace dat, abyste zvýšili její přehlednost. V tomto příkladu je přepínač použit k přepínání mezi čárovým a plošným grafem.

Nakonec lze použít posuvníky. Ty se osvědčují zejména tehdy, když vizualizace dat obsahuje soubory dat z různých časových období. Umožňují uživatelům intuitivní pohyb vpřed a vzad po časové ose, jako je tomu v této Vizualizaci dat společnosti Sankey.