Для создания гистограммы вы должны знать JavaScript и d3.

D3 - это библиотека javascript, используемая для создания визуализации данных. Он может обрабатывать многие типы форматов данных. Пример JSON, CSV, XML, TSV и многие другие. Он предлагает различные типы диаграмм, такие как столбчатые, круговые, линейные и т. Д. Вы можете узнать больше о d3 на его официальном сайте или здесь.

Для создания гистограммы нам потребуются данные (фиктивные данные). Мои данные в формате JSON. Он сообщает о том, сколько времени алфавиты используются в определенном тексте.

[
{
"Letter": "A",
"Freq": 20
},
{
"Letter" : "B",
"Freq": 12
},
{
"Letter" : "C",
"Freq": 47
},
{
"Letter" : "D",
"Freq": 34
},
{
"Letter" : "E",
"Freq" : 54
},
{
"Letter" : "F",
"Freq" : 21
},
{
"Letter" : "G",
"Freq" : 57
},
{
"Letter" : "H",
"Freq" : 31
},
{
"Letter" : "I",
"Freq" : 17
},
{
"Letter" : "J",
"Freq" : 5
},
{
"Letter" : "K",
"Freq" : 23
},
{
"Letter" : "L",
"Freq" : 39
},
{
"Letter" : "M",
"Freq" : 29
},
{
"Letter" : "N",
"Freq" : 33
},
{
"Letter" : "O",
"Freq" : 18
},
{
"Letter" : "P",
"Freq" : 35
},
{
"Letter" : "Q",
"Freq" : 11
},
{
"Letter" : "R",
"Freq" : 45
},
{
"Letter" : "S",
"Freq" : 43
},
{
"Letter" : "T",
"Freq" : 28
},
{
"Letter" : "U",
"Freq" : 26
},
{
"Letter" : "V",
"Freq" : 30
},
{
"Letter" : "X",
"Freq" : 5
},
{
"Letter" : "Y",
"Freq" : 4
},
{
"Letter" : "Z",
"Freq" : 2
}
]

Сначала создайте файл HTML, то есть test.html, вы можете дать имя по своему выбору. Теперь установите DOM (объектную модель документа) для HTML и добавьте CDN для D3, чтобы загрузить библиотеку d3 в наш файл test.html. Вы также можете загрузить библиотеку d3, а затем добавить ее в свой файл.

Теперь нам нужно установить холст для SVG и добавить к нему элемент Scalable Vector Graphics (SVG). SVG используется для создания динамической графики на HTML-страницах. SVG предоставляет различные формы, такие как линии, прямоугольники, круги, эллипсы и т. Д. Следовательно, проектирование визуализаций с помощью SVG дает вам больше гибкости и мощности в том, чего вы можете достичь.

Для добавления SVG мы используем функцию select () d3, чтобы выбрать тело HTML, а затем добавить SVG в тело. Атрибут attr используется для добавления различных атрибутов SVG, таких как высота и ширина SVG. Теперь, если вы запустите эту HTML-страницу в любом настольном браузере, вы ничего не увидите, но не беспокойтесь, если вы проверите эту веб-страницу, вы увидите элемент SVG на вкладке "Элементы".

Теперь нам нужно загрузить данные на нашу HTML-страницу. Для этого нам нужно сохранить указанные выше данные в формате json (data.json).

Примечание. При таком подходе файлы data.json и test.html должны быть размещены в одном каталоге (папке).

Для загрузки данных через d3 нам нужно создать сервер. Причина создания сервера заключается в том, что Chrome и другие браузеры обычно не разрешают XMLHttpRequest или fetch запросы к локальным файлам. Вы можете получить сообщение об ошибке вроде:

Запросы с перекрестным происхождением поддерживаются только для схем протоколов: http, data, chrome, chrome-extension, https

Веб-сервер fenix - это простой способ создать веб-сервер. Инструкции находятся здесь.

Вот код для загрузки данных на HTML-страницу.

Если вы проверите вкладку консоли в проверке элементов, вы увидите данные. После загрузки данных мы используем цикл for для перебора всех данных и вывода их на вкладке консоли, чтобы проверить, загружены ли данные или нет.

Теперь нам нужно создать две шкалы для осей x и y. Масштаб x будет порядковым, а y - линейным. Мы дадим диапазон как для шкалы x, так и для шкалы y. Для x это будет 0, то есть от происхождения до ширины, а для y будет от высоты до источника, то есть 0.

Затем мы определим ось столбчатой ​​диаграммы на основе шкалы, созданной на предыдущем шаге. Ось X будет в нижней части гистограммы, а ось Y - в левой части диаграммы.

После определения диапазона нам нужно также установить область шкалы. Фактическая причина для определения диапазона и домена заключается в том, что мы можем сопоставить наши данные с масштабом, который мы создали ранее. Чтобы данные не выходили за пределы шкалы. Мы будем устанавливать домен из самих данных. Для установки домена оси X мы будем использовать функцию map (), чтобы получить каждую букву из данных, а для оси Y мы получим максимальное значение из данных с помощью max ( ) функция.

Теперь просто добавьте эти оси X и Y в наш SVG с помощью функции call ().

Перезагрузите вкладку браузера, чтобы увидеть изменения.

Следующим шагом будет добавление полосы на ось. Здесь мы получаем данные и добавляем прямоугольник с высотой и шириной в соответствии с данными JSON. Здесь важную роль играет функция S electAll (). Он выбирает все полосы, созданные функцией enter (), и устанавливает для них различные атрибуты, такие как атрибут x и y, для позиционирования полос, а также атрибут ширины и высоты, который упомянут ниже. предназначены для установки высоты и ширины полос.

Если мы перезагрузим нашу страницу, мы увидим полосы на веб-странице в SVG.

Основная полоса готова, но выглядит не очень хорошо. Давайте добавим к нему еще атрибут и CSS.

Обновите ось и штрих-код, как показано ниже.

Также добавьте CSS

И результат будет выглядеть так :-)

Вы можете остановить диаграмму здесь, но здесь чего-то не хватает, например, анимации и всплывающей подсказки. Давайте также добавим эти две вещи.

Если вы не знаете, что такое всплывающая подсказка, посмотрите документацию по d3. Вкратце всплывающая подсказка показывает значение определенной полосы при наведении курсора мыши.

Мы собираемся использовать CDN для подсказки

CDN: - http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js

Примечание. - Добавьте этот CDN после добавления d3 cdn.

После создания SVG добавьте эту функцию подсказки в код и используйте функцию наведения указателя мыши на панель, чтобы вызвать эту функцию подсказки.

Теперь вы также можете увидеть всплывающую подсказку в выводе:

И последнее - добавить анимацию на панели, просто обновите этот код на панели, чтобы получить анимацию.



21 июня 2019 г. 14:44 PM.webm
Изменить описание drive.google.com



Наконец, мы создали гистограмму с D3 и добавили к ней анимацию и всплывающую подсказку.

Если у вас возникли проблемы с созданием гистограммы, вы можете найти мой код в Git-hub здесь