Введение в Plotly.js - библиотека графики с открытым исходным кодом

Автор оригинала: FreeCodeCamp Community Member.

Praven Dubey

Plotly.js Библиотека идеально подходит для приложений JavaScript, которые используют графики и диаграммы. Есть несколько причин рассмотреть возможность использования его для вашего следующего проекта визуализации данных:

Plotly.js использует как D3.js (SVG), так и WebGL для графического рендеринга
Plotly.js – это «все в одном пакете» с модулями D3.js и Stack.gl
Работает с JSON Schema
Plotly.js поддерживает базовые, статистические, научные, финансовые и картографические карты.

Также более 9000 звезд на открытом исход Github является сильным показателем своего роста сообщества.

Использование и примеры

Давайте смотрим на настройку и несколько примеров для лучшего и практического понимания.

Во-первых, включите файл с его CDN.

Далее, давайте построим небольшой график, который показывает номера и их квадраты:

Код для генерации этого графика ниже:

Основная настройка может быть выполнена с включением файла, элементом DOM и сценарием для построения.

После включения библиотеки Plotly.js в <он AD>, мы определили Пустой

построить график.

Pultly.new () Рисует новый участок в IV> Элемент, перезаписи любой существующий G сюжет и в этом случае мы используется Mydiv. Вход будет быть

элемент и некоторые данные.

Обратите внимание на включение Режим в трассировке переменной. Это может быть любая комбинация «Линии» , «Маркеры» , «Текст» присоединился к "+" Или "Нет" Отказ

Примеры включают «Линии» , «Маркеры» , «Линии + маркеры» , «Линии + маркеры + текст» , "Нет" Отказ

Здесь мы использовали Маркеры Отказ Обратите внимание, что вы получаете только очки, отмеченные в координатах графика и Не видите подключенную линию по всем точкам.

Сюжет несколько строк, просто добавляя значения в данные Переменная:

Легенда На графике связано с графически отображаемыми данными в области графика графика.

На данный момент у нас нет ярлыков, а легенды выглядят:

Давайте обновим их с помощью таких параметров, как текст , TextFont , Текстовоеpostion Для настройки наших данных этикетки. Они должны быть переданы отдельными наборами данных.

Расположение других визуальных атрибутов, таких как заголовок и аннотации, будут определены в объекте, обычно называемом Макет Отказ

К настоящему времени мы видели некоторые примеры строки, давайте быстро построим гистограмму, используя «Бар» как тип.

var data = [{  x: ['Company X', 'Company Y', 'Company Z'],  y: [200, 140, 230],  type: 'bar'}];

Plotly.newPlot('myDiv', data);

Вы также можете изменить Тип В приведенных выше данные, показанные для продуктов и мобильных устройств, изменяя разброс к бар Отказ

var trace = {        x: [1.5, 2.5, 3.5, 4.5, 5.5],        y: [100, 10, 70, 150, 40],        mode: 'lines+markers+text',        type: 'bar',        name: 'Alpha',        text: ['Product A', 'Product B', 'Product C', 'Product D', 'Product E'],        textfont : {          family:'Times New Roman'        },        textposition: 'top',        marker: { size: 12 }      };

Вот один пример, который меняет непрозрачность бара:

var trace2 = {          x: ['Alpha', 'Beta', 'Gamma'],          y: [100, 200, 500],          type: 'bar',          name: 'Opacity Example',          marker: {            color: 'rgb(204,204,204)',            opacity: 0.5          }};

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

Давайте продолжим построение набора данных Meteor используя только несколько строк кода.

Я использую набор данных из Github Bcdunbar И постараюсь сломать весь процесс на несколько шагов.

Давайте начнем.

Шаг 1. Первоначальная настройка

Добавить Platly.js в вашем файле HTML. Это включает в себя файл JavaScript, пустой Div Элемент и заполнитель для скриптов.

Шаг 2. Набор данных

Поскольку наш набор данных находится в формате CSV, мы можем использовать Plotly.d3.csv Отказ Он внутренне читает данные CSV из вызова AJAX.

Код обертки для построения:

Plotly.d3.csv('https://raw.githubusercontent.com/bcdunbar/datasets/master/meteorites_subset.csv', function(err, rows){

Plotly.plot('mapDiv', data, layout);

});

Шаг 3. Токен доступа

Получите токен доступа Mapbox, мы будем использовать из здесь Отказ

Pultly.plot нуждается в двух главных вещах: данные и Макет что определяет, какие данные будут использоваться данные и как оно должно быть нанесено на экран.

Шаг 4. Макет карты

var layout = {  title: 'Demonstration of Meteorite Landing using Plotly.js',  font: { color: 'white'  },  dragmode: 'zoom',   mapbox: {    center: {  lat: 38.03697222,   lon: -90.70916722    },     style: 'light',     zoom: 2  },   paper_bgcolor: '#191A1A',   plot_bgcolor: '#191A1A',   showlegend: true,  annotations: [{  x: 0,  y: 0,    text: 'NASA',    showarrow: false  }]};

Обратите внимание, что мы используем Mapbox Чтобы определить все конфиги карты, включая центр, уровень масштабирования, цвет и легенды.

Далее добавьте токен, который мы создали на шаге 3 с помощью:

Plotly.setPlotConfig({    mapboxAccessToken: 'your token here'});

Шаг 5. Данные процесса

Последнее, что нам нужно, это добавить наш объект данных из источника CSV:

var classArray = unpack(rows, 'class');  var classes = [...new Set(classArray)];

function unpack(rows, key) {    return rows.map(function(row) { return row[key]; });  }

var data = classes.map(function(classes) {    var rowsFiltered = rows.filter(function(row) {        return (row.class === classes);    });    return {       type: 'scattermapbox',       name: classes,       lat: unpack(rowsFiltered, 'reclat'),       lon: unpack(rowsFiltered, 'reclong')    };  });

Теперь у нас есть данные, макет, токен и карта ... Вот конечный результат:

Это была демонстрация построения с пошаговым подходом на построение набора данных карты с использованием Plotly.js. Вы можете найти много примеров на Сюжер Документация для начала.

Надеюсь, это дало вам хорошее введение в заговорную JS.

Обязательно бросить свой отзыв ниже, и код для этого можно найти на моем Github Отказ