Data Visualization on Visx (D3 + React) for Website

Our company is engaged in the development, support and maintenance of sites of any complexity. From simple one-page sites to large-scale cluster systems built on micro services. Experience of developers is confirmed by certificates from vendors.
Development and maintenance of all types of websites:
Informational websites or web applications
Business card websites, landing pages, corporate websites, online catalogs, quizzes, promo websites, blogs, news resources, informational portals, forums, aggregators
E-commerce websites or web applications
Online stores, B2B portals, marketplaces, online exchanges, cashback websites, exchanges, dropshipping platforms, product parsers
Business process management web applications
CRM systems, ERP systems, corporate portals, production management systems, information parsers
Electronic service websites or web applications
Classified ads platforms, online schools, online cinemas, website builders, portals for electronic services, video hosting platforms, thematic portals

These are just some of the technical types of websites we work with, and each of them can have its own specific features and functionality, as well as be customized to meet the specific needs and goals of the client.

Our competencies:
Development stages
Latest works
  • image_website-b2b-advance_0.png
    B2B ADVANCE company website development
    1215
  • image_web-applications_feedme_466_0.webp
    Development of a web application for FEEDME
    1161
  • image_websites_belfingroup_462_0.webp
    Website development for BELFINGROUP
    852
  • image_ecommerce_furnoro_435_0.webp
    Development of an online store for the company FURNORO
    1043
  • image_crm_enviok_479_0.webp
    Development of a web application for Enviok
    823
  • image_bitrix-bitrix-24-1c_fixper_448_0.png
    Website development for FIXPER company
    815

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.