Wprowadzenie

DynamicD3 oferuje niestandardowe wizualizacje danych przy użyciu D3.js. Będziemy współpracować z Tobą, aby pomóc Ci wybrać najbardziej efektywny sposób wyświetlania danych: może to być Wykresy słupkowe, Wykresy liniowe, Wykresy kołowe, Wykresy Sankey lub bardziej egzotyczne wizualizacje danych, takie jak wykresy chloropletowe, wykresy bąbelkowe lub Wykresy słoneczne.

Wizualizacje danych D3.js mogą zawierać dużą liczbę dodatków, takich jak podpowiedzi narzędzi, powiększenia, najazdy myszą i animacje. Pomagają one użytkownikom w bardziej intuicyjnym zrozumieniu danych i zapewniają angażujące doświadczenie, które nie jest możliwe w przypadku statycznych wizualizacji danych. Możemy również tworzyć niestandardowe interfejsy użytkownika - za pomocą przycisków radiowych, pól wyboru, suwaków lub przełączników - które jeszcze bardziej rozszerzają zakres interaktywnych doświadczeń.

Dajemy ci albo zwykły JavaScript, który możesz wstawić bezpośrednio do swojej witryny, albo komponent React. Skonfigurujemy prostą darmową stronę internetową jako demo. Opcjonalnie możemy stworzyć siatkę danych, abyś mógł łatwo aktualizować swoje dane.

D3.js może wykorzystywać dane ze statycznego pliku JSON lub CSV, lub może pobierać dane z API. Możemy również utworzyć siatkę danych, aby można było łatwo aktualizować dane.

Wykresy słupkowe

Wykresy słupkowe są zwykle używane do danych kategorycznych, takich jak ten przykład porównujący liczbę operacji na trzech określonych narządach w dużym szpitalu.

Należy pamiętać, że wykres słupkowy to nie to samo co histogram, mimo że wyglądają podobnie. Histogram nie zawiera danych kategorycznych, takich jak kraje (w których punkt danych jednoznacznie należy do jednej lub drugiej kategorii). Pokazuje raczej dane, które tworzą kontinuum, ale są podzielone na różne zakresy, zwane przedziałami. Na przykład zestaw danych, w którym oś x pokazuje odległość od określonego punktu, można podzielić na zakresy. Zakresy te są jednak arbitralne i są zazwyczaj wybierane w celu wyraźnego wyświetlenia danych.

D3.js może być używany zarówno do wykresu słupkowego, jak i histogramu, a każdy z nich może reprezentować jeden lub wiele zestawów danych. Może być również używany do reprezentowania danych ciągłych. Jest to jednak bardziej odpowiednie do wyświetlania na wykresie liniowym lub wykresie rozproszonym.

Wykresy liniowe

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).

Wykresy liniowe są szczególnie przydatne do wyświetlania wielu zestawów danych, które są ze sobą w jakiś sposób powiązane. Te zestawy danych zazwyczaj wykorzystują tę samą oś x, ale mogą mieć różne skale i różne osie y. Są one szczególnie przydatne do obserwowania trendów w różnych zestawach danych (takich jak porównywanie, kiedy występuje szczyt zachorowań w różnych krajach). W tym przykładzie interfejs użytkownika służy do przełączania między różnymi kombinacjami zestawów danych. Zwróć uwagę, że D3.js może automatycznie dostosowywać skalę osi pionowej wraz ze zmianą danych.

Kolejną mocną stroną wykresów liniowych jest możliwość skutecznej analizy trendów. Można narysować krzywą, która przechodzi przez każdy punkt lub która pokazuje trendy krótko- lub długoterminowe. W powyższym przykładzie dodano interfejs użytkownika, dzięki czemu użytkownicy mogą eksplorować zestaw danych na różne sposoby przy użyciu różnych krzywych.

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

Wykresy kołowe

Na wykresie kołowym kąt każdego plasterka jest proporcjonalny do ilości, którą reprezentuje. Pie Charts i Donut Charts są takie same, z wyjątkiem tego, że Donut Charts mają otwór w środku, który może zawierać dane. Wykresy pączkowe mogą mieć wiele pierścieni pokazujących hierarchię wartości danych, jednak ten typ wykresu jest określany jako Sunburst diagram.

Wykresy kołowe są powszechnie stosowane w gazetach. Jednak, choć są one znane i łatwe do zrozumienia, nie są najlepszym sposobem na pokazanie danych proporcjonalnych lub kategorycznych, ponieważ trudno jest porównać różne wartości (w przeciwieństwie do wykresu słupkowego, gdzie można łatwo porównać wysokości prostokątów). Są one jednak przydatne, gdy dane stanowią część wartości całkowitej. Proporcje można również przedstawić za pomocą wykresów słupkowych, ale jest to mniej intuicyjnie oczywiste.

Metaforę tortu można rozszerzyć poprzez wyciągnięcie jednego kawałka tortu. Można to zrobić statycznie lub za pomocą efektu najechania myszą, jak pokazano na stronie Wykres kołowy. Jest to znane jako eksplodujący wykres kołowy. Bardziej szczegółowe informacje można znaleźć w sekcji eksplodowanej.

Schematy Sunburst

Wykresy Sunburst są formą wielopoziomowego wykresu kołowego. Są one czasami nazywane radialnymi mapami drzewa, ponieważ dane mają taką samą strukturę hierarchiczną jak konwencjonalna mapa drzewa.

Ten typ wizualizacji danych pokazuje hierarchię poprzez serię pierścieni, które są wycinane dla każdego węzła kategorii. Każdy pierścień odpowiada poziomowi w hierarchii, przy czym centralny okrąg reprezentuje węzeł główny, a hierarchia przesuwa się od niego na zewnątrz. Na przykład w tym przykładzie typy operacji są podzielone. Pierwszy pierścień dzieli operacje według narządu, którego dotyczą. Następny pierścień dzieli każdą z tych sekcji według rodzaju leczenia (zachowawcze, operacja, przeszczep lub leki), a następny pierścień pokazuje, czy pacjenci byli ubezpieczeni. Najechanie kursorem myszy powoduje wyświetlenie podstawowych wartości w dolnej części ekranu. Oznacza to, że użytkownicy mogą eksplorować dane, poruszając się po ekranie. Na przykład, mogą oni chcieć dowiedzieć się, jak różnił się odsetek pacjentów, u których zastosowano leczenie nerek, w zależności od ich ubezpieczenia.

Kolor może być używany do wyróżniania hierarchicznych grup lub określonych kategorii. W powyższym przykładzie użytkownik może zmienić schemat kolorów, aby podkreślić różne aspekty zestawu danych. W pierwszym przykładzie dla każdego pierścienia zastosowano różne zakresy kolorów. Ułatwia to zrozumienie danych wyświetlanych w każdym pierścieniu, a jednocześnie sprawia, że granice sekcji są wyraźne. Nie działa to jednak w przypadku dużych zestawów danych. W takim przypadku lepiej jest, jeśli wszystkie sekcje w danym pierścieniu mają ten sam odcień. Wreszcie, w niektórych przypadkach można użyć losowych kolorów. Utrudnia to zrozumienie znaczenia każdego poziomu w hierarchii, ale ułatwia dostrzeżenie różnych sektorów. Wyświetlacz interfejsu użytkownika w przykładzie Sunburst przełącza się między tymi alternatywami.

Schemat Sankeya

Diagramy Sankeya są używane do reprezentowania procesów przepływu, takich jak przepływ pieniędzy w organizacji (jak pokazano w sprawozdaniu finansowym), przepływ energii lub surowców przez szereg procesów przemysłowych lub przepływ bardziej abstrakcyjnego zasobu, takiego jak informacja. Wysokość lub szerokość każdego węzła reprezentuje całkowitą ilość przepływu przez ten węzeł, a grubość linii między każdą parą węzłów reprezentuje ilość przepływu przechodzącego między tymi węzłami. Kolor może być używany albo do pokazania ilości przepływu (na przykład przy użyciu gradientu kolorów), albo do pokazania innego aspektu procesu, jak w tym diagramie Sankeya, który wykorzystuje kolory do zilustrowania przepływu uchodźców.

Jednym z obszarów, w którym Sankeys są często wykorzystywane, jest sektor energetyczny. Na przykład, mogą one pokazywać źródło gazu ziemnego według kraju, środki, za pomocą których dociera on do miejsca przeznaczenia (rurociąg, statek itp.), a następnie sposób jego wykorzystania (użytkownicy końcowi). Wykresy takie jak ten są przydatne dla decydentów, ponieważ podkreślają obszary, w których można poprawić wydajność.

Diagramy Sankeya są szczególnie intuicyjnym sposobem pokazywania zmian w czasie. Na tym diagramie Sankeya przedstawiono przepływ uchodźców z różnych krajów pochodzenia do Stanów Zjednoczonych na przestrzeni czasu. Suwak pozwala użytkownikom poruszać się po osi czasu, a płynne przejścia ułatwiają śledzenie węzłów, gdy ich znaczenie rośnie lub spada.

Chloropleth

Choroplethy wykorzystują kolor, aby pokazać, jak zmienna zmienia się na obszarze geograficznym. Są one podobne do map cieplnych; jednak w przeciwieństwie do tych ostatnich, dzielą mapę na podjednostki geopolityczne, takie jak kraje, stany, prowincje lub hrabstwa.

Wartości używane w chloroplastyce muszą uwzględniać różne rozmiary obszarów. Na przykład istnieje ogromna różnica między rozmiarami różnych krajów, więc nie ma sensu kolorować krajów tylko na podstawie ich populacji. Zamiast tego dane te zostałyby "znormalizowane" w różnych regionach przy użyciu gęstości zaludnienia, a nie bezwzględnej liczby ludności. W przypadku obu typów wyświetlania ciemniejsze lub bardziej intensywne kolory zwykle reprezentują wyższe wartości, podczas gdy jaśniejsze lub jaśniejsze kolory wskazują niższe wartości.

Niestety, dane ze świata rzeczywistego nie są zazwyczaj podzielone na naturalne kategorie. Na przykład chloropleta, w której intensywność koloru była proporcjonalna do gęstości zaludnienia, może działać, gdy istnieje podobna różnica między gęstością zaludnienia różnych regionów (np. między różnymi hrabstwami w tym samym stanie USA). Często jednak dane zawierają wartości, które są o rzędy wielkości większe niż inne wartości w tym samym zestawie danych. Na szczęście D3.js posiada bogaty zestaw skal. W niektórych przypadkach bardziej odpowiednia może być skala logarytmiczna: dobrze pokazywałaby małe różnice, ale także pokazywałaby znacznie większe różnice. W innych przypadkach można użyć jednego koloru do pokazania wartości powyżej lub poniżej określonego progu. To właśnie ten wysoki poziom elastyczności sprawia, że D3.js jest tak potężnym narzędziem do tworzenia wizualizacji danych.

Oprócz pomocy w skalowaniu danych, D3.js pozwala nam korzystać z szerokiej gamy projekcji map: mają one duży wpływ na sposób postrzegania danych. Chloroplety tworzone przy użyciu innych bibliotek często wykorzystują standardowe projekcje, takie jak projekcja Mercatora, co może prowadzić do dużych zniekształceń w niektórych częściach świata. Jest to mniejszy problem, gdy mapa przedstawia mniejsze obszary, takie jak hrabstwa w Wielkiej Brytanii, lub gdy wszystkie wyświetlane obszary znajdują się na podobnej szerokości geograficznej.

Wreszcie, możliwe jest użycie dwóch oddzielnych (ale powiązanych) fragmentów danych, każdy z inną skalą kolorów. Jest to znane jako dwuwymiarowy Cloropleth.

Wykres bąbelkowy

Wykresy bąbelkowe przypominają wykresy punktowe z danymi zastąpionymi okręgami. Podczas gdy wykres punktowy może wykorzystywać tylko pozycję i kolor kropki do reprezentowania informacji, wykres bąbelkowy ma również wymiary poziome i pionowe. To sprawia, że wykresy bąbelkowe są szczególnie odpowiednie do wyświetlania wielowymiarowych relacji.

Jeśli tylko jedna dodatkowa informacja musi być wyświetlona dla każdego okręgu, może to być reprezentowane przez obszar okręgu. Może to być jednak problematyczne, ponieważ użytkownicy mają tendencję do oceniania względnych rozmiarów okręgów na podstawie ich średnicy, a nie powierzchni. Ważne jest, aby wyjaśnić to w legendzie.

Wykresy bąbelkowe działają gorzej, gdy istnieje wiele punktów danych i gdy istnieje duży zakres danych. Gdy jest zbyt wiele punktów danych, wyświetlacz może wyglądać na zatłoczony, a bąbelki mogą się nakładać. W przypadku dużego zakresu wartości w zestawie danych mniejsze bąbelki mogą nie być wyraźnie widoczne. Problemy te można do pewnego stopnia przezwyciężyć, używając interakcji myszy, aby uzyskać więcej informacji, takich jak dokładna wartość bazowego punktu danych.

Ostatnią kwestią związaną z wykresami bąbelkowymi jest iluzja średniej ważonej: rozmiary bąbelków wpływają na postrzeganie wartości x i y punktu danych. To zniekształcenie musi być brane pod uwagę przy szacowaniu średnich wartości x i y.

Wykresy bąbelkowe, które muszą pokazywać wartości ujemne, można tworzyć za pomocą symbolu w środku bąbelków reprezentujących wartości ujemne, różnych kolorów dla wartości dodatnich i ujemnych, a nawet różnych kształtów. Dzięki D3.js ten poziom elastyczności jest możliwy, ale nie jest tak w przypadku większości bibliotek do wizualizacji danych.