Kategorie
CSS Design Java Script SVG

Dokumenty oparte na danych

Spontaniczna notka dotycząca znalezionej biblioteki.

Podczas analizy problemu wizualizacji danych poprzez wykres Sankeya natknąłem się na fenomenalną bibliotekę D3.js zmieniającą powszechne spojrzenie na zbiory danych i wizualizację obiektów.

D3.js jest biblioteką JavaScript do manipulacji dokumentów opartych o dane. D3 budzi dane do życia dzięki zastosowaniu HTML, SVG i CSS. Stworzona struktura dokumentu jest w pełni zgodna ze standardami sieciowymi. Takie podejście umożliwia bardzo efektowne wizualizowanie danych w warstwie prezentacyjnej opierając się jedynie na manipulacjach DOM.

Główne zadanie biblioteki D3 to łączenie dostępnych danych, które w dalszej kolejności są przekształcane lub odpowiednio prezentowane. W przypadku dokumentów opartych o dane, kwestie źródła są bardzo elastyczne. Przykładowe czerpanie danych z pliku JSON, kończy się prezentowaniem tabeli w HTML lub wykresu w formie SVG. Jeżeli dodatkowo potrzebujemy płynnych przejść lub interakcji elementów, wszystko sprowadza się do odpowiedniej konfiguracji naszych zależności.

D3 nie koncentruje się na rozwiązywaniu konkretnych problemów poprzez zapewnienie wszystkich możliwych opcji. Dzięki efektywnemu manipulowaniu danymi możliwe jest zapewnienie elastyczności i wykorzystanie potencjału standardów sieciowych bez koncentrowania się na reprezentacji samych elementów. Wysoka wydajność biblioteki została osiągnięta dzięki transformacjom treści, nawet przy bardzo dużych i złożonych zestawach danych. Funkcjonalny styl D3 umożliwia ponowne wykorzystanie kodu poprzez zróżnicowaną kolekcję komponentów i wtyczek.

Największym atutem D3 jest łatwość szukania błędów w kodzie poprzez analizę struktury DOM z poziomu przeglądarki, która domyślnie wspiera taką perspektywę.