D3.js - Википедия - D3.js
Разработчики) | Майк Босток, Джейсон Дэвис, Джеффри Хир, Вадим Огиевецкий и сообщество |
---|---|
изначальный выпуск | 18 февраля 2011 г. |
Стабильный выпуск | 6.3.1 / 8 декабря 2020[1] |
Репозиторий | |
Написано в | JavaScript |
Тип | Визуализация данных, Библиотека JavaScript |
Лицензия | BSD |
Интернет сайт | d3js |
D3.js (также известен как D3, Короче для Документы на основе данных) это JavaScript библиотека для создания динамических, интерактивных визуализации данных в веб-браузеры. Он использует Масштабируемая векторная графика (SVG), HTML5, и Каскадные таблицы стилей (CSS) стандарты. Это преемник более ранней структуры Protovis.[2] Его развитие было отмечено в 2011 г.[3] поскольку версия 2.0.0 была выпущена в августе 2011 года.[4]
Контекст
Ранее предпринимались различные попытки перенести визуализацию данных в веб-браузеры. Наиболее яркими примерами были наборы инструментов Prefuse, Flare и Protovis, которые все можно рассматривать как прямых предшественников D3.js.
Предварительный предохранитель был создан в 2005 году набор инструментов для визуализации, который требовал использования Ява, а визуализации выполнялись в браузерах с помощью подключаемого модуля Java. Flare был аналогичным набором инструментов 2007 года, в котором использовались ActionScript, а для рендеринга требовался подключаемый модуль Flash.
В 2009 году, основываясь на опыте разработки и использования Prefuse и Flare, Джефф Хир, Майк Босток, и Вадим Огиевецкий из Стэндфордский Университет Стэнфордская группа визуализации создала Protovis, библиотеку JavaScript для генерации графики SVG из данных. Библиотека была известна практикам в области визуализации данных и ученым.[5]
В 2011 году разработка Protovis была остановлена, чтобы сосредоточиться на новом проекте D3.js. Основываясь на опыте работы с Protovis, Bostock вместе с Хиром и Огиевецким разработали D3.js, чтобы обеспечить более выразительную структуру, которая, в то же время, ориентирована на веб-стандарты и обеспечивает повышенную производительность.[6]
Технические принципы
Библиотека D3.js использует встроенные функции для выбора элементов, создания объектов SVG, их стиля или добавления переходов, динамических эффектов или всплывающие подсказки им. Эти объекты также можно стилизовать с помощью CSS. Большие наборы данных могут быть связаны с объектами SVG с помощью функций D3.js для создания текстовых / графических диаграмм и диаграмм. Данные могут быть в различных форматах, например JSON, значения, разделенные запятыми (CSV) или geoJSON, но при необходимости функции JavaScript могут быть написаны для чтения других форматов данных.
Выборы
Центральный принцип дизайна D3.js - дать возможность программисту сначала использовать селектор в стиле CSS для выбора заданного набора Объектная модель документа (DOM), затем используйте операторы для управления ими аналогично jQuery.[7] Например, можно выбрать весь HTML <p>...</p>
элементы, а затем изменить их цвет текста, например к лаванде:
d3.выбрать все("п") // выбираем все элементы .стиль("цвет", "лаванда") // устанавливаем стиль "цвет" в значение "лаванда" .attr("учебный класс", "квадраты") // устанавливаем атрибут "class" в значение "squares" .attr("Икс", 50); // устанавливаем атрибут "x" (положение по горизонтали) на значение 50 пикселей
Выбор может быть основан на теге HTML, классе, идентификаторе, атрибуте или месте в иерархии. После выбора элементов к ним можно применять операции. Это включает получение и установку атрибутов, отображаемых текстов и стилей (как в приведенном выше примере). Также можно добавлять и удалять элементы. Этот процесс изменения, создания и удаления HTML-элементов может зависеть от данных, что является основной концепцией D3.js.
Переходы
Объявляя переход, значения атрибутов и стилей можно плавно интерполировать в течение определенного времени. Следующий код сделает весь HTML <p>...</p>
элементы на странице постепенно меняют цвет текста на розовый:
d3.выбрать все("п") // выбираем все элементы .переход("транс_1") // переход с именем "trans_1" .задерживать(0) // переход начинается через 0 мс после триггера .продолжительность(500) // переход на 500 мс .простота(d3.легкостьЛинейный) // прогрессия замедления перехода линейна ... .стиль("цвет", "розовый"); // ... цвет: розовый
Связывание данных
Для более продвинутого использования загруженные данные управляют созданием элементов. D3.js загружает заданный набор данных, а затем для каждого из его элементов создает объект SVG со связанными свойствами (форма, цвета, значения) и поведением (переходы, события).[8][9][10]
// Данные вар CountryData = [ { имя:"Ирландия", доход:53000, жизнь: 78, поп:6378, цвет: "чернить"}, { имя:"Норвегия", доход:73000, жизнь: 87, поп:5084, цвет: "синий" }, { имя:"Танзания", доход:27000, жизнь: 50, поп:3407, цвет: "серый" } ];// Создаем контейнер SVG вар svg = d3.Выбрать("#крюк").добавить("svg") .attr("ширина", 120) .attr("высота", 120) .стиль("фоновый цвет", "# D0D0D0");// Создание элементов SVG из данных svg.выбрать все("круг") // создаем шаблон виртуального круга .данные(CountryData) // связываем данные .присоединиться("круг") // объединяет данные с выбранным и создает элементы круга для каждого отдельного данных .attr("я бы", функция(d) { возвращаться d.имя }) // устанавливаем идентификатор круга в соответствии с названием страны .attr("сх", функция(d) { возвращаться d.доход / 1000 }) // устанавливаем горизонтальное положение круга в соответствии с доходом .attr("cy", функция(d) { возвращаться d.жизнь }) // устанавливаем вертикальное положение круга в соответствии с продолжительностью жизни .attr("р", функция(d) { возвращаться d.поп / 1000 *2 }) // устанавливаем радиус круга в соответствии с населением страны .attr("наполнять", функция(d) { возвращаться d.цвет }); // устанавливаем цвет круга в соответствии с цветом страны
Сгенерированная графика SVG разработана в соответствии с предоставленными данными.
Добавление узлов с использованием данных
Когда набор данных привязан к документу, использование D3.js обычно следует шаблону, в котором явное .войти()
функция, неявное "обновление" и явное .выход()
функция вызывается для каждого элемента в связанном наборе данных. Любой методы, связанные после .войти()
команда будет вызываться для каждого элемента в наборе данных, который еще не представлен узлом DOM в выбранной области (предыдущий выбрать все()
). Точно так же функция неявного обновления вызывается для всех существующих выбранных узлов, для которых есть соответствующий элемент в наборе данных, и .выход()
вызывается для всех существующих выбранных узлов, которые не имеют элемента в наборе данных для привязки к ним. В документации D3.js есть несколько примеров того, как это работает.[11]
Структура API
D3.js API содержит несколько сотен функций, и их можно сгруппировать в следующие логические единицы:[12]
- Выборы
- Переходы
- Массивы
- Математика
- Цвет
- Напольные весы
- SVG
- Время
- Макеты
- География
- Геометрия
- Поведение
Математика
- Генерация псевдослучайных чисел с помощью нормальный, лог-нормальный, Бейтс, и Ирвин-Холл раздачи.
- Преобразования в 2D: перевод, вращение, перекос и масштабирование.
Массивы
Операции с массивами D3.js созданы для дополнения существующей поддержки массивов в JavaScript (методы мутатора: sort, reverse, splice, shift и unshift; методы доступа: concat, join, slice, indexOf и lastIndexOf; методы итерации: filter, every, forEach, map, some, reduce и reduceRight). D3.js расширяет эту функциональность за счет:
- Функции для поиска минимума, максимума, степени, суммы, среднего, медианы и квантиля массива.
- Функции для упорядочивания, перемешивания, перестановки, объединения и разделения массивов пополам.
- Функции для вложения массивов.
- Функции для работы с ассоциативными массивами.
- Поддержка коллекций карт и наборов.
Геометрия
- Вычисление выпуклый корпус набора точек.
- Вычисление Мозаика Вороного набора точек.
- Поддержка точки квадродерево структура данных.
- Поддержка основных операций над многоугольником.
Цвет
- Поддержка для RGB, HSL, HCL, и Л * а * б * цветовое представление.
- Осветление, затемнение и интерполяция цветов.
Рекомендации
- ^ "Релизы d3". Github.com.
- ^ «Для пользователей Protovis», Mbostock.github.com, получено 18 августа, 2012
- ^ Myatt, Glenn J .; Джонсон, Уэйн П. (сентябрь 2011 г.), «5.10 Дальнейшее чтение», Осмысление данных III: Практическое руководство по проектированию интерактивных визуализаций данных, Хобокен, Нью-Джерси: Джон Уайли и сыновья, п. А – 2, ISBN 978-0-470-53649-0, получено 23 января, 2013
- ^ «Примечания к выпуску», D3.js, получено 22 августа, 2012
- ^ Академический пример: Савва, Манолис; Конг, Николай; Чхаджта, Арти; Ли, Фейфей; Агравала, Маниш; Хир, Джеффри (2011), "ReVision: автоматическая классификация, анализ и переработка графических изображений", Программное обеспечение и технологии пользовательского интерфейса ACM, получено 23 января, 2013
- ^ Босток, Огиевецкий и Хир 2011
- ^ Босток, Огиевецкий и Хир 2011, гл. 3
- ^ Босток, Майк (5 февраля 2012 г.), Мышление с объединениями
- ^ "Ручка Лопеса Хьюго". Codepen.io. Архивировано из оригинал 22 марта 2016 г.. Получено 1 августа, 2016.
- ^ "Изменить скрипку". JSFiddle.net. Получено 1 августа, 2016.
- ^ "Три маленьких кружочка". Mbostock.github.io. Получено 1 августа, 2016.
- ^ d3 (30 июня 2016 г.). "Справочник по API · d3 / d3 Wiki · GitHub". Github.com. Получено 1 августа, 2016.
дальнейшее чтение
- Справочная информация о самом D3.js
- Босток, Майкл; Огиевецкий, Вадим; Хир, Джеффри (октябрь 2011 г.), «D3: документы на основе данных», IEEE Transactions по визуализации и компьютерной графике, IEEE Press, 17 (12): 2301–2309, Дои:10.1109 / TVCG.2011.185, PMID 22034350
- Использование D3.js - начальный уровень
- Мюррей, Скотт (март 2013 г.), Интерактивная визуализация данных для Интернета, введение в проектирование с помощью D3 (1-е изд.), Севастополь, Калифорния: O’Reilly Media, ISBN 978-1-4493-3973-9
- Тиммс, Саймон (сентябрь 2013 г.), Визуализация социальных данных с помощью HTML5 и JavaScript (1-е изд.), Бирмингем: Packt Publishing, ISBN 978-1-7821-6654-2
- Использование D3.js - средний уровень
- Дьюар, Майк (июнь 2012 г.), Стил, Джули; Бланшетт, Меган (ред.), Начало работы с D3, Создание документов на основе данных (1-е изд.), Севастополь, Калифорния: O’Reilly Media, ISBN 978-1-4493-2879-5
- Ци Чжу, Ник (октябрь 2013 г.), Визуализация данных с помощью D3.js Cookbook (1-е изд.), Бирмингем: Packt Publishing, ISBN 978-1-7821-6216-2
- Другие
- Ньютон, Томас; Вильярреал, Оскар (2014), Изучение картографии D3.js, Бирмингем: Packt Publishing, п. 126, ISBN 9781783985609
- Наварро Кастильо, Пабло (2014), Освоение D3.js, Бирмингем: Packt Publishing, п. 352, ISBN 9781783286270
- Теллер, Swizec (2013), Визуализация данных с помощью d3.js, Бирмингем: Packt Publishing, п. 194, г. ISBN 9781782160007
- Виа, Кристоф (2013), Разработка D3.js Edge: создание многоразовых компонентов и диаграмм D3, Bleeding Edge Press, п. 268, ISBN 9781939902023, заархивировано из оригинал 3 сентября 2014 г., получено 27 августа, 2014
- Микс, Элайджа (2014), D3.js в действии, Публикации Мэннинга, п. 325, ISBN 9781617292118
- Маклин, Малкольм (2014), D3 Советы и хитрости, Leanpub, п. 580
- Король, Ричи (2014), Визуальное повествование с D3: Введение в визуализацию данных в JavaScript, Серия данных и аналитики Addison-Wesley, п. 288
- Ролики
- Гопал, Нихил (октябрь 2014 г.), D3 и CoffeeScript: введение программиста Python в веб-визуализации, Севастополь, Калифорния: O’Reilly Media
- Кинг, Ричи (декабрь 2014 г.), Интерактивные уроки по визуализации D3: введение в визуализацию данных в JavaScript, Эддисон-Уэсли Профессионал
связанные проекты
- В Грамматики визуализации Vega и Vega-Lite - это декларативная спецификация визуализации, построенная на частях D3.js.
внешняя ссылка
- Официальный веб-сайт
- Галерея D3.js
- Blocksplorer, поиск блоков по используемым методам
- Библиотеки "многоразовых диаграмм" D3:
- C3 https://c3js.org
- Сюжетно https://plot.ly/javascript