# Visx — Low-Level Visualization Primitives for React

> A collection of expressive, composable React visualization components built on D3, created by Airbnb for building custom data visualizations.

## Install

Save as a script file and run:

# Visx — Low-Level Visualization Primitives for React

## Quick Use
```bash
npm install @visx/group @visx/shape @visx/scale
```
```jsx
import { Group } from '@visx/group';
import { Bar } from '@visx/shape';
import { scaleBand, scaleLinear } from '@visx/scale';
// Compose primitives into custom charts inside any React component
```

## Introduction
Visx (formerly vx) is a set of low-level visualization primitives for React, developed by Airbnb. Instead of providing opinionated chart components, it gives developers D3-powered building blocks that compose naturally with React's component model and rendering lifecycle.

## What Visx Does
- Provides React components for shapes, axes, scales, legends, and tooltips
- Wraps D3 math (scales, interpolators, geo projections) in a React-friendly API
- Supports SVG-based rendering that integrates with standard React event handling
- Offers animation primitives via `@visx/react-spring` for smooth transitions
- Includes responsive wrappers and drag-and-drop utilities for interactive visualizations

## Architecture Overview
Visx is organized as a monorepo of over 30 scoped npm packages. Each package exports React components that wrap a specific D3 concept—scales, shapes, axes, curves, gradients, patterns, and more. Because each package is independent, applications only bundle what they use. The library stays in the SVG/React rendering model and avoids direct DOM manipulation, so it works with server-side rendering and React concurrent features.

## Self-Hosting & Configuration
- Install only the packages you need from the `@visx/*` scope
- Use `@visx/scale` to create D3 scales and `@visx/shape` for path generators
- Add axes with `@visx/axis` and tooltips with `@visx/tooltip`
- Enable responsiveness with `@visx/responsive` for container-aware sizing
- Combine with any React styling approach: CSS modules, styled-components, or Tailwind

## Key Features
- Granular package structure keeps bundle size minimal
- Full TypeScript support with detailed type definitions
- Works with server-side rendering and React 18+ concurrent mode
- Animation support through Spring-based transitions
- No opinions on state management, data fetching, or layout

## Comparison with Similar Tools
- **Recharts** — higher-level chart components with less customization; Visx is lower-level and more flexible
- **Nivo** — provides ready-made chart types with theming; Visx requires more assembly but offers more control
- **D3.js** — full library that manages its own DOM; Visx delegates rendering to React
- **Victory** — opinionated chart library by Formidable; Visx gives finer-grained primitives
- **Chart.js** — canvas-based with simple API; Visx is SVG-based and React-native

## FAQ
**Q: Is Visx a charting library?**
A: Not exactly. It provides the building blocks to create any visualization, but you assemble the chart components yourself.

**Q: Why use Visx instead of D3 directly?**
A: Visx keeps rendering in React, avoiding conflicts between D3 DOM manipulation and React's virtual DOM reconciliation.

**Q: Does Visx support Canvas rendering?**
A: Visx focuses on SVG. For Canvas-based visualizations, you can use D3 directly or libraries like Deck.gl.

**Q: Is Visx maintained?**
A: Yes. It is actively maintained by Airbnb and the open-source community.

## Sources
- https://github.com/airbnb/visx
- https://airbnb.io/visx/

---
Source: https://tokrepo.com/en/workflows/5f9d1d7e-4361-11f1-9bc6-00163e2b0d79
Author: Script Depot