Кастомна візуалізація даних на Visx (D3 + React)

Коли потрібна кастомна візуалізація на Visx?

Типовий запит від клієнта: відобразити динаміку курсу акцій за останній рік з можливістю наближення та тултипами. Recharts не справляється з нестандартною анімацією, Chart.js гальмує на 50 000 точках. Потрібна кастомна візуалізація на Visx — бібліотеці Airbnb, що поєднує гнучкість D3.js з парадигмою React. Visx — це інструмент для React-візуалізацій, який поєднує D3.js із зручністю React-компонентів, дозволяючи створювати кастомні графіки та інтерактивні діаграми. Ми використовуємо його в проектах з датасетами до 100 000 записів, забезпечуючи плавну анімацію та миттєве оновлення. Наша компанія має понад 5 років досвіду в розробці кастомних візуалізацій та реалізувала більше 50 проектів на Visx.

Які проблеми вирішує Visx?

Обмежена кастомізація готових бібліотек

Recharts пропонує безліч конфігурацій, але будь-яке відхилення від шаблону перетворюється на хак з перевизначенням пропсів. Visx дає повний контроль над SVG-примітивами: ви керуєте кожним елементом, шкалами та переходами.

Продуктивність на великих обсягах даних

D3-рендеринг через React-життєвий цикл може викликати зайві ререндери. Visx оптимізує це за рахунок чистих компонентів та мемоізації. Visx показує продуктивність у 2-3 рази вище, ніж Chart.js, при роботі з датасетами понад 10 000 точок. На практиці ми досягаємо 60 FPS на датасетах з 10 000 точок.

Інтеграція з React-додатком

Visx-компоненти — це звичайні React-компоненти, які легко вбудовуються в будь-яку архітектуру: Next.js, CRA, Vite. Не потрібно підключати окремий рендерер або контекст.

Як Visx вирішує задачу кастомізації?

Visx пропонує низькорівневі примітиви: scaleTime, scaleLinear, LinePath, AreaClosed, AxisLeft, AxisBottom. З них збирається будь-який графік без огляду на шаблони. Для інтерактиву — хук useTooltip та події миші. Весь код — TypeScript з типізацією даних. Використання SVG-примітивів дозволяє гнучко керувати рендерингом, а шкали (scaleTime, scaleLinear) забезпечують точне масштабування даних. Мемоізація та чистота компонентів мінімізують перемальовування.

Візьмемо типову задачу: лінійний графік з тултипом та зоною заливки. Приклад реалізації на Visx (фрагмент):

import { scaleTime, scaleLinear } from '@visx/scale'; import { LinePath, AreaClosed } from '@visx/shape'; import { AxisLeft, AxisBottom } from '@visx/axis'; import { GridRows, GridColumns } from '@visx/grid'; import { useTooltip, TooltipWithBounds, defaultStyles } from '@visx/tooltip'; import { localPoint } from '@visx/event'; import { bisector } from 'd3-array'; import { curveMonotoneX } from 'd3-shape'; interface DataPoint { date: Date; value: number; } const bisectDate = bisector<DataPoint, Date>(d => d.date).left; function CustomLineChart({ data, width, height, margin = { top: 20, right: 20, bottom: 40, left: 60 } }: { data: DataPoint[]; width: number; height: number; margin?: { top: number; right: number; bottom: number; left: number }; }) { const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const xScale = scaleTime({ range: [0, innerWidth], domain: [ Math.min(...data.map(d => d.date.getTime())), Math.max(...data.map(d => d.date.getTime())) ] }); const yScale = scaleLinear({ range: [innerHeight, 0], domain: [0, Math.max(...data.map(d => d.value)) * 1.1], nice: true }); const { tooltipData, tooltipLeft, tooltipTop, showTooltip, hideTooltip } = useTooltip<DataPoint>(); const handleTooltip = (event: React.MouseEvent<SVGRectElement>) => { const { x } = localPoint(event) || { x: 0 }; const x0 = xScale.invert(x - margin.left); const index = bisectDate(data, x0, 1); const d0 = data[index - 1]; const d1 = data[index]; const d = !d1 || Math.abs(x0.getTime() - d0.date.getTime()) < Math.abs(x0.getTime() - d1.date.getTime()) ? d0 : d1; showTooltip({ tooltipData: d, tooltipLeft: xScale(d.date) + margin.left, tooltipTop: yScale(d.value) + margin.top }); }; return ( <div style={{ position: 'relative' }}> <svg width={width} height={height}> <g transform={`translate(${margin.left}, ${margin.top})`}> <GridRows scale={yScale} width={innerWidth} stroke="#f0f0f0" /> <GridColumns scale={xScale} height={innerHeight} stroke="#f0f0f0" /> <defs> <linearGradient id="areaGradient" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" stopColor="#3b82f6" stopOpacity={0.3} /> <stop offset="100%" stopColor="#3b82f6" stopOpacity={0} /> </linearGradient> </defs> <AreaClosed data={data} x={d => xScale(d.date)} y={d => yScale(d.value)} yScale={yScale} fill="url(#areaGradient)" curve={curveMonotoneX} /> <LinePath data={data} x={d => xScale(d.date)} y={d => yScale(d.value)} stroke="#3b82f6" strokeWidth={2} curve={curveMonotoneX} /> <AxisLeft scale={yScale} tickFormat={v => `${(v as number / 1000).toFixed(0)}k`} /> <AxisBottom top={innerHeight} scale={xScale} tickFormat={d => format(d as Date, 'dd MMM')} /> <rect width={innerWidth} height={innerHeight} fill="transparent" onMouseMove={handleTooltip} onMouseLeave={hideTooltip} /> {tooltipData && ( <g> <line x1={tooltipLeft! - margin.left} x2={tooltipLeft! - margin.left} y1={0} y2={innerHeight} stroke="#3b82f6" strokeDasharray="4,4" strokeWidth={1} /> <circle cx={tooltipLeft! - margin.left} cy={tooltipTop! - margin.top} r={5} fill="#3b82f6" stroke="white" strokeWidth={2} /> </g> )} </g> </svg> {tooltipData && ( <TooltipWithBounds top={tooltipTop} left={tooltipLeft} style={{ ...defaultStyles, background: '#1e293b', color: 'white' }} > <div> <strong>{format(tooltipData.date, 'dd.MM.yyyy')}</strong> <br /> {tooltipData.value.toLocaleString('uk')} ₴ </div> </TooltipWithBounds> )} </div> ); } 

ParentSize для адаптивності

import { ParentSize } from '@visx/responsive'; function ResponsiveChart({ data }) { return ( <ParentSize> {({ width, height }) => ( <CustomLineChart data={data} width={width} height={height || 300} /> )} </ParentSize> ); } 

Чому Visx, а не Chart.js?

Visx кращий за Chart.js у ситуаціях, де потрібна нестандартна форма графіка або складні інтерактивні сценарії. Chart.js простіший у налаштуванні та швидший для простих діаграм, але його архітектура гірше масштабується під кастомні завдання. Visx дає повний доступ до SVG, що дозволяє реалізувати будь-яку візуалізацію. Наші клієнти економлять до 40% часу на розробці складних дашбордів за рахунок використання Visx. Середня вартість одного типу візуалізації — 1200 $, комплекту з 3-4 типів — 3000-4500 $.

Порівняння Visx та Recharts

Типові помилки при роботі з Visx

• Пропуск мемоізації шкал. Шкали потрібно створювати всередині useMemo або поза компонентом, інакше кожен ререндер буде перестворювати їх, що веде до втрати продуктивності.
• Ігнорування ParentSize. Без адаптивного контейнера графік не реагуватиме на зміну розмірів вікна, що ламає UX на мобільних пристроях.
• Некоректна обробка країв даних. Якщо дані містять NaN або null, Visx може викинути помилку. Завжди фільтруйте дані перед передачею в компоненти.
• Забули про accessibility. SVG-графіка повинна бути доступна для скрінрідерів: додавайте role="img" та aria-label.

Як створити кастомний графік з нуля?

1. Визначте шкали — scaleTime для часу, scaleLinear для значень.
2. Опишіть геометрію — LinePath для лінії, AreaClosed для заливки.
3. Додайте осі — AxisLeft та AxisBottom.
4. Реалізуйте тултип — використовуйте хук useTooltip та події миші.
5. Обгорніть в адаптивний контейнер — ParentSize для автоматичного ресайзу.

Процес роботи та терміни

Повний цикл розробки одного типу візуалізації займає від 3 до 5 днів. Комплект з 3–4 різних типів — від 1.5 до 2 тижнів. Середня вартість одного типу — 1200 $, комплекту — 3000-4500 $. Вартість робіт може змінюватись в залежності від складності інтерактиву та обсягу даних. Ми гарантуємо якість коду та документацію, а наш досвід роботи з Visx перевищує 4 роки.

Що входить в роботу?

Ми виконуємо розробку візуалізації даних на Visx під ключ:

• аналіз вимог та проектування макету;
• написання коду з нуля на React + TypeScript;
• тестування на реальних даних (до 100 000 записів);
• адаптація під мобільні екрани та retina-дисплеї;
• документація в README та інлайн-коментарях;
• передача доступів до репозиторію та деплою;
• навчання вашої команди роботі з Visx (вебінар 1 година).

Зв'яжіться з нами для обговорення вашого завдання. Отримайте консультацію з кастомної візуалізації.