gitmyhub

visx

TypeScript ★ 21k updated 14h ago

🐯 visx | visualization components

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

ReactTypeScriptD3npmsetup: easycomplexity 3/5

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.

Where it fits