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

November 8, 2012
By

This post was kindly contributed by SmarterPoland » R - go there to comment and to read the full post.

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.

Tags: , , , , , , , , ,

Comments are closed.