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

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

Plotly — бібліотека для наукових та аналітичних візуалізацій: 3D-графіки, contour maps, статистичні графіки (box, violin, histogram), географічні карти. Використовується в додатках 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%' }}
    />
  );
}

Статистичні: 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={[
        {
          type: 'bar',
          x: salesData.labels,
          y: salesData.values,
          name: 'Продажі',
          xaxis: 'x',
          yaxis: 'y'
        },
        {
          type: 'scatter',
          mode: 'lines+markers',
          x: trafficData.dates,
          y: trafficData.sessions,
          name: 'Сесії',
          xaxis: 'x2',
          yaxis: 'y2'
        },
        {
          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%' }}
    />
  );
}

Ліниве завантаження для важкого bundle

const Plot = dynamic(() => import('react-plotly.js'), {
  ssr: false,
  loading: () => <ChartSkeleton />
});

Часові межи

Scatter plots, 3D-графіки, статистичні графіки та subplots — 4–6 днів.