miniaturka

Młodzi XXL a interaktywna grafika z R i biblioteką D3 javascript

We wtorek Magda Małczyńska-Umeda, pokazała swoją wersję infografiki o nadwadze w różnych grupach wiekowych w Polsce.
Czego ja się nauczyłem z tego wpisu? Czasami mniejsza rozdzielczość danych (dane pokazane są z dokładnością do 5%) idzie w parze z większą czytelnością. Dwadzieścia okazuje się wystarczającą liczbą ludzików by pokazać rosnący problem nadwagi z wiekiem. Mniej nie pokazałoby różnic, więcej byłoby nieczytelne. W tym przypadku dwadzieścia to jest TA liczba.
Dzisiaj wykorzystam wizualizację Magdy by pokazać jeszcze dwa wymiary z danych: kraj i rok w którym przeprowadzono badanie.
Acha, i wykorzystam do tego bibliotekę D3 do tworzenia interaktywnych wykresów.

Poniżej interaktywna grafika przedstawiająca jak w danym kraju, w danej grupie wiekowej i określonym roku wygląda rozkład osób z niedowagą, prawidłową wagą, nadwagą i otyłością. Warto wyklikać jak problemy z wagą wyglądają w różnych krajach dla naszej grupy wiekowej. Im mniej niebieskich i czerwonych ludzików tym lepiej. Ja byłem zaskoczony odkryciem w którym kraju (z prezentowanych) problemy z nadwagą są największe.

Jeżeli poniżej nie wyświetla się żaden obrazek to znaczy, że przeglądarka nie obsługuje HTML5 i aby zobaczyć grafikę trzeba otworzyć ten link.

Jak powstała ta wizualizacja? Mamy ikony opracowane przez Magdę, wykorzystujemy R do pobrania danych z Eurostatu i policzenia rozkładów nadwagi w różnych kombinacjach tych trzech zmiennych, następnie wykorzystujemy bibliotekę javascript D3 by animować wykres w zależności od wyborów użytkownika.

D3 okazała się prosta i intuicyjna do opanowania. Mnie wystarczył opis statycznych możliwości D3 z tej strony, plus opis funkcji .transition() i .delay() [możliwości tego języka jeżą włosy, dla mnie to doświadczenie porównywalne było z efektywnością wyniki/kod w OpenGL].

Kod javascript jest włączony w źródło strony. Wystarczy więc wyświetlić źródło tej strony by zobaczyć jak działa powyższa infografika. Kiedyś może ją opiszę dokładniej na blogu.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">