Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

Archiwum dla Maj, 2013

Klastrowanie krawędzi grafu

Autor: Piotr Karpiuk o 31. maja 2013

Istnieje wiele narzędzi do rysowania grafów. Mało które z nich jednak radzi sobie dobrze w sytuacji, gdy wierzchołków i krawędzi jest naprawdę dużo. Na poniższym przykładzie pokazano połączenia lotnicze między miastami USA.


Podczas Symposium on Visualization w 2009 roku D.Holten i J.Wijk zaprezentowali metodę automatycznego klastrowania krawędzi, w której krawędzie modelowane są jako elastyczne sprężynki mogące się przyciągać. Technika została opisana w 8-stronicowym dokumencie Force-Directed Edge Bundling for Graph Visualization, a rezultaty działania algorytmu możemy zobaczyć poniżej:

Napisany w datavis, Uncategorized | Brak komentarzy »

GeoJSON

Autor: Piotr Karpiuk o 31. maja 2013

GeoJSON to nieskomplikowany, acz użyteczny i elastyczny format wymiany danych geoprzestrzennych oparty na formacie JSON, używany w oprogramowaniu typu GIS, a także w bibliotekach OpenLayers, Mapnik, aplikacjach typu Bing Maps, i produktach Google.

Plik GeoJSON może zawierać geometrię (ang. geometry), obiekt (ang. feature), lub listę obiektów.

Geometria to punkt (Point), zbiór punktów (MultiPoint), łamana (LineString), zbiór łamanych (MultiLineString), wielokąt (Polygon – może mieć dziury) lub zbiór wielokątów (MultiPolygon), jak również lista geometrii (GeometryCollection).

Przykład:

    {
      "type": "LineString",
      "coordinates": [
        [102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
      ]
    }

Z kolei obiekt powstaje w wyniku nadania geometrii jakiegoś unikalnego identyfikatora i zbioru dowolnych etykietek:

    {
      "type": "Feature",
      "id": "OpenLayers.Feature.Vector_314",
      "properties": {
        "kind": "POI",
        "name": "Banacha Hospital"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [ 97.03125, 39.7265625 ]
      }
    }

Lista obiektów:

    {
      "type": "FeatureCollection",
      "features": [
        { "type": "Feature", ... },
        { "type": "Feature", ... },
        ...
      ]
    }

Napisany w Uncategorized | Brak komentarzy »

Anamorfoza

Autor: Piotr Karpiuk o 30. maja 2013


Rozmieszczenie populacji w państwach członkowskich UE

Anamorfoza (ang. cartogram) w kartografii to mapa tematyczna, w której wartości zmiennej (populacja, produkt krajowy brutto itp.) są wyrażone poprzez proporcjonalną zmianę pola powierzchni lub odległości. Warto zauważyć, że to co innego niż kartogram (który sprowadza się wyłącznie do kodowania wartości kolorem, przy niezdeformowanej mapie – w tłumaczeniu na język angielski kartogram to Choropleth map).
Na stronie WorldMapper można obejrzeć sobie szereg animowanych anamorfoz pokazujących zmianę w czasie na świecie liczby internautów, dziennego dochodu na jednego mieszkańca, czy liczby ludności (w ostatnim przypadku trzeba kliknąć zielony przycisk pod mapą żeby rozpocząć animację).

Produkt Krajowy Brutto

Napisany w datavis, HTML5, WWW | Brak komentarzy »

Diagram kołowy

Autor: Piotr Karpiuk o 29. maja 2013


Diagram kołowy populacji mówiącej angielskim językiem ojczystym

(Kompilacja materiałów z polskiej i angielskiej Wikipedii)

Diagram kołowy (ang. circle chart) lub tortowy (ang. pie chart) to prawdopodobnie najbardziej wszechobecny statystyczny wykres w świecie biznesu i mediów, być może dlatego, że jest on postrzegany jako mniej „naukowy” niż inne typy wykresów. Warto użyć, gdy celem jest porównanie rozmiaru wycinka do całości, zamiast porównywania wycinków ze sobą. Diagramy kołowe sprawdzają się znakomicie jeśli wycinki przedstawiają od 25 do 50% danych.

Statystycy uznają wykresy kołowe jako biedną metodę prezentacji informacji i są one bardzo rzadkie w literaturze naukowej. Jednym z powodów jest to, że trudno jest porównywać rozmiary elementów w wykresie, gdzie zmienia się pole i kształt zamiast długości. Potęgowe prawo Stevensa twierdzi, że wzrokowo pole powierzchni jest postrzegane z siłą 0,7 zaś długość z siłą 1,0. To sugeruje, że długość jest lepszą skalą, ponieważ postrzegane różnice byłyby proporcjonalne liniowo do różnic rzeczywistych.

Ponadto w badaniach naukowych na Bell Labs, wykazano, że porównania przez kąt były mniej dokładne niż porównania przez długość. Widać to dokładnie na wykresach po prawej, gdzie są trzy zestawy danych, diagram kołowy i odpowiadający mu histogram poniżej. Większość ma problem z uporządkowaniem wycinków diagramu kołowego względem wielkości, podczas gdy zastosowany jest histogram staje się to banalnie proste.

Diagram biegunowo-polowy (ang. polar area diagram) jest podobny do zwykłego diagramu kołowego, z wyjątkiem tego, że wycinki mają równe kąty, a różnice są uwidocznione przez długość ich promienia, pozwalając na liczne porównania na jednym wykresie.


Róża wiatrów

Przykładem diagramu biegunowo-polowego jest tzw. róża wiatrów (ang. wind rose), stosowana w meteorologii (patrz rysunek po lewej). Mapy dla Atlantyku i Pacyfiku pokazują rozkład wiatrów na danym obszarze w określonym przedziale czasu. „Promienie” pokazują kierunek wiatru, a kolor wskazuje jego siłę (np. w skali wiatru według Beauforta). Procent czasu, w którym wieje wiatr z jakiegoś kierunku, jest mierzony długością wyskalowanego promienia. Liczba umieszczona w środku okręgu określa udział okresów bezwietrznych (cisze).

Wielopoziomowy diagram kołowy (ang. multilevel pie chart) jest używany do obrazowania danych hierarchicznych przedstawionych przez koncentryczne okręgi. Środkowy okrąg przedstawia węzeł główny, z hierarchią oddalającą się od środka. Segment okręgu wewnętrznego (rodzic) przenosi hierarchiczne relacje na te segmenty okręgu zewnętrznego (dzieci), które leżą w zakresie jego wycinka. Przykładem jest diagram systemu plików na rysunku poniżej.


System plików Linux

Napisany w datavis, HTML5, WWW | Brak komentarzy »

d3.js

Autor: Piotr Karpiuk o 28. maja 2013

Poniższe informacje pochodzą z książki Interactive Data Visualization for the Web. An Introduction to Designing with D3, S.Murray, O’Reilly 2013. Jest to praktyczne wprowadzenie do łączenia trzech umiejętności: wizualizacji danych, tworzenia interaktywnych projektów, i deweloperki WWW – przy użyciu otwartoźródłowej biblioteki D3.js.
W dzisiejszych czasach jesteśmy przeładowani informacjami, tymczasem surowe dane stają się użyteczne dopiero po zaaplikowaniu na nich metod pozwalających je zwizualizować lub w inny sposób zyskać wgląd w to, co jest w nich najważniejsze. Wizualizacja jest procesem mapowania informacji na obraz.
Podstawowe funkcje narzędzi do interaktywnej wizualizacji zmieniły się od 1996 roku, gdy Ben Shneiderman z Uniwersytetu Maryland zaproponował mantrę: najpierw przegląd, powiększenie i filtrowanie, potem szczegóły na żądanie (ang. overview first, zoom and filter, then details-on-demand). Dzięki animowanym przejściom i dobrze zaprojektowanym interfejsom, niektóre wizualizacje pozwalają eksplorować dane pozwalając użytkownikowi czuć się jakby grał w grę komputerową.
D3 – czasem nazywane D3 lub d3.js – to biblioteka języka JavaScript do wizualizacji danych. Skrót D3 – oprócz tego że jest aluzją do W3, czyli WWW – rozwija się jako Data-Driven Documents. Dane są dostarczane przez Ciebie, dokumenty są stronami webowymi, a biblioteka zajmuje się sterowaniem (ang. driving) w sensie łączenia danych z dokumentem.
Zasadniczo, D3 jest eleganckim kawałkiem oprogramowania, które ułatwia generowanie i manipulację wyglądem stron WWW za pomocą danych.
Działanie biblioteki sprowadza się do:
Czytaj więcej »

Napisany w HTML5, JavaScript, Uncategorized, WWW | Brak komentarzy »