Samouczek D3.js - Framework wizualizacji danych dla początkujących

d3 js tutorial data visualization framework

Ten samouczek D3.js wyjaśnia, czym jest D3.js, jego zalety, funkcje, proces instalacji krok po kroku i mnóstwo praktycznych przykładów, dzięki którym możesz szybko nauczyć się D3.js:

W tym samouczku opisano, jak D3.js, opartą na danych bibliotekę JavaScript typu open source można wykorzystać do wizualizacji danych za pomocą HTML, Document Object Model (DOM), Cascading Style Sheets (CSS), Scalable Vector Graphics (SVG), Canvas i JavaScript przez przeglądarkę internetową.

Korzystając z tej struktury, dane zewnętrzne w formacie XML, CSV lub JSON można konwertować na wykresy, wykresy lub wiele formatów wizualizacji na serwerze sieci Web.

W tym samouczku dowiemy się o wszystkich funkcjach z tej biblioteki JavaScript i zobaczymy, jak możemy je wykorzystać do wizualizacji danych na serwerze sieciowym za pomocą przeglądarki internetowej.

Zaczynajmy!!

Czego się nauczysz:

• Co to jest D3.js
  • Funkcje D3.js
  • Korzyści z używania D3.js
  • Wymagania wstępne do nauki D3.js
  • Instalacja / konfiguracja D3.js
  • Instalowanie Apache Tomcat - serwer WWW
• Zrozumienie pojęć i standardów internetowych
• Różne metody i interfejsy API z biblioteki D3.js.
  • Dodawanie kształtów SVG do elementu HTML za pomocą d3.select ()
  • Transformacja kształtów SVG
  • Przykład transformacji SVG
  • Funkcje do znajdowania statystyk tablicy
  • D3.js Transitions API
  • D3.js Collection API
  • Maps API
  • Ustawia API
  • Paths API
• Wniosek
  • rekomendowane lektury

Co to jest D3.js

D3.js to oparty na danych framework, który jest lekką biblioteką JavaScript i wymaga mniej wierszy kodu, odpowiednich do obsługi dużych danych w celu uzyskania interaktywnych wykresów wizualizacji danych, grafów i map geoprzestrzennych.

Jest to biblioteka JavaScript typu open source używana głównie do kreślenia wizualizacji graficznej poprzez manipulowanie elementami DOM stron internetowych w celu eksploracji i analizy danych.

Dane przechowywane w formatach danych, takich jak tablica, XML, CSV i JSON, można konwertować na wykresy, wykresy i na wiele sposobów, dołączając elementy HTML, płótno lub grupując kształty skalowalnej grafiki wektorowej (SVG) za pomocą tej biblioteki JavaScript.

Duże zbiory danych, takie jak zapisy szczegółów połączeń z urządzeń mobilnych i innych, wiadomości, dyskusje lub dzienniki twit z platform mediów społecznościowych, takich jak Twitter, Facebook, WhatsApp, dzienniki trendów rynkowych i dzienniki informacji handlowych można przekształcić w wykresy, wykresy lub różne wizualizacje przy użyciu tej biblioteki JavaScript.

Od czasu pojawienia się różnych platform społecznościowych, takich jak Twitter, Facebook i WhatsApp, różne komunikaty, takie jak twit, wiadomości i dzienniki komentarzy, można przechwytywać i konwertować na formaty wizualne, takie jak wykresy, wykresy itp., Aby zrozumieć trendy i stworzyć sentyment analiza.

Łatwo jest zrozumieć sposób działania grupy rejestrów rozmów podejrzanych z wież telekomunikacyjnych i monitorować ich wzorce połączeń w przypadku ich udziału w podejrzanej działalności przestępczej.

Na podstawie zmian zachodzących na giełdzie indeksy giełdowe, takie jak Bombay Stock Exchange (BSE), National Stock Exchange (NSE), które odzwierciedlają ruchy cen akcji, decydują o nastrojach rynkowych i prowadzą inwestorów do kupna lub sprzedaży w magazynie.

D3.js może konwertować działania dotyczące udziału w rynku, aby tworzyć wykresy lub wykresy, które mogą szybko przewidywać prawdopodobieństwo trendów rynkowych, lub dane mobilne w postaci zapisów szczegółów połączeń w celu zbadania jakiegokolwiek udziału podejrzanych w przestępstwach lub informacji na temat dochodzenia prognostycznego.

Funkcje D3.js

• Oparte na danych: Służy głównie do eksploracji i analizowania danych oraz tworzenia interaktywnych wykresów w czasie rzeczywistym, wykresów i rozbudowanych sposobów wizualizacji danych.
• Manipulacja DOM: Jest to biblioteka JavaScript typu open source, która konwertuje dane w różnych formatach wizualizacji poprzez manipulowanie elementami DOM.
• Wykorzystuje standardy sieciowe: Wykorzystuje Document Object Model (DOM), HTML, Cascading Style Sheet (CSS), Scalable Vector Graphics (SVG) i Canvas do tworzenia formatów wizualizacji danych.
• Szybki i interaktywny: Bardzo szybko reaguje na zmiany danych i może szybko animować lub przekształcać wybrany element DOM z jednego stanu w inny.
• Wyświetl dynamiczne przejścia: Ta biblioteka została zaprojektowana w celu tworzenia szybkiego, dynamicznego przejścia w celu generowania szybkiej, responsywnej wizualizacji za pomocą DOM.

Korzyści z używania D3.js

• Jest to biblioteka JavaScript typu open source, której można używać wraz z innymi strukturami JavaScript, takimi jak Angular.JS, Ember.JS lub React.
• Ta biblioteka jest open-source, więc można dodawać własne funkcje do kodu źródłowego, aby osiągnąć swoje cele.
• Obsługuje standardy internetowe, takie jak DOM, HTML, CSS, SVG i Canvas, dzięki czemu nie potrzebuje żadnej innej wtyczki poza przeglądarką, nie potrzebuje żadnego dodatkowego narzędzia do debugowania lub nauki.
• Może tworzyć dynamiczne transformacje w czasie rzeczywistym poprzez manipulowanie elementami DOM, szybko w celu wizualizacji danych bez żadnych opóźnień.
• Działa na danych i jest wyspecjalizowany i odpowiedni z funkcjami wizualizacji danych zawartymi w bibliotece JavaScript.

Wymagania wstępne do nauki D3.js

• Edytor tekstu: Edytor tekstu, taki jak Notepad ++ lub Vim, jest potrzebny do pisania kodu programistycznego, takiego jak HTML, CSS, JavaScript, i integracji ich w celu uzyskania pożądanego wymagania.
• Przeglądarka internetowa: Aby sprawdzić i zweryfikować dane wyjściowe generowane po integracji kodu, należy zainstalować dowolną z nowoczesnych przeglądarek internetowych, na przykład Firefox, Google Chrome, Safari, Opera lub IE9.
• HTML: Dobre zrozumienie znaczników i struktury HTML pomoże zbudować podstawową stronę internetową i wyrównać elementy, aby przenieść wizualizację na wyższy poziom.
• CSS: Kaskadowy arkusz stylów (CSS) służy do stosowania stylów obejmujących projekt, układ i rozmiar ekranu na stronach internetowych.
• OSĄD: Dobre zrozumienie Document Object Model (DOM) jest niezbędne, ponieważ łatwiej będzie poznać strukturę i zawartość dokumentów internetowych, uzyskać dostęp do elementów DOM dla D3.js w celu wizualizacji danych.
• JavaScript: Znajomość podstaw i obiektów JavaScript jest warunkiem wstępnym do nauki i implementacji D3.js w naszej aplikacji, aby wizualizacja danych była widoczna na serwerze internetowym.
• Serwer internetowy: Konieczne jest zainstalowanie serwera WWW, takiego jak Apache Tomcat lub serwer IIS (Internet Information Services), aby dane można było przesyłać na zewnątrz w postaci tablicy, obiektu, XML, CSV, JSON i przekształcać za pomocą D3. js do formatów wizualizacji, takich jak wykresy, wykresy i wizualizacja geoprzestrzenna.

Instalacja / konfiguracja D3.js

Aby stworzyć wizualizację danych na naszych stronach internetowych, musimy dołączyć D3.js do naszej strony HTML.

Można to zrobić w następujący sposób:

• Pobierz bibliotekę D3.js na nasz komputer kliencki i dołącz ścieżkę d3.min.js do