D3.js Урок - Рамка за визуализация на данни за начинаещи

d3 js tutorial data visualization framework

Този урок за D3.js обяснява какво е D3.js, неговите предимства, функции, стъпка по стъпка инсталационен процес и много практически примери, за да можете бързо да научите D3.js:

Този урок описва как D3.js, управлявана от данни JavaScript библиотека с отворен код, може да бъде използвана при визуализация на данни, използвайки HTML, обектен модел на документ (DOM), каскадни таблици със стилове (CSS), мащабируема векторна графика (SVG), Canvas и JavaScript чрез уеб браузър.

Използвайки тази рамка, външните данни във формат XML, CSV или JSON могат да бъдат преобразувани в диаграми, графики или множество формати за визуализация през уеб сървър.

В този урок ще научим за всички функции от тази библиотека на JavaScript и ще видим как можем да ги използваме, за да визуализираме данните чрез уеб сървър с помощта на уеб браузър.

Да започваме!!

Какво ще научите:

• Какво е D3.js
  • Характеристики на D3.js
  • Ползи от използването на D3.js
  • Предпоставки за изучаване на D3.js
  • Инсталиране / настройка на D3.js
  • Инсталиране на Apache Tomcat - уеб сървър
• Разбиране на уеб концепции и стандарти
• Различни методи и API от библиотеката D3.js
  • Добавяне на SVG фигури към HTML елемент с d3.select ()
  • Трансформация на SVG фигури
  • Пример за трансформация на SVG
  • Функции за намиране на статистика на масив
  • D3.js API за преходи
  • API за събиране на D3.js
  • API на Maps
  • Задава API
  • API на Paths
• Заключение
  • Препоръчително четене

Какво е D3.js

D3.js е управлявана от данни рамка, която е лека библиотека на JavaScript и изисква по-малко редове код, подходящ за обработка на големи данни, за да се получат интерактивни графики за визуализация на данни, графики и геопространствени карти.

Това е JavaScript библиотека с отворен код, която се използва главно за нанасяне на графична визуализация чрез манипулиране на DOM елементи на уеб страници за изследване и анализ на данни.

Данните, съхранявани във формати на данни като масив, XML, CSV и JSON, могат да бъдат преобразувани в графики, диаграми и множество начини чрез прикачване на HTML елементи, платно или групиране на форми на мащабируема векторна графика (SVG) с помощта на тази JavaScript библиотека.

Големи данни, като подробности за обажданията от мобилни и други устройства, съобщения, дискусии или twit дневници от социални медийни платформи като Twitter, Facebook, WhatsApp, дневници от пазарните тенденции и регистрационни файлове с информация за търговия, могат да бъдат преобразувани в диаграми, графики или различна визуализация с помощта на тази JavaScript библиотека.

След появата на различни платформи за социални мрежи като Twitter, Facebook и WhatsApp, различни комуникации като twit, съобщения и дневници на коментари могат да бъдат заснети и преобразувани във визуални формати като диаграми, графики и т.н., за да се разберат тенденциите в темите и да се създаде настроение анализ.

Става лесно да се разбере начинът на действие на група от подробности за повикванията на заподозрян от телекомуникационни кули и да се следи моделът им на обаждания в случай на участие в подозрителни престъпни дейности.

Въз основа на промените, които се случват на фондова борса, фондов индекс като Бомбейската фондова борса (BSE), Националната фондова борса (NSE), който отразява движението на цените на акциите, решава пазарните настроения и насочва инвеститорите при покупка или продажба на склад.

D3.js може да преобразува дейности на пазарен дял, за да създава диаграми или графики, които могат бързо да предскажат вероятността от пазарни тенденции, или мобилни данни под формата на подробни записи за обаждания за разследване на всяко участие на заподозрени в престъпления или информация за прогнозното разследване.

Характеристики на D3.js

• Управлявани от данни: Използва се главно за изследване и анализ на данни и създаване на интерактивни графики в реално време, диаграми и обширни начини за визуализиране на данните.
• DOM манипулация: Това е JavaScript библиотека с отворен код, която преобразува данни в различни формати за визуализация чрез манипулиране на DOM елементи.
• Използва уеб стандарти: Той използва обектен модел на документ (DOM), HTML, каскадни таблици със стилове (CSS), мащабируема векторна графика (SVG) и платно за създаване на формати за визуализация на данни.
• Бързо и интерактивно: Той е много отзивчив за промяна в данните и може бързо да анимира или трансформира избрания DOM елемент от едно състояние в друго състояние.
• Показване на динамични преходи: Тази библиотека е проектирана да създаде бърз динамичен преход за генериране на бързо отзивчива визуализация с DOM.

Ползи от използването на D3.js

• Това е JavaScript библиотека с отворен код, която може да се използва заедно с други JavaScript рамки като Angular.JS, Ember.JS или React.
• Тази библиотека е с отворен код, така че можете да добавите свои собствени функции към изходния код, за да постигнете целите си.
• Той обработва уеб стандарти като DOM, HTML, CSS, SVG и платно, поради което не се нуждае от друг плъгин освен браузър, не се нуждае от допълнителни инструменти за отстраняване на грешки или обучение.
• Той може да създаде динамична трансформация в реално време чрез манипулиране на DOM елементи, бързо във визуализация на данни без никакво забавяне.
• Той работи върху данни и е специализиран и подходящ с функции за визуализация на данни, съдържащи се в библиотеката на JavaScript.

Предпоставки за изучаване на D3.js

• Текстов редактор: Необходим е текстов редактор като Notepad ++ или Vim, за да се напише код за програмиране като HTML, CSS, JavaScript и да се интегрира, за да се получи желаното изискване.
• Уеб браузър: Всеки от съвременните уеб браузъри, като Firefox, Google Chrome, Safari, Opera или IE9, трябва да бъде инсталиран, за да провери и провери изхода, който се получава след интегриране на кода.
• HTML: Доброто разбиране на HTML таговете и структурата ще ви помогне да изградите основна уеб страница и да подравните елементи, за да изведете визуализацията на следващото ниво.
• CSS: Cascading Style Sheet (CSS) се използва за прилагане на стилове, включително дизайн, оформление и размер на екрана към уеб страници.
• РЕШЕНИЕ: Силното разбиране на обектния модел на документ (DOM) е от съществено значение, тъй като ще бъде по-лесно да се знае структурата и съдържанието на уеб документите, достъп до DOM елементи за D3.js за визуализация на данни.
• JavaScript: Познаването на основите и обектите на JavaScript е предпоставка за изучаване и внедряване на D3.js в нашето приложение, така че визуализацията на данните да може да бъде видяна в уеб сървъра.
• Уеб сървър: От съществено значение е да имате инсталиран уеб сървър като сървър Apache Tomcat или IIS (Internet Information Services), така че данните да могат да се качват външно в масиви, обекти, XML, CSV, JSON формати и да могат да се трансформират с помощта на D3. js във формати за визуализация като графики, диаграми и геопространствена визуализация.

Инсталиране / настройка на D3.js

За да създадем визуализация на данни в нашите уеб страници, трябва да включим D3.js в нашата HTML уеб страница.

Това може да стане по следните начини:

• Изтеглете библиотеката D3.js в нашата клиентска машина и включете пътя на d3.min.js в