visx (Airbnb)

Overview

visx (formerly VX) is Airbnb's open-source collection of low-level visualization components for React with over 20,000 GitHub stars. It bridges D3's mathematical calculations with React's DOM rendering engine.

Key Features

• Modular Architecture: Split into 30+ independent packages (@visx/scale, @visx/shape, @visx/axis, @visx/tooltip).
• D3 Power + React Ergonomics: D3 handles math and layout; React updates the DOM seamlessly.
• Zero Styling Opinions: Complete freedom to apply SVG styles, Canvas rendering, or CSS animations.
• Production-Tested by Airbnb: Powers data-heavy analytics interfaces across Airbnb's global platform.

Installation & Quick Start

npm install @visx/shape @visx/scale @visx/group

import { Bar } from '@visx/shape';
import { Group } from '@visx/group';

export default function Chart() {
  return (
    <svg width={300} height={150}>
      <Group>
        <Bar width={50} height={100} fill="#3b82f6" />
      </Group>
    </svg>
  );
}

Why Choose visx?

• Best for: Custom visualization design systems, bespoke charts, and engineering teams building proprietary chart kits.
• Not suitable for: Simple turn-key dashboards needing quick out-of-the-box templates.