Dodatki

Podpowiedzi

Do każdego wykresu możemy dodać podpowiedzi. Są one szczególnie pomocne, gdy istnieje wiele punktów danych (na przykład na wykresie punktowym). Nawet w przypadku mniejszych zestawów danych pomagają one uporządkować wykres, pozwalając użytkownikom skupić się na ogólnych wzorcach.

Są one również przydatne w złożonych wykresach, gdzie różne części wykresu przekazują różne aspekty zestawu danych, co może nie być oczywiste dla użytkowników, którzy nie są zaznajomieni z tego typu wykresami. Na przykład na tym wykresie Sunburst użytkownicy mogą przesuwać kursor myszy nad segmentami, aby zobaczyć zarówno podstawowy punkt danych, jak i kontekst tego punktu danych. W tym przypadku diagram Sunburst dzieli zabiegi medyczne na typ, narząd, którego dotyczą i status ubezpieczenia pacjenta. Informacje te są wyświetlane w dolnej części ekranu i zmieniają się, gdy użytkownik przesuwa kursor myszy nad każdym segmentem.

Jedną z ogromnych zalet D3 jest to, że oferuje on dużą elastyczność. Podpowiedź może zawierać dowolne dane obecne w zestawie danych, tekst kontekstowy, a nawet wartości z zupełnie innego zestawu danych. Na przykład ten Sankey pokazuje użytkownikom, że węzły reprezentują całkowitą liczbę uchodźców, podczas gdy linie reprezentują liczbę uchodźców przemieszczających się między każdym miejscem pochodzenia (w tym przypadku krajem) a miejscem docelowym (w tym przypadku stanem USA). Tekst może być w dowolnym języku, co bardzo pomaga w lokalizacji.

Gdy w wyświetlaniu używane są dwa lub więcej zestawów danych, podpowiedzi mogą pokazywać porównania między nimi. Na przykład mogą pokazywać zarówno wartość tegoroczną, jak i zeszłoroczną lub zestawy danych dla różnych regionów. I odwrotnie, w przypadku pojedynczego zestawu danych mogą być używane do wyświetlania przedziałów ufności, wartości procentowych lub innych informacji statystycznych związanych z punktami danych, pomagając użytkownikom ocenić wiarygodność danych.

Kolejną zaletą podpowiedzi jest to, że są zabawne! Zwiększają one interaktywność, pozwalając użytkownikom angażować się w wykres, eksplorując dane na własnych warunkach.

Powiększenia

Powiększenia pozwalają użytkownikom na powiększanie określonych obszarów wykresu lub diagramu w celu dokładniejszego zbadania punktów danych i trendów. Jest to szczególnie pomocne w przypadku dużych zestawów danych. Jest to również przydatne, gdy użytkownicy są zainteresowani różnymi aspektami zestawu danych: na przykład niektórzy użytkownicy mogą chcieć skupić się na określonym okresie czasu.

Powiększenia umożliwiają również użytkownikom dokonywanie szczegółowych porównań między różnymi częściami zestawu danych. Mogą oni eksplorować dane interaktywnie, powiększając jeden obszar, a następnie przechodząc do innego. Pomaga im to wyraźniej dostrzec korelacje, wartości odstające i wzorce.

Kolejną zaletą powiększeń jest to, że umożliwiają one użytkownikom korzystanie z mniejszych urządzeń, takich jak smartfony, aby zobaczyć cały zestaw danych, a jednocześnie nadal być w stanie zobaczyć potrzebne szczegóły. Użytkownicy smartfonów są przyzwyczajeni do powiększania ekranu za pomocą "gestu szczypania".

Powiększanie pomaga również poprawić dostępność dla osób z wadami wzroku.

Szczotki

Pędzel działa podobnie do powiększania, ponieważ oferuje użytkownikom sposób interakcji z częścią zestawu danych. Jednak zamiast powiększać część wykresu, obszar ten nie zmienia rozmiaru. Obszar szczotkowania może być wskazany w inny sposób, na przykład poprzez zmianę koloru.

Pędzel może być używany do filtrowania danych - na przykład użytkownicy mogą przesuwać pędzel wzdłuż osi x wykresu obszarowego, poruszając myszą. Obszar, który został wyczyszczony, może następnie pojawić się w innej części ekranu. Innym sposobem użycia pędzla jest dodanie oddzielnego wykresu pokazującego te same dane w innej skali. W tej sytuacji pędzel działa podobnie do zoomu. Może być jednak łatwiejszy w użyciu, ponieważ oryginalny wykres nie zmienia swoich wymiarów.

Animacje

Animacje pomagają na wiele sposobów. Na przykład w przypadku prostego wykresu słupkowego słupki mogą przesuwać się powoli w górę, zamiast pojawiać się natychmiast. Dodaje to bardzo niewiele do zawartości informacyjnej wykresu, ale czyni go bardziej interesującym dla użytkowników.

Animacje odgrywają poważniejszą rolę, gdy są używane do przejść. Na przykład ten diagram Sankeya pokazuje dane dla kilku lat. Gdy użytkownik przechodzi z jednego roku do drugiego za pomocą suwaka, zmieniają się względne rozmiary węzłów. Poruszają się one, ponieważ są uporządkowane według rozmiaru. Bez animacji zmiana byłaby szokująca i trudno byłoby utrzymać "stałość obiektu". Na przykład użytkownik może być zainteresowany tym, jak przepływ (w tym przypadku uchodźców) z danego kraju zmienia się z roku na rok. Jeśli ten węzeł przeskakiwałby bez płynnego przejścia, trudno byłoby to zrobić.

Inny przykład przejścia jest pokazany na tym wykresie kołowym. Po najechaniu myszką na segment nieznacznie się on wysuwa. Dzięki zastosowaniu płynnego przejścia ruch ten wydaje się naturalny i pomaga zachować metaforę wykresu kołowego. Bez tego ta część wykresu kołowego przeskakiwałaby z jednej pozycji do drugiej. Z tego samego powodu animacje sprawdzają się szczególnie dobrze podczas wyświetlania danych szeregów czasowych, takich jak wartości na wykresie giełdowym. Ponownie, korzyścią jest to, że łatwiej jest śledzić konkretną wartość, gdy się zmienia.

Gdy animacja jest używana do przechodzenia między zestawami danych, a przejścia te są kontrolowane przez interfejs użytkownika, taki jak <TransLink>ten suwak</TransLink>, użytkownik może eksplorować wartości niemal jak na wyświetlaczu wideo.

Kolory

Ponieważ wykresy D3 są tworzone za pomocą JavaScript, możliwe jest ustawienie kolorów za pomocą funkcji. Oznacza to, że kolory mogą być używane w sposób, który nie jest możliwy w innych bibliotekach wizualizacji danych.

Najbardziej oczywistym zastosowaniem kolorów jest rozróżnianie różnych zestawów danych - na przykład ten wykres słupkowy zawiera dane dla wielu zestawów podobnych danych. Używając różnych kolorów dla każdego zestawu danych i wyjaśniając znaczenie tych kolorów w legendzie, można połączyć je razem na tym samym wykresie.

Kolory mogą być również używane do grupowania podobnych zestawów wartości. Na przykład ten diagram Sunburst przedstawia hierarchię danych. Każdy pierścień reprezentuje inny poziom w hierarchii. Używając koloru, możemy pogrupować wartości należące do tego samego poziomu i wyjaśnić je w legendzie.

Kolejną zaletą D3 jest możliwość zmiany nasycenia koloru, a także jego odcienia. Na przykład w tym Sunburst diagram (górny przykład) nasycenie koloru w każdej sekcji jest zróżnicowane, podczas gdy wszystkie sekcje w tym samym pierścieniu mają ten sam kolor. W tym przypadku intensywność jest po prostu losowa, aby wyraźniej odróżnić poszczególne sektory (porównaj to z przykładem, w którym każdy sektor w pierścieniu ma zarówno ten sam odcień, jak i to samo nasycenie). Jednak nasycenie może być również związane z bazowym punktem danych. W takim przypadku lepiej jest, jeśli sekcje nie są ułożone w kolejności według rozmiaru, w przeciwnym razie mniejsze sektory będą zbyt trudne do rozróżnienia.

Innym przykładem zastosowania koloru w celu zwiększenia przejrzystości diagramu jest Diagram Sankeya. W dwóch górnych przykładach jeden kolor jest używany do reprezentowania węzłów początkowych, a inny kolor reprezentuje węzły docelowe. Ponadto gęstość koloru reprezentuje rozmiar każdego węzła. Te same kolory są używane w liniach łączących. Istnieje zatem oczywisty związek między wartościami reprezentowanymi przez węzły i wartościami reprezentowanymi przez linie łączące. W dwóch ostatnich przykładach użyto dwóch kolorów, a podstawowe wartości danych są reprezentowane przez względne wartości tych dwóch kolorów. Czasami może to być bardziej przejrzyste, zwłaszcza gdy różnice między wartościami danych są subtelne.

Wreszcie, kolor może być czasami używany po prostu do oddzielenia części diagramu, bez ukrytego znaczenia. Tak jest w przypadku trzeciego przykładu diagramu Sunburst. Kolory zostały specjalnie dobrane w taki sposób, aby granice między sektorami na diagramie Sunburst były wyraźnie widoczne. Jest to szczególnie przydatne, gdy wartości są małe, a sektory bardzo wąskie.

Innym sposobem użycia koloru jest wyróżnienie określonego zestawu punktów danych. Można to połączyć z pędzlem (patrz wyżej). Przeciągając pędzlem po wykresie, użytkownicy mogą filtrować punkty danych. Odfiltrowane wartości mogą być wyświetlane w innym kolorze, który może być powiązany z oddzielną legendą.

Nawet bez pędzla kolory mogą być przydatne do wyróżniania określonych wartości. Na przykład w D3.js możemy nadać wartościom odstającym określony kolor lub użyć różnych kolorów dla wartości ujemnych i dodatnich. Wizualizacje danych stają się znacznie wyraźniejsze, gdy kolory są używane inteligentnie, zwłaszcza gdy istnieje wiele punktów danych. Kodowanie kolorami może być również wykorzystane do pokazania ogólnej struktury wizualizacji danych.

Kolory mogą również pomóc w interakcji. Kolor punktu danych, słupka lub linii może zmienić się po najechaniu myszą, podkreślając, że został on wybrany.

Siatka danych

Dane dla wykresu D3js pochodzą zazwyczaj z jednego z trzech źródeł. Jeśli jest mało prawdopodobne, aby dane zmieniały się bardzo często, mogą być przechowywane w pliku JSON lub CSV na serwerze. Jeśli dane pochodzą z lokalnej bazy danych, baza ta będzie musiała być aktualizowana bezpośrednio, za pomocą niestandardowego interfejsu lub narzędzia bazodanowego, takiego jak DBeaver. Możemy to dla Ciebie skonfigurować.

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.

Odmianą siatki danych jest formularz: działa on podobnie jak formularz kontaktowy na stronie internetowej. Może to być bardziej odpowiednie, gdy dane muszą być wprowadzane przez pracowników, którzy nie są zaznajomieni z siatką danych.

Elementy interfejsu użytkownika

Chociaż D3.js oferuje ograniczony zestaw narzędzi interfejsu użytkownika, lepiej jest kodować je za pomocą biblioteki komponentów, takiej jak MUI, lub jako zwykły HTML.

Najbardziej użytecznymi elementami interfejsu użytkownika są przyciski radiowe i pola wyboru. Są one czasami mylone. Przyciski radiowe, takie jak te pokazane na tym wykresie słupkowym, pozwalają użytkownikom wybierać między zestawem wzajemnie wykluczających się opcji: w tym przypadku mogą wybrać pojedynczy zestaw danych, pokazany jako prosty wykres słupkowy, lub wiele zestawów danych, pokazanych jako wykres słupkowy. Można ich jednak również użyć do zmiany sposobu wyświetlania danych. W tej wizualizacji danych Sunburst przyciski radiowe wpływają na sposób, w jaki kolor jest używany do podkreślenia różnych aspektów zestawu danych.

Z drugiej strony pola wyboru pozwalają użytkownikom wybrać dowolną permutację opcji: w tym przypadku wybory nie wykluczają się wzajemnie. W przykładzie z polami wyboru, wizualizacja danych <Link>Line Chart</Link> może pokazywać tylko jeden zestaw danych, dowolne dwa zestawy danych lub wszystkie trzy. Jest to niezwykle pomocne, gdy użytkownicy muszą dokonać konkretnych porównań między parami zestawów danych: na przykład mogą chcieć porównać wartości operacji serca z operacjami wątroby i usunąć wartości operacji śledziony, aby poprawić przejrzystość.

Innym elementem interfejsu użytkownika, który jest przydatny do ulepszania wizualizacji danych D3.js, jest przełącznik. Jest on używany, gdy diagram może znajdować się w jednym z dwóch stanów lub gdy chcesz dać użytkownikom możliwość przełączenia części wizualizacji danych w celu poprawy przejrzystości. W tym przykładzie przełącznik jest używany do <Link> przełączania między wykresem liniowym a wykresem obszarowym</Link>.

Wreszcie, można użyć suwaków. Działają one szczególnie dobrze, gdy wizualizacja danych zawiera zestawy danych z różnych okresów. Pozwalają one użytkownikom intuicyjnie poruszać się w przód i w tył wzdłuż linii czasu, jak w tej wizualizacji danych Sankey.