Знакомьтесь это plotly.js — графическая библиотека с открытым исходным кодом

Знакомьтесь это plotly.js — графическая библиотека с открытым исходным кодом

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

  1. Plotly.js использует D3.js (SVG) и WebGL рендеринга графики
  2. Plotly.js это пакет «всё в одном» в котором есть и d3.js и stack.gl модули
  3. Она работает со схемой JSON
  4. Plotly.js поддерживает базовые, статистические, научные, финансовые и картографические макеты

Не говоря уже о том, что эта библиотека на Github собрала более 9000 звезд, что согласитесь, говорит о неплохой активности сообщества.

Знакомьтесь это plotly.js — графическая библиотека с открытым исходным кодом
показатели проекта Plotly.js на Github

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

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

Первым делом подключаем CDN с библиотекой:

<head>
<!-- Include Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script></head>

Далее, давайте построим простой график показывающий числа и их квадраты:

<head>
   <!-- Include Plotly.js -->
   <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="myDiv">
      <!-- Plotly chart will be drawn inside this DIV -->
  </div>
<script>
    var trace = {
        x: [1, 2, 3, 4, 5, 6, 7, 8],
        y: [1, 4, 9, 16, 25, 36, 49, 64],
        mode: 'line'
    };
var data = [ trace ];
   Plotly.newPlot('myDiv', data);
</script>
</body>
Знакомьтесь это plotly.js — графическая библиотека с открытым исходным кодом
График возведения числа во вторую степень

Начальная настройка начинается с подключения библиотеки, между тегами <head></head>
После чего между тегами <body></body> уже вставляем <div id=«myDiv»> в месте в котором нам необходимо отобразить график.

Plotly.new() отвечает за вычерчивание графика в элементе <div id=«myDiv»> в соответствии с заданными x и y в режиме «line».

Возможны следуюшие режимы чертежа графика: «lines», «markers», «text» которые комбинируются друг с другом путём добавления «+» или  «none».

На наших примерах вы увидите отрисовку в режимах(mode) «lines», «markers», «lines+markers», «lines+markers+text» и «none».

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

Знакомьтесь это plotly.js — графическая библиотека с открытым исходным кодом
График возведения числа во вторую степень в режиме отображения markers

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

<head>
   <!-- Include Plotly.js -->
   <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="myDiv">
  <!-- Plotly chart will be drawn inside this DIV --></div>
  <script>
    var trace1 = {
        x: [1, 2, 3, 4],
        y: [10, 15, 13, 17],
        mode: 'lines',
        type: 'scatter'
      };
var trace2 = {
        x: [2, 3, 4, 5],
        y: [16, 5, 11, 9],
        mode: 'marker',
        type: 'scatter'
      };
var trace3 = {
        x: [1, 2, 3, 4],
        y: [12, 9, 15, 12],
        mode: 'lines+markers',
        type: 'scatter'
      };
var data = [trace1, trace2, trace3];
Plotly.newPlot('myDiv', data);
  </script>
</body>
Знакомьтесь это plotly.js — графическая библиотека с открытым исходным кодом

На этом графике все условные обозначения сведены к простейшим:

Знакомьтесь это plotly.js — графическая библиотека с открытым исходным кодом

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

<head>
   <!-- Include Plotly.js -->
   <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
  <script>
    var trace1 = {
          x: [1, 2, 3, 4, 5],
          y: [100, 60, 30, 60, 10],
          mode: 'lines+markers+text',
          type: 'scatter',
          name: 'Beta',
          text: ['Mobile A', 'Mobile B', 'Mobile C', 'Mobile D', 'Mobile E'],
          textposition: 'top center',
          textfont: {
          family:  'Raleway, sans-serif'
        },
        marker: { size: 12 }
      };
var trace2 = {
        x: [1.5, 2.5, 3.5, 4.5, 5.5],
        y: [100, 10, 70, 150, 40],
        mode: 'lines+markers+text',
        type: 'scatter',
        name: 'Alpha',
        text: ['Product A', 'Product B', 'Product C', 'Product D', 'Product E'],
        textfont : {
          family:'Times New Roman'
        },
        textposition: 'bottom center',
        marker: { size: 12 }
      };
var data = [ trace1, trace2 ];
var layout = {
        xaxis: {
          range: [ 0.75, 5.25 ]
        },
        yaxis: {
          range: [0, 200]
        },
        legend: {
          y: 0.5,
          yref: 'paper',
          font: {
            family: 'Arial, sans-serif',
            size: 20,
            color: 'black',
          }
        },
        title:'Data Labels on the Plot'
      };
Plotly.newPlot('myDiv', data, layout);
  </script>
</body>
Знакомьтесь это plotly.js — графическая библиотека с открытым исходным кодом

Компоновка других визуальных атрибутов, таких как заголовок и примечания, будет определена в объекте, который обычно называется слой (layout).

К настоящему времени мы видели несколько примеров линий, давайте построим гистограмму, используя тип ‘bar’.

var data = [{
  x: ['Company X', 'Company Y', 'Company Z'],
  y: [200, 140, 230],
  type: 'bar'
}];
Plotly.newPlot('myDiv', data);
Знакомьтесь это plotly.js — графическая библиотека с открытым исходным кодом

Вы также можете изменить тип отображения графика из предыдущих примеров сменив scatter на bar.

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 }
      };

Пример отображения с включенной прозрачностью бочонка ‘bar’:

Знакомьтесь это plotly.js — графическая библиотека с открытым исходным кодом

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

Теперь опробуем построение Метеоритной карты используя всего лишь несколько строк кода.

Мы использовали данные из bcdunbar’s github  и разбили весь процесс на несколько шагов.

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

Добавим plotly.js в ваш HTML файл, в нём как видите ниже подключается JavaScript файл, div элемент и плейсхолдер (placeholder) для скриптов.

<html>
<head>
  <!-- Include Plotly.js file from CDN -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- DIV will be used for charts -->
<div id="mapDiv"></div>
  <script>
  // JS code for plot
  </script>
</div>
</body>
</html>

Шаг 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. Получаем Token

Получим здесь токен Mapbox.

Plotly.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 — графическая библиотека с открытым исходным кодом

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

Перевод статьи автора Praveen Dubey: An introduction to plotly.js — an open source graphing library

Знакомьтесь это plotly.js — графическая библиотека с открытым исходным кодом

Гик, хакинтошник, линуксоид, считаю что немного умею в вебдизайн и сайтостроение