Выбирайте из более чем 40 типов диаграмм

В последние годы визуализация данных стала одним из основных инструментов принятия решений в здравоохранении, некоммерческих организациях и многих других секторах. Используя визуализацию данных, такую ​​как диаграммы и карты, мы можем представлять данные графически. Это помогает людям быстро делать выводы на основе тенденций и закономерностей.

В Интернете доступно множество инструментов для визуализации данных. Из обширного списка этих инструментов plotly.js - один из них. Это библиотека для построения графиков с открытым исходным кодом на JavaScript, построенная на основе d3.js и stack.gl. Эта библиотека поставляется с широким спектром типов диаграмм, включая 3D-диаграммы, графики и карты SVG.

Я использовал plotly.js для создания информационных панелей для визуализации данных с помощью интерактивных диаграмм из его богатой графической библиотеки. Я предпочитаю Plotly.js другим библиотекам, потому что он прост в использовании и имеет надежную документацию. Из этого поста вы познакомитесь с некоторыми основными концепциями и командами plotly.js, которые научат вас визуализировать данные.

Настраивать

Во-первых, нам нужно добавить plotly.js в HTML-файл. Вы можете либо скачать файл, либо воспользоваться ссылкой CDN. Здесь для удобства мы будем использовать ссылку CDN. После этого нам понадобится пустой DIV под названием test, чтобы прикрепить диаграмму. Наконец, нам нужно добавить код JavaScript, который будет рисовать диаграмму. Теперь сохраните следующий код в файле HTML, например test.html.

Загрузив этот файл в свой браузер, вы увидите линейный график, подобный приведенному ниже. Если вы ничего не видите, попробуйте открыть консоль разработчика браузера. Это поможет вам решить проблему.

Теперь давайте разберем тег скрипта на отдельные части. Во-первых, у нас есть массив data, содержащий хеш. Внутри хеша у нас есть две пары ключ-значение x и y, представляющие значение для x-axis и y-axis. За ним следует хеш layout, где мы определили размер шрифта для диаграммы. Хеш config используется для добавления дополнительных конфигураций в диаграмму. Поскольку мы хотим, чтобы диаграмма была отзывчивой, мы устанавливаем значение true. Более подробную информацию о конфигурациях вы можете найти здесь. Теперь нам нужно добавить нашу диаграмму в элемент HTML. В данном случае это DIV with id test. Наконец, мы можем создать нашу диаграмму, используя метод Plotly.newPlot, передав элемент DIV DOM, массив данных, макет и хэш конфигурации в качестве аргументов.

Давайте посмотрим еще на несколько примеров.

Карты

Во-первых, нам нужно определить URL-адрес данных. Метод Plotly.d3.json может считывать данные JSON с предоставленного URL-адреса. Мы можем настроить тип диаграммы с помощью ключа type внутри хеша массива data. Хэш также принимает данные latitude, longitude и hoverinfo. hoverinfo используется для отображения информации при наведении курсора на координаты карты. Здесь мы показываем информацию о широте и долготе. Вы можете найти больше опций здесь. Внутри хэша layout есть mapbox и margin. Опции mapbox говорят сами за себя. Если вам нужны дополнительные настройки маржи, отметьте здесь. Хэш config содержит ключи mapboxAccessToken и responsive. Вы можете получить значение токена здесь, и мы уже рассмотрели использование ключа responsive.

Запустив приведенный выше код в браузере, мы можем увидеть карту, подобную приведенной ниже.

Круговые диаграммы

Для создания круговой диаграммы мы можем настроить тип диаграммы с помощью ключа type внутри хэша массива data. Нам также необходимо определить значения для каждого среза. Для этого нам нужно использовать values и labels в качестве ключей.

Запустив приведенный выше код в браузере, мы можем увидеть круговую диаграмму, подобную приведенной ниже.

Гистограммы

Для создания гистограммы мы можем настроить тип диаграммы с помощью ключа type внутри хэша массива data. Нам также необходимо определить значения для каждого бара. Для этого нам нужно использовать x и y в качестве ключей.

Запустив приведенный выше код в браузере, мы можем увидеть гистограмму, подобную приведенной ниже.

Пузырьковые диаграммы

Для создания пузырьковой диаграммы мы можем настроить тип режима с помощью ключа mode внутри хэша массива data. Нам также необходимо определить значения для центра каждого круга. Для этого нам нужно использовать x и y в качестве ключей. Чтобы установить размер кругов, используйте клавишу size. Как видите, последний кружок не отображается, потому что мы не указали размер.

Запустив приведенный выше код в браузере, мы можем увидеть пузырьковый график, подобный приведенному ниже.

Заворачивать

Анализ данных - важная часть многих предприятий. Когда становится проще обрабатывать данные, мы можем улучшить наши суждения и принятие решений, и это возможно, когда у нас будет эффективный способ отображения данных. Plotly.js - отличный инструмент для достижения этой коммерческой цели. Это может помочь вам найти скрытые идеи, которые иначе трудно обнаружить с помощью традиционного подхода. Надеюсь, этот пост поможет вам начать работу с plotly.js.