Разработка интерактивных графиков на Plotly для сайта

Разработка интерактивных графиков на Plotly для сайта

Plotly — библиотека для научных и аналитических визуализаций: 3D-графики, contour maps, statistical plots (box, violin, histogram), geographic maps. Используется в data science приложениях и аналитических дашбордах.

Установка

npm install plotly.js-dist react-plotly.js
# Или облегчённая версия:
npm install plotly.js-basic-dist react-plotly.js

Базовая интеграция

import Plot from 'react-plotly.js';

function ScatterMatrix({ data }) {
  return (
    <Plot
      data={[{
        type: 'scatter',
        mode: 'markers',
        x: data.map(d => d.pageViews),
        y: data.map(d => d.conversions),
        text: data.map(d => d.pageName),
        marker: {
          size: data.map(d => Math.sqrt(d.revenue) / 10),
          color: data.map(d => d.bounceRate),
          colorscale: 'RdYlGn',
          showscale: true,
          colorbar: { title: 'Bounce Rate, %' }
        },
        hovertemplate:
          '<b>%{text}</b><br>Визиты: %{x}<br>Конверсия: %{y:.1f}%<extra></extra>'
      }]}
      layout={{
        xaxis: { title: 'Просмотры страниц', type: 'log' },
        yaxis: { title: 'Конверсия, %' },
        margin: { t: 20 },
        height: 400
      }}
      config={{ responsive: true, displaylogo: false }}
      style={{ width: '100%' }}
    />
  );
}

3D Surface Plot

function Surface3D({ zData, xLabels, yLabels }) {
  return (
    <Plot
      data={[{
        type: 'surface',
        z: zData,
        x: xLabels,
        y: yLabels,
        colorscale: 'Viridis',
        contours: {
          z: { show: true, usecolormap: true, highlightcolor: '#42f462', project: { z: true } }
        }
      }]}
      layout={{
        title: '3D Карта конверсий',
        scene: {
          xaxis: { title: 'Час дня' },
          yaxis: { title: 'День недели' },
          zaxis: { title: 'Конверсия, %' }
        },
        height: 500
      }}
      config={{ responsive: true }}
      style={{ width: '100%' }}
    />
  );
}

Statistical: Box Plot и Violin

function StatisticsPlot({ groups }) {
  const traces = groups.map(group => ({
    type: 'violin' as const,
    name: group.name,
    y: group.values,
    box: { visible: true },
    meanline: { visible: true },
    points: 'outliers'
  }));

  return (
    <Plot
      data={traces}
      layout={{
        title: 'Распределение времени отклика по сервисам',
        yaxis: { title: 'Время, мс', zeroline: false },
        violingap: 0.3,
        height: 400
      }}
      style={{ width: '100%' }}
    />
  );
}

Subplots (несколько графиков в сетке)

function DashboardSubplots({ salesData, trafficData, funnelData }) {
  return (
    <Plot
      data={[
        // Первый subplot
        {
          type: 'bar',
          x: salesData.labels,
          y: salesData.values,
          name: 'Продажи',
          xaxis: 'x',
          yaxis: 'y'
        },
        // Второй subplot
        {
          type: 'scatter',
          mode: 'lines+markers',
          x: trafficData.dates,
          y: trafficData.sessions,
          name: 'Сессии',
          xaxis: 'x2',
          yaxis: 'y2'
        },
        // Третий subplot
        {
          type: 'funnel',
          y: funnelData.stages,
          x: funnelData.values,
          name: 'Воронка',
          xaxis: 'x3',
          yaxis: 'y3'
        }
      ]}
      layout={{
        grid: { rows: 1, columns: 3, pattern: 'independent' },
        height: 400,
        showlegend: false
      }}
      style={{ width: '100%' }}
    />
  );
}

Lazy Loading для тяжёлого bundle

// Plotly весит ~3MB — используем dynamic import
const Plot = dynamic(() => import('react-plotly.js'), {
  ssr: false,
  loading: () => <ChartSkeleton />
});

Сроки

Scatter plots, 3D-графики, statistical plots и subplots — 4–6 дней.