Tento čárový graf zobrazuje stejná data jako Stacked Bar Chart, ale k označení datových bodů používá tečky a k jejich propojení čáry. Přepínač (vytvořený v MUI) přepíná mezi jednoduchým čárovým grafem a plošným grafem. Obě vizualizace dat používají téměř stejný kód D3.js.
Plošné grafy fungují lépe jako vizualizace dat, pokud se jedná o jednotlivé datové soubory: pomáhají uživatelům jasněji vidět celkovou hodnotu reprezentovanou datovými body, protože ta je úměrná velikosti stínované oblasti. Pokud však existuje více datových bodů, mohou být stínované oblasti matoucí, protože jedna oblast může zakrývat oblasti za ní. D3.js nad tím umožňuje naprostou kontrolu: můžeme například snížit neprůhlednost některých nebo všech oblastí, nebo dokonce snížit neprůhlednost těch oblastí, které překrývají oblasti pod nimi. Plošné grafy mohou být také matoucí, pokud zobrazují záporné hodnoty, ačkoli D3.js nabízí způsoby, jak tento problém obejít, například pomocí různých barev pro kladné a záporné hodnoty.
Stejně jako v příkladu Sloupcový graf je možné použít ovládací prvky uživatelského rozhraní pro zaměření na konkrétní sadu dat v rámci vizualizace dat a propojit je s kódem D3.js. V tomto případě jsou však použita zaškrtávací políčka namísto přepínačů. U rádiových tlačítek je třeba vybrat pouze jednu možnost; u zaškrtávacích políček však lze každé políčko vybrat nebo zrušit výběr nezávisle na ostatních. Pomocí tohoto uživatelského rozhraní je tedy možné vybrat libovolnou permutaci datových sad: například libovolný jeden orgán, libovolné dva orgány nebo všechny tři orgány. Kódování pro tento účel je poněkud složitější, zejména pokud existuje více než malý počet datových bodů.
D3.js nám také umožňuje vybrat křivku použitou k propojení dat. Obvykle bychom vybrali nejvhodnější křivku pro vizualizaci dat a tu bychom natvrdo nakódovali. Abychom však ilustrovali, co je možné, přidali jsme sadu přepínačů, aby si uživatelé mohli vybrat vlastní. Některé křivky, například Catmull-Rom, procházejí všemi datovými body, zatímco jiné, například křivka Basis, nikoli. Výhodou toho, že neprochází všemi datovými body, je, že je možné velmi dobře zobrazit trendy v datech. Naopak Catmull-Romova křivka zahrnuje všechny skutečné datové body, ale zahrnuje překračování a nedosahování, což ztěžuje zobrazení trendů.
Cena čárového nebo plošného grafu D3.js závisí do značné míry na tom, do jaké míry je třeba jej nakódovat na míru. Doplňky, jako jsou tipy nástrojů, vlastní animace a podobně, sice trochu zvýší náklady, ale výrazně zlepší uživatelský zážitek. Obecnou představu vám poskytne stránka Ceny. Stránka Ceny vám poskytne obecnou představu. Kontaktujte nás však, abychom s vámi mohli bezplatně probrat, co je pro vás nejlepší.