D3 oznacza dokumenty oparte na danych. Jest to otwarta biblioteka JavaScript opracowana przez Mike Bostock do tworzenia niestandardowych interaktywnych wizualizacji danych w przeglądarce internetowej przy użyciu SVG, HTML i CSS.
przy ogromnej ilości danych generowanych dzisiaj, przekazywanie tych informacji staje się trudne. Wizualne reprezentacje danych są najskuteczniejszym sposobem przekazywania znaczących informacji, a D3 zapewnia dużą łatwość i elastyczność tworzenia tych wizualizacji danych. Jest dynamiczny, intuicyjny i wymaga minimalnego wysiłku.,
jest podobny do Protovisa w koncepcji, ale podczas gdy Protovis jest używany do wizualizacji statycznych, D3 skupia się bardziej na oddziaływaniach, przejściach i transformacjach.
Oficjalna strona: d3js.org
kod źródłowy D3:https://github.com/d3/d3
funkcje D3
- wykorzystuje standardy internetowe: D3 jest niezwykle potężnym narzędziem do tworzenia interaktywnych wizualizacji danych. Wykorzystuje nowoczesne standardy internetowe: SVG, HTML i CSS do tworzenia wizualizacji danych.
- dane napędzane: D3 to dane napędzane., Może wykorzystywać dane statyczne lub pobierać je ze zdalnego serwera w różnych formatach, takich jak tablice, Obiekty, CSV, JSON, XML itp. tworzenie różnych typów wykresów.
- manipulacja DOM: D3 pozwala na manipulowanie modelem obiektowym dokumentu (DOM) na podstawie danych.
- elementy oparte na danych: umożliwia dynamiczne generowanie elementów i stosowanie stylów do elementów, czy to tabeli, wykresu, czy dowolnego innego elementu HTML i / lub grupy elementów.
- właściwości dynamiczne: D3 daje elastyczność, aby zapewnić właściwości dynamiczne większości swoich funkcji., Właściwości mogą być określone jako funkcje danych. Oznacza to, że Twoje dane mogą napędzać twoje style i atrybuty.
- rodzaje wizualizacji: w D3 nie ma standardowych formatów wizualizacji. Ale umożliwia tworzenie wszystkiego, od tabeli HTML po Wykres kołowy, od wykresów i wykresów słupkowych po Mapy geoprzestrzenne.
- niestandardowe wizualizacje: ponieważ D3 działa ze standardami sieciowymi, daje pełną kontrolę nad funkcjami wizualizacji.
- Transitions: D3 dostarcza funkcję transition ()., Jest to dość potężne, ponieważ wewnętrznie, D3 wypracowuje logikę interpolacji między wartościami i znajdowania Stanów przerywanych.
- interakcja i animacja: D3 zapewnia świetną obsługę animacji za pomocą funkcji takich jak duration(), delay() i ease(). Animacje z jednego stanu do drugiego są szybkie i reagują na interakcje użytkownika.
zalety D3
- D3.js jest biblioteką Javascript. Można go więc używać z dowolnymi frameworkami js, takimi jak Angular.js, reaguj.js czy Ember.js.,
- D3 koncentruje się na danych, dlatego jest najbardziej odpowiednim i wyspecjalizowanym narzędziem do wizualizacji danych.
- D3 jest open-source. Możesz więc pracować z kodem źródłowym i dodawać własne funkcje.
- działa ze standardami sieciowymi, więc nie potrzebujesz żadnej innej technologii lub wtyczki poza przeglądarką, aby korzystać z D3.
- D3 działa ze standardami sieciowymi, takimi jak HTML, CSS i SVG, nie ma nowego narzędzia do uczenia się ani debugowania wymaganego do pracy na D3.
- D3 nie zapewnia żadnej konkretnej funkcji, więc daje pełną kontrolę nad wizualizacją, aby dostosować ją do własnych potrzeb., Daje to przewagę nad innymi popularnymi narzędziami, takimi jak Tableau czy QlikView.
- ponieważ D3 jest lekki i działa bezpośrednio ze standardami sieciowymi, jest niezwykle szybki i działa dobrze z dużymi zbiorami danych.,li>
The Power of D3: Few Visualization Examples
Bar Chart
Bubble Chart
Circle Packing
Stream Graph
Visit D3 Gallery for more visualization examples.,
Dodaj komentarz