При побудові аналітичного дашборда з великою кількістю метрик ми зіткнулися з проблемою: стандартні бібліотеки графіків (Chart.js, Highcharts) не справлялися з відображенням 3D-поверхонь і складних статистичних розподілів. Plotly вирішив це завдання — бібліотека надає потужні інструменти для наукових та аналітичних візуалізацій: 3D-графіки, contour maps, statistical plots (box, violin, histogram), geographic maps. Наші інженери використовують Plotly у продакшені більше п'яти років і розробили десятки дашбордів для e-commerce, fintech та наукових проєктів. Економія бюджету на розробку сягає 30–50% завдяки готовій інтерактивності та JSON-конфігурації.
Згідно з офіційною документацією, бібліотека підтримує рендеринг через WebGL, що забезпечує продуктивність при роботі з десятками тисяч точок. Це ключова перевага перед бібліотеками на основі SVG, які гальмують на великих датасетах.
Чому Plotly кращий за конкурентів для наукової візуалізації?
Plotly виграє завдяки вбудованій інтерактивності (zoom, pan, hover) та підтримці 3D-рендерингу без зовнішніх залежностей. На відміну від D3.js, де кожен елемент потрібно описувати вручну, Plotly генерує SVG/WebGL через JSON-конфігурацію. Це скорочує час розробки в два-три рази. А Chart.js, при всій простоті, не підтримує surface-графіки та статистичні розподіли.
| Тип графіка | Plotly | Chart.js | D3.js |
|---|---|---|---|
| 3D-поверхні | + | - | ± (складно) |
| Box/Violin | + | - | ± |
| Геокарти | + | - | + |
| Інтерактивність | вбудована | базова | ручна |
| Продуктивність (10k+ точок) | WebGL | Canvas | SVG |
Як прискорити завантаження Plotly-графіків? Покрокова інструкція
Plotly важить ~3MB, але ми використовуємо полегшену збірку plotly.js-basic-dist (включає scatter, bar, box, surface) та динамічний імпорт. Це знижує початковий bundle до ~500KB. Для React-застосунків застосовуємо next/dynamic з відключенням SSR:
// Plotly важить ~3MB — используем dynamic import
const Plot = dynamic(() => import('react-plotly.js'), {
ssr: false,
loading: () => <ChartSkeleton />
});
Додатково налаштовуємо lazy loading через Intersection Observer — графіки завантажуються тільки коли потрапляють у viewport. Економія трафіку сягає 40% для сторінок з трьома і більше графіками. Дотримуйтеся цих кроків для оптимізації:
- Визначте необхідні типи графіків і виберіть відповідну збірку (basic, cartesian, full).
- Налаштуйте dynamic import з React.lazy або next/dynamic, відключивши SSR.
- Застосуйте Intersection Observer для лінивого завантаження графіків за межами viewport.
- Використовуйте tree-shaking та code splitting, щоб виключити невикористовуваний код.
- Протестуйте продуктивність за допомогою Lighthouse: цільові LCP < 2.5 с, TBT < 200 мс.
Вибір відповідної збірки Plotly
Щоб точно підібрати розмір бандла, порівняйте збірки:
| Збірка | Включені типи | Розмір (min) |
|---|---|---|
| plotly.js-basic-dist | scatter, bar, box, surface, histogram | ~500 KB |
| plotly.js-cartesian-dist | всі 2D-графіки | ~1.2 MB |
| plotly.js-dist (повна) | всі типи, включаючи 3D та геокарти | ~3 MB |
Ми рекомендуємо basic-dist для більшості завдань. Якщо потрібні геокарти або 3D — використовуйте dist з динамічним імпортом.
Базова інтеграція
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%' }}
/>
);
}
Які типові помилки допускають при інтеграції Plotly?
Найчастіша — завантаження повної збірки без потреби, що збільшує бандл на 2.5 MB. Друга — відсутність lazy loading: всі графіки завантажуються одразу, знижуючи LCP та FID. Третя — ігнорування конфігурації responsive, через що графіки не адаптуються на мобільних. Щоб уникнути цього, завжди починайте з basic-dist, додавайте динамічний імпорт і тестуйте на реальних пристроях. Застосовуйте пропс config: { responsive: true } та style={{ width: '100%' }}.
Що входить у роботу
При замовленні розробки інтерактивних графіків на Plotly ми надаємо:
- Узгодження прототипів візуалізацій з вашою командою.
- Інтеграцію в існуючий React/Next.js додаток або створення окремого дашборду.
- Оптимізацію продуктивності (lazy loading, tree-shaking).
- Налаштування інтерактивності (фільтри, дрил-даун, експорт).
- Документацію щодо використання та адаптації.
- Підтримку протягом 30 днів після здачі.
Терміни
Типові терміни розробки:
- Простий scatter/bar графік — від 1 дня.
- Комплексний дашборд з 3D та subplots — 4–6 днів.
- Повноцінний аналітичний додаток — від 10 днів.
Вартість розраховується індивідуально. Отримайте консультацію: напишіть нам з описом завдання, і ми запропонуємо рішення. Наш досвід гарантує якість: ми реалізували понад 30 проєктів з Plotly для різних галузей. Замовте розробку під ключ — і ви отримаєте візуалізацію, яка прискорить прийняття рішень.