Skip to main content

VisX

What is VisX​

VisX is a collection of low-level, composable React visualization primitives built on D3 submodules. Created and maintained by Airbnb, it is MIT licensed with ~19.5k GitHub stars. VisX consists of ~30 independently installable @visx/* packages — @visx/shape, @visx/scale, @visx/axis, @visx/geo, @visx/hierarchy, @visx/network, @visx/xychart, and more — so you install only what you need.

The library is written in TypeScript with first-class type support. The mental model: D3's math and algorithms wrapped in React components. You get D3's computational power without its imperative DOM manipulation.

caution

Advanced, situational option. Our defaults are Recharts (React dashboards) and Apache ECharts (complex/big-data charts). Reach for VisX only when you need fine-grained compositional control that those libraries can't provide.

When VisX shines​

  • Bespoke / novel visualizations — chart types that don't exist as pre-built components in Recharts or Apache ECharts (custom network diagrams, annotation-heavy charts, artistic data viz).
  • Pixel-perfect design requirements — when a designer hands you a very specific chart design that standard libraries can't match without fighting their abstractions.
  • Bundle-sensitive applications — import only the @visx/* packages you need (a few KB each) instead of pulling in an entire chart library.
  • Geographic and hierarchical visualizations — @visx/geo and @visx/hierarchy provide clean React wrappers for D3-geo projections and tree/treemap/sunburst layouts.
  • Teams already familiar with D3 — VisX preserves D3 concepts (scales, domains, ranges) while providing React-idiomatic rendering.
  • @visx/xychart — bridges the gap for common XY patterns (line, bar, area, scatter) with built-in axes, tooltips, and themes, offering a middle ground between raw primitives and Recharts-level convenience.

Why it's not our default​

  • Assembly required — a basic line chart in Recharts needs ~10 lines of JSX. The same chart in VisX requires manually setting up scales, axes, line shapes, tooltips, and responsive containers — often 50–100+ lines.
  • Requires D3 knowledge — developers need to understand scales, domains, ranges, and SVG fundamentals, even though they don't write raw D3.
  • Manual interactivity — tooltips, legends, zoom, and data brushing require manual composition (or stepping up to @visx/xychart).
  • Smaller community — ~19.5k GitHub stars vs Recharts' ~26.8k and Apache ECharts' ~65.9k; fewer tutorials, examples, and Stack Overflow answers.
  • Overkill for standard dashboards — Recharts via shadcn/ui gets you there in minutes, not hours.

When to use​

  • Custom or novel chart types not available in Recharts or Apache ECharts
  • Design-driven data visualization — journalism-style, storytelling, annotation-heavy charts
  • Interactive exploratory tools with custom interaction patterns
  • Hierarchical data (treemaps, sunbursts, dendrograms) with full control over layout and styling
  • Geographic visualizations needing custom projections or styling
  • Bundle size is a primary concern and you only need a few visualization primitives

When NOT to use​

  • Standard dashboard charts (bar, line, pie) — use Recharts
  • Complex charts with big data, maps, 3D, or gauge — use Apache ECharts
  • Tight timelines where chart polish is not the priority
  • Teams unfamiliar with D3 concepts or SVG
  • Non-React projects — VisX is React-only (consider D3.js directly)

Relationship to D3​

VisX uses D3 submodules (d3-scale, d3-shape, d3-hierarchy, d3-geo, etc.) for math and algorithms. It replaces D3's imperative DOM manipulation (d3-selection, enter/update/exit) with React components — giving you D3's power with React's component model.

If VisX doesn't provide enough control for your use case, you may need raw D3.js.

Resources​