Back to Blog

D3.js - krok po kroku. Design.

21 Apr 2016

Poprzednim razem zatrzymałem się na prawidłowym skalowaniu elementów SVG w D3.js. Czas dokończyć wykres i wprowadzić kolejne elementy, czyli etykiety oraz osie. Po zmianach w kodzie, które wprowadzimy już nie długo, wykres będzie wyglądał tak:

121535046302816WebToolGameMobileIOTWindowsDataDSP '16 Projects

Zanim jednak zagłębimy się w JavaScript, parę słów o tym, dlaczego wybrałem taki, a nie inny sposób prezentacji danych.

Po pierwsze prostota

Na ogół jestem zwolennikiem prostoty. Staram się trzymać zasady, że jeśli jakiś element nie wprowadza żadnej informacji, to należy go usunąć. Dlatego tworząc wykres w R za pomocą ggplot2 wycinam wszystkie gridy, osie, szare tło, ramki i wszystko, co dostajemy domyślnie, a nie dodaje nic poza pozornym upiększeniem. W D3.js bardziej “zachęca” do prostoty, bo wszystko piszemy od zera:)

Dlaczego wykres słupkowy?

Sometimes bar charts are avoided because they are common. This is a mistake. Rather, bar charts should be leveraged because they are common, as this means less of a learning curve for your audience.

Cole Nussbaumer Knaflic, “Storytelling with data”

Słupki (belki, prostokąty, bary: będę używał tych określeń zamiennie, ale chodzi o to samo) są najprostszą formą prezentacji danych podzielonych na kategorie. Z punktu widzenia percepcji, ludzkiemu oku najłatwiej porównać dwie długości ułożone równolegle. Najlepiej, jeśli są one wyrównane do tej samej linii.

Wykres poziomy czy pionowy?

Ktoś, kto czytał moje wcześniejsze posty, mógł zwrócić uwagę, że większość bar chartów w ggplot2 obracam poziomo. Tutaj nie będzie inaczej, a głównie przez to, że wykres poziomy ma kilka zalet, dzięki którym preferuję właśnie ten wariant:

  • Jest czytelniejszy. Większość ludzi odruchowo przetwarza informacje tak, jak czyta się tekst: od lewej do prawej i z góry na dół. Tak jest przyzwyczajona i tak jest najwygodniej. Poziomy wykres łatwo analizować właśnie w taki sposób.

  • Pozwala na lepsze ułożenie etykiet. W przykładzie etykiety są krótkie, więc być może, po małych zmianach proporcji, mogłyby się zmieścić w linii poziomej na wykresie pionowym. Nie zawsze to jest jednak wykonalne.

Sortowanie

Odpowiednia kolejność elementów na wykresie pozwala je lepiej porównać. W tej kwestii warto trzymać się zasady, że elementy powinny być posortowane malejąco, wg długości belek. Zazwyczaj to największa wartość ma największe znaczenie, dlatego najdłuższa belka powinna znaleźć się na samej górze (pamiętając o zasadzie kolejności czytania, o której wspomniałem powyżej). Od tej reguły jest jeden wyjątek, mianowicie gdy kategorie mają swoją naturalną kolejność, wtedy to ona najczęściej będzie lepszym czynnikiem sortowania. Przykładem może być wykres ocen produktów na Amazonie. Czytelniejszy będzie wykres posortowany po ocenie niż po liczbie głosów:

W przykładzie typy projektów Daj Się Poznać nie mają żadnej hierarchii, więc sortujemy je po liczbie zgłoszeń.

Grubość belek

Wystarczy przyjąć, że szerokość belek nie powinna być mniejsza niż odległość między nimi.

Liczby

Jeśli chodzi o prezentowanie liczb na wykresie, zasadniczo dostępne są dwie opcje: można je albo przedstawić za pomocą osi poziomej, albo umieścić bezpośrednio przy belkach. Ja wybrałem tę drugą alternatywę, ponieważ pozwala na pokazanie konkretnej liczby projektów. Ponadto ten sposób jest “lżejszy” wizualnie niż cała oś. W przykładzie umieściłem liczby wewnątrz belki, nie przedłużają one wtedy optycznie prostokątów i nie zaburzają dzięki temu proporcji.

Tytuł

Jest zaznaczony większą, mocniejszą czcionką i wyrównany do lewej. Wykres ma duży, lewy margines wyznaczający miejsce dla etykiet, więc jakiekolwiek wyśrodkowanie wyglądałoby mało estetycznie. Poza tym pamiętamy o zasadzie, że większość osób zacznie czytać wykres od lewego górnego rogu, więc od razu trafi na tytuł.

Kolor

Niebieski kolor nie wprowadza żadnej informacji, ale dodałem go, żeby ożywić trochę cały wykres. Jeśli chodzi o dobór kolorów, świetnym źródłem szablonów, które stały się już pewnym standardem w wizualizacjach, jest praca Cynthii Brewer dostępna na stronie colorbrewer2.org.

Książki

Powyższe praktyki to jedynie wierzchołek góry lodowej, zasady projektowania wizualizacji to obszerna dziedzina. Jest na szczęście sporo literatury na ten temat, ze swojej strony mogę polecić dwie pozycje książkowe: