Ten wykres liniowy pokazuje te same dane, co wykres słupkowy, ale używa kropek do oznaczania punktów danych i linii do ich łączenia. Przełącznik (utworzony w MUI) przełącza między prostym wykresem liniowym a wykresem obszarowym. Obie wizualizacje danych wykorzystują prawie ten sam kod D3.js.
Wykresy obszarowe działają lepiej jako wizualizacje danych, gdy istnieją pojedyncze zestawy danych: pomagają użytkownikom wyraźniej zobaczyć całkowitą wartość reprezentowaną przez punkty danych, ponieważ jest ona proporcjonalna do wielkości zacieniowanego obszaru. Jednakże, gdy istnieje wiele punktów danych, zacienione obszary mogą być mylące, ponieważ jeden obszar może przesłaniać obszary znajdujące się za nim. D3.js pozwala na pełną kontrolę nad tym: na przykład możemy zmniejszyć nieprzezroczystość niektórych lub wszystkich obszarów, a nawet zmniejszyć nieprzezroczystość tych obszarów, które nakładają się na te poniżej. Wykresy obszarowe mogą być również mylące, gdy pokazują wartości ujemne, chociaż D3.js zapewnia sposoby na obejście tego problemu, takie jak użycie różnych kolorów dla wartości dodatnich i ujemnych.
Podobnie jak w przykładzie Wykres słupkowy, możliwe jest użycie kontrolek interfejsu użytkownika, aby skupić się na określonym zestawie danych w wizualizacji danych i powiązać je z kodem D3.js. Jednak w tym przypadku używane są pola wyboru, a nie przyciski radiowe. W przypadku przycisków radiowych należy wybrać tylko jedną opcję; jednak w przypadku pól wyboru każde pole można zaznaczyć lub odznaczyć niezależnie od innych. Dzięki temu interfejsowi możliwe jest wybranie dowolnej permutacji zestawów danych: na przykład dowolnego pojedynczego narządu, dowolnych dwóch narządów lub wszystkich trzech narządów. Kodowanie tego jest nieco bardziej złożone, zwłaszcza gdy istnieje więcej niż niewielka liczba punktów danych.
D3.js pozwala nam również wybrać krzywą używaną do łączenia danych. Zazwyczaj wybralibyśmy najbardziej odpowiednią krzywą do wizualizacji danych i zakodowalibyśmy ją na stałe. Aby jednak zilustrować, co jest możliwe, dodaliśmy zestaw przycisków radiowych, aby użytkownicy mogli wybrać własne. Niektóre krzywe, takie jak Catmull-Rom, przechodzą przez wszystkie punkty danych, podczas gdy inne, takie jak Curve Basis, nie. Zaletą braku przechodzenia przez wszystkie punkty danych jest to, że można bardzo dobrze pokazać trendy w danych. I odwrotnie, krzywa Catmull-Rom obejmuje wszystkie rzeczywiste punkty danych, ale zawiera przeregulowania i niedomknięcia, co utrudnia dostrzeżenie trendów.
Koszt wykresu liniowego D3.js lub wykresu obszarowego zależy w dużej mierze od zakresu, w jakim musi on zostać zakodowany na zamówienie. Dodatki, takie jak podpowiedzi narzędzi, niestandardowe animacje itp. zwiększą nieco koszt, ale znacznie poprawią wrażenia użytkownika. Strona Ceny daje ogólny pogląd. Strona Ceny daje ogólny pogląd. Prosimy jednak o kontakt w celu przeprowadzenia bezpłatnej rozmowy z deweloperem, aby ustalić, co jest dla Ciebie najlepsze.