Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

Wykres bąbelkowy

Autor: Piotr Karpiuk o czwartek 20. Czerwiec 2013

Wykres bąbelkowy koduje 3- lub 4-wymiarowe serie danych za pomocą kół umieszczonych w kartezjańskim układzie współrzędnych. Dwa pierwsze wymiary tworzą osie układu, trzeci wymiar to wielkość kół, a czwarty to kolor koła. Typowy przykład zastosowania wykresu, to np. zobrazowanie ryzyka realizacji projektów informatycznych: każdy projekt mógłby być reprezentowany przez koło, którego wielkość reprezentuje koszt projektu, a na osiach umieszczane jest prawdopodobieństwo sukcesu i spodziewany zysk.

Ludzie w sposób naturalny postrzegają rozmiar koła w znaczeniu pola powierzchni, które jest proporcjonalne nie do promienia, lecz do pierwiastka promienia. Jest to miejsce w którym łatwo jest wizualnie zafałszować wartości trzeciego wymiaru wykresu, zwłaszcza gdy różnią się znacznie. Dodatkowym problemem jest pokazywanie wartości ujemnych i zerowych.


Jedna z prostych mutacji wykresu (położenie kół nie ma znaczenia). Kliknij aby powiększyć.

Wynalazcami wykresu bąbelkowego są naukowcy (MIT, IBM, Google): Brazylijka dr Fernanda Viegas oraz Amerykanin dr Martin Wattenberg. Ten typ wykresu został spopularyzowany m.in. przez New York Times’a, a we własnych stronach WWW można go zastosować np. korzystając z JavaScriptowej biblioteki D3 (patrz przykład).

Założona przez kilkoro profesorów szwedzkich uniwersytetów firma Gapminder Foundation stworzyła we Flashu narzędzie Trendalyzer do prezentacji danych statystycznych za pomocą interaktywnych wykresów bąbelkowych, przy czym dodano jeszcze piąty wymiar (czas) dający się zmieniać suwakiem. Firma została wykupiona w 2007 roku przez Google, od tej pory wykresy tego typu noszą nazwę Google Motion Charts, i można ich używać np. w Dokumentach Google.

Interaktywne wykresy Gapmindera


Wykres oczekiwanej długości życia w zależności od dochodu na mieszkańca. Kliknij aby powiększyć.
Share and Enjoy:
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Śledzik
  • Blip
  • Blogger.com
  • Gadu-Gadu Live
  • LinkedIn
  • MySpace
  • Wykop

Zostaw komentarz

XHTML: Możesz użyć następujących tagów: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>