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 - це фреймворк, керований даними, який є полегшеною бібліотекою 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 та canvas, отже, йому не потрібен будь-який інший плагін, крім браузера, йому не потрібні додаткові засоби налагодження чи навчання.
- Він може створити динамічне перетворення в реальному часі, маніпулюючи елементами DOM, швидко у візуалізацію даних без будь-яких затримок.
- Він працює з даними, є спеціалізованим та відповідним функціям візуалізації даних, що містяться в бібліотеці JavaScript.
Передумови вивчення D3.js
- Текстовий редактор: Текстовий редактор, такий як Notepad ++ або Vim, необхідний для написання програмного коду, такого як HTML, CSS, JavaScript, та інтеграції їх для отримання бажаних вимог.
- Веб-браузер: Будь-який із сучасних веб-браузерів, таких як Firefox, Google Chrome, Safari, Opera або IE9, повинен бути встановлений для перевірки та перевірки результатів, що видаються після інтеграції коду.
- HTML: Добре розуміння HTML-тегів та структури допоможе створити базову веб-сторінку та вирівняти елементи, щоб вивести візуалізацію на новий рівень.
- CSS: Каскадна таблиця стилів (CSS) використовується для застосування стилів, включаючи дизайн, макет та розмір екрану до веб-сторінок.
- РЕШЕННЯ: Чітке розуміння об'єктної моделі документа (DOM) має важливе значення, оскільки буде легше знати структуру та зміст веб-документів, отримувати доступ до елементів DOM для D3.js для візуалізації даних.
- JavaScript: Знайомство з основами та об’єктами JavaScript є необхідною умовою для вивчення та впровадження D3.js у наш додаток, щоб візуалізація даних могла переглядатися на веб-сервері.
- Веб-сервер: Важливо встановити веб-сервер, такий як сервер Apache Tomcat або IIS (Інформаційні служби Інтернету), щоб дані могли бути завантажені зовні у масиві, об'єкті, форматах XML, CSV, JSON і можуть бути перетворені за допомогою D3. js у формати візуалізації, такі як графіки, діаграми та геопросторова візуалізація.
Встановлення / налаштування D3.js
Для того, щоб створити візуалізацію даних на наших веб-сторінках, нам потрібно включити D3.js на нашу веб-сторінку HTML.
Це можна зробити наступними способами:
- Завантажте бібліотеку D3.js на нашу клієнтську машину та включіть шлях до d3.min.js в