explaingit

airbnb/visx

20,801TypeScriptAudience · developerComplexity · 3/5MaintainedLicenseSetup · easy

TLDR

Low-level React components for building custom data visualizations by combining D3's math with React's component model.

Mindmap

mindmap
  root((visx))
    What it does
      D3 math in React
      Custom chart builder
      Composable blocks
    Building blocks
      Scales and axes
      Shapes and lines
      Grids and legends
    Use cases
      Dashboard charts
      Data exploration tools
      Custom viz libraries
    Tech stack
      React components
      D3 utilities
      TypeScript
    Audience
      Frontend engineers
      Data viz builders
      Design systems teams

Things people build with this

USE CASE 1

Build interactive dashboards with custom bar charts, line graphs, and scatter plots without learning D3 syntax.

USE CASE 2

Create a reusable chart library for your team by composing visx components into higher-level chart wrappers.

USE CASE 3

Add data visualizations to React apps with fine-grained control over styling and layout without bloated chart libraries.

Tech stack

ReactTypeScriptD3npm

Getting it running

Difficulty · easy Time to first run · 5min
Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

visx (short for visualization components) is a collection of low-level React components for building data visualizations, created by Airbnb. It bridges two popular JavaScript tools: D3, which is powerful for computing and scaling data for charts, and React, which handles updating the visual display. Mixing D3 and React directly is awkward because they each want to control the same part of the page in different ways, visx solves this by wrapping D3's math and scale utilities as React components, so you can build charts using familiar React patterns without writing raw D3 code. The library is intentionally low-level and unopinionated, meaning it does not ship a fixed set of ready-made chart types. Instead, it provides the building blocks, shapes like bars and lines, scales for mapping data to screen coordinates, axes, grids, and more, that you can compose together to create your own custom charts or your own higher-level chart library for your team. You only install the specific packages you need, keeping bundle sizes small. Animation is deliberately not included, since teams typically already have a preferred animation library and can use it alongside visx. The library is organized as separate npm packages under the @visx scope and supports React 18 (v3 stable) and React 19 (v4 alpha). It is open source under the MIT license.

Copy-paste prompts

Prompt 1
Show me how to build a simple bar chart using visx scales and shapes in React.
Prompt 2
How do I create a custom line chart with visx that maps data values to screen coordinates?
Prompt 3
What visx components do I need to add axes, grids, and legends to my visualization?
Prompt 4
How can I compose visx building blocks to create a reusable chart component for my design system?
Open on GitHub → Explain another repo

Generated 2026-05-18 · Model: sonnet-4-6 · Verify against the repo before relying on details.