Data Visualization on Visx (D3 + React) for Website

Building Data Visualization with Visx (D3 + React) for Websites

Visx is a set of low-level React primitives from Airbnb for building custom visualizations. Not ready-made components like <LineChart>, but building blocks: scales, shapes, axes, tooltips. Use when you need a unique visualization that can't be implemented with Chart.js or Recharts.

Installation

npm install @visx/scale @visx/shape @visx/axis @visx/grid @visx/tooltip @visx/event

Custom Line Chart with 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('en')} ₽
          </div>
        </TooltipWithBounds>
      )}
    </div>
  );
}

ParentSize for Responsiveness

import { ParentSize } from '@visx/responsive';

function ResponsiveChart({ data }) {
  return (
    <ParentSize>
      {({ width, height }) => (
        <CustomLineChart data={data} width={width} height={height || 300} />
      )}
    </ParentSize>
  );
}

When to Use Visx Instead of Recharts

Visx is justified for:

• Non-standard shapes (hexbin, treemap with custom layouts)
• Interactive infographics with multiple related elements
• When you need full control over SVG

Recharts/Chart.js — for standard charts without special requirements.

Timeline

Custom visualization with visx (1 type) — 3–5 days. Set of 3–4 different types — 1.5–2 weeks.