explaingit

airbnb/visx

Analysis updated 2026-06-21

★ 20,780TypeScriptAudience · developerComplexity · 3/5LicenseSetup · moderate

TLDR

A collection of low-level React components from Airbnb that wraps D3's math and scale utilities into React-friendly building blocks so you can compose fully custom charts without writing raw D3 code.

Mindmap

mindmap
  root((visx))
    What it does
      Wraps D3 in React
      Low-level primitives
      No fixed chart types
    Tech Stack
      TypeScript
      React
      D3
      npm packages
    Use Cases
      Custom charts
      Team chart libraries
      Dashboard widgets
    Audience
      React developers
      Data engineers
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Build a custom bar or line chart in a React app using visx shapes and scales instead of a fixed charting library.

USE CASE 2

Create a reusable chart library for your team by composing visx primitives like axes, grids, and shape components.

USE CASE 3

Add data visualization to a React dashboard while keeping bundle size small by installing only the @visx packages you need.

USE CASE 4

Replace a bloated charting dependency with targeted visx packages for precise control over every visual element.

What is it built with?

TypeScriptReactD3npm

How does it compare?

airbnb/visxtibixdev/winboatcoze-dev/coze-studio
Stars20,78020,76420,700
LanguageTypeScriptTypeScriptTypeScript
Setup difficultymoderatehardhard
Complexity3/54/54/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 30min

No single ready-made chart component to drop in, install individual @visx/* scoped packages and compose them yourself.

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
Using @visx/shape and @visx/scale, write a React component that renders a bar chart for this dataset: [paste data here]. Use scaleBand for the x-axis and scaleLinear for the y-axis.
Prompt 2
Show me how to compose @visx/axis and @visx/grid with @visx/shape/BarStack to build a stacked bar chart in a React app.
Prompt 3
With @visx/tooltip, add a hover tooltip to a line chart built with @visx/shape/LinePath and @visx/scale/scaleTime.
Prompt 4
I have a React app and want more control than chart.js gives me. Walk me through converting a simple bar chart to use @visx/shape/Bar and @visx/scale/scaleBand.

Frequently asked questions

What is visx?

A collection of low-level React components from Airbnb that wraps D3's math and scale utilities into React-friendly building blocks so you can compose fully custom charts without writing raw D3 code.

What language is visx written in?

Mainly TypeScript. The stack also includes TypeScript, React, D3.

What license does visx use?

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

How hard is visx to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is visx for?

Mainly developer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Scan in gitsafehub Deploy in gitdeployhub airbnb on gitmyhub

Verify against the repo before relying on details.

Alternatives & similar repos