Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

Archiwum dla Czerwiec, 2013

Wizualizacje danych (3)

Autor: Piotr Karpiuk o 29. czerwca 2013

Japan Travel-Time Map

Deformacja mapy Japonii uwzględniająca czasy dostępu koleją i samolotem z Tokio do poszczególnych miejsc w kraju.

Zamiast reprezentować krawędzie grafu w postaci linii i etykietek, można próbować użyć samych etykietek.

Flow Map Layout

Naukowcy Stanford University opracowali algorytm rysowania grafów klastrujący krawędzie aby uniknąć nadmiernego bałaganu.

Artykuł naukowy (6 stron)

Code Profiles

Poziom jasności linii kodu źródłowego odzwierciedla częstotliwość edycji danego fragmentu, linie obrazują przepływ sterowania podczas wykonywania.

Historia CVS pojedynczego pliku kodu – wszystkie wersje na jednym rysunku (kliknij rysunek, aby powiększyć).

Zielone linie automatycznie nanoszone przez program interpretujący dane z kamer ulicznych pozwalają stwierdzić różnicę między tym jak przestrzeń wykreowali architekci, a jak w praktyce ludzie się do tego stosują.

Interaktywny graf radialny. Wybór wierzchołka przeorganizowuje graf tak, aby ten wierzchołek przemieścił się do centrum. Można zwijać poddrzewa, a wielkość powstałego w ten sposób koła odzwierciedla liczbę wierzchołków zwiniętego poddrzewa.

XML 3D Node Diagram

Aplikacja która pokazuje dowolny plik XML w postaci grafu, 2D lub 3D (ten ostatni to tzw. graf stożkowy, ang. cone graph)

Interaktywne demo (klikając opcję „Cone Shape/Flat” włączamy widok 3D)

Napisany w datavis | Brak komentarzy »

Wizualizacje danych (2)

Autor: Piotr Karpiuk o 28. czerwca 2013

Starlight

Wizualizacja włamania do sieci komputerowej na podstawie logów. Wierzchołki grafu reprezentują maszyny, kolor krawędzi mówi na ile podejrzane jest połączenie.

Sposób na zakodowanie zmian w czasie na grafie
StarryNight

Sposób na zaprezentowanie blogów i powiązań między nimi w postaci gwiazdozbioru. Z każdym blogiem są skojarzone słowa kluczowe, wskazanie słowa łączy liniami blogi z tym samym słowem kluczowym.

Wizualizacja dających się tagować zakładek do stron WWW na serwisie delicio.us. Pojedyncza zakładka to punkt na pionowej osi czasu (w pionie dni, w poziomie godziny), zaznaczenie pola wyboru odpowiadającego danemu tagowi łączy linią o danym kolorze wszystkie zakładki z tym tagiem.

Działające demo

MoireGraph

Sposób na prezentację grafu, w którym istotne są powiązane z wierzchołkami duże obrazki – interaktywny, animowany graf promienisty (ang. radial graph). Wizualizacja obsługuje do kilkuset wierzchołków. Zaznaczenie wierzchołka wyciąga go i jego sąsiadów na wierzch.

Filmik pokazujący graf w działaniu

Artykuł naukowy (8 stron)

CIA World Factbook

Sympatyczna interaktywna wizualizacja podstawowych danych o poszczególnych krajach i ich powiązaniach z innymi krajami.

Działające demo (Flash) – po wejściu na stronę klikamy obrazek

NetDisco

Przykład wizualizacji sieci komputerowej.

Wizualizacja kodu wirusa komputerowego (Beagle Worm). Czerwone pudełka oznaczają procedury wirusa, niebieskie to wywołania API systemu operacyjnego.

GeoTime (2004)

Karkołomny sposób na pokazanie zależności czasowych i geograficznych (zdarzenia, ruch punktu na mapie). Na osi Z mamy czas, a położenie płaszczyzny na osi Z wskazuje bieżący moment. Zdarzenia „zdarzają się” gdy płaszczyzna na nie najedzie.

Napisany w datavis | Brak komentarzy »

Drzewo stożkowe 3D

Autor: Piotr Karpiuk o 26. czerwca 2013

Drzewo stożkowe 3D (ang. 3D cone tree) to efektywnie wykorzystująca powierzchnię ekranu metoda wizualizacji dużych hierarchicznych struktur danych. Każdy wierzchołek wyświetlany jest na szczycie wyimaginowanego stożka prostego, a dzieci tego wierzchołka u podstawy stożka. Przydaje się też odpowiednia przestrzenna perspektywa. G.Robertson i in. (patrz literatura na końcu) przekonują, że drzewo stożkowe najlepiej nadaje się do sporych, szerokich, płytkich, niesymetrycznych struktur drzewiastych źle się rysujących na płaskiej powierzchni (konkretne ograniczenia 3D: do 1000 wierzchołków, 10 poziomów, max. stopień wierzchołka 30, brak symetrii ułatwia wgląd do wewnątrz). Dobre zastosowania to podobno drzewo katalogów UNIXa (600 katalogów, 10 tys. plików) i struktura dużej korporacji takiej jak Xerox (liczącej ok. 600 ludzi, wyliczenie ich w tabelce zajęłoby ok. 80 drukowanych stron).

W przypadku obiektów trójwymiarowych oprócz wykorzystywania systemu percepcji człowieka (wspomaganego np. przez oświetlenie i rzucane cienie), istotne są również możliwości interakcji z taką strukturą danych (edycja, czyli tzw. gardening), przy czym podkreśla się że interakcja taka powinna być zdecydowanie animowana, a czas animacji dla pojedynczej operacji użytkownika oscylować w czasie ok. 1 sekundy – jest to podejście powszechnie przyjęte w środowiskach CAD.

Proponowane interaktywne ułatwienia i operacje na takim drzewku:

  • selekcja wierzchołka rozświetla go i ścieżkę do korzenia, a także odpowiednio obraca scenę tak aby wszystkie te elementy znalazły się „na wierzchu”. Krytyka: rotacja jest w rzeczywistości innym rodzajem przewijania (ang. scrolling),
  • rybie oko (ang. fisheye view),
  • przesunięcie wierzchołka w stronę rodzica ukrywa całe poddrzewo,
  • usuwanie wszystkiego z wyjątkiem poddrzewa o wskazanym wierzchołku,
  • tekstowe przeszukiwanie etykietek wierzchołków i krawędzi: w trakcie wyszukiwania rozjaśniają się wierzchołki już znalezione, obok nich pojawia się mały pasek informujący o pozycji w wynikach (ang. score).

Niejako z definicji ten typ wizualizacji najlepiej nadaje się do struktur hierarchicznych; tym niemniej, gdy chcemy pokazać graf z małą ilością cykli, wystarczy je rozerwać, narysować powstałe drzewo, po czym dorysować usunięte wcześniej krawędzie.

Literatura

Napisany w datavis | Brak komentarzy »

Wizualizacje danych (1)

Autor: Piotr Karpiuk o 24. czerwca 2013

Napotkane w Internecie przykłady co ciekawszych wizualizacji danych, wraz z krótkimi objaśnieniami:

BlackShoals – planetarium rynku papierów wartościowych.

Rynek papierów wartościowych przedstawiony jako animowane niebo pełne gwiazd. Każda gwiazda reprezentuje pojedynczą firmę handlową, migocze i pulsuje gdy jej akcje właśnie podlegają transakcji. Wielkość gwiazd i odległości między nimi odzwierciedlają pozycję rynkową firmy i powiązania finansowe między firmami.

Zmieniająca się społeczność online

Żółte wierzchołki reprezentują rdzeń sieci społecznej (komunikują się najczęściej). Czerwone są połączone z rdzeniem, ale komunikują się rzadziej. Niebieskie to „nowe klastry”, które właśnie się formują. Zielony kolor to „lurkerzy”, którzy jedynie obserwują i nic od siebie nie dają.

Wielkie grafy w przestrzeni hiperbolicznej. Struktury danych takie jak drzewa czy grafy mogą na kolejnych poziomach rozrastać się tak gwałtownie, że nie sposób ich pokazać na przestrzeni dwuwymiarowej. Można wtedy sięgnąć po Geometrię hiperboliczną, która oferuje „więcej przestrzeni” niż geometria euklidesowa.

Prosty interaktywny przykład. Klikając dwukrotnie w wierzchołek odkrywamy kolejne fragmenty grafu.

Kolejny przykład zastosowania przestrzeni hiperbolicznej: graficzna reprezentacja zawartości repozytorium CVS w opensource’owej aplikacji Walrus (Galeria innych przykładów)
Ludzie są ewolucyjnie przystosowani do szybkiego ogarniania wzrokiem drzew w lesie, więc może pokazywać drzewiaste struktury danych jako obiekty 3D możliwie najlepiej przypominające drzewa za oknem? Artykuł

Czytaj więcej »

Napisany w datavis | Brak komentarzy »

Wykres bąbelkowy

Autor: Piotr Karpiuk o 20. czerwca 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ć.

Napisany w datavis | Brak komentarzy »