# airbnb/visx

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/airbnb-visx).**

20,629 stars · 756 forks · TypeScript · mit

## Links

- GitHub: https://github.com/airbnb/visx
- Homepage: https://visx.airbnb.tech
- awesome-repositories: https://awesome-repositories.com/repository/airbnb-visx.md

## Topics

`chart` `d3` `data-visualization` `react` `svg` `visualization` `visx` `vx`

## Description

Visx is a collection of modular, low-level primitives designed for building custom data visualizations within a React component architecture. It functions as a toolkit for mapping data to coordinate systems and geometric shapes, allowing developers to construct bespoke charts and graphs that integrate directly into the standard component lifecycle.

The library utilizes a decoupled package architecture, enabling the use of specific visualization utilities without requiring the entire framework. By leveraging established mathematical primitives for geometric calculations and functional data transformation, it provides a declarative approach to defining visual structures. All visual elements are rendered as standard web graphics, mapping component properties directly to native document object model nodes.

This framework supports the development of highly tailored analytical interfaces and interactive information design. It provides the necessary building blocks for web graphics engineering, allowing for full control over rendering logic and layout requirements in complex data-driven applications.

## Tags

### User Interface & Experience

- [React Charting Libraries](https://awesome-repositories.com/f/user-interface-experience/data-visualization-tools/data-visualization/charting-frameworks/react-charting-libraries.md) — Provides a React-based framework for building custom, interactive data visualizations.
- [Visualization Frameworks](https://awesome-repositories.com/f/user-interface-experience/visualization-frameworks.md) — Acts as a foundational framework of low-level building blocks for constructing bespoke data visualizations.
- [Chart Components](https://awesome-repositories.com/f/user-interface-experience/chart-components.md) — Supplies a toolkit of reusable SVG-based components for mapping data to visual shapes.
- [Data Visualization Components](https://awesome-repositories.com/f/user-interface-experience/data-visualization-components.md) — Provides modular building blocks for assembling bespoke data charts and graphs within user interfaces. ([source](https://cdn.jsdelivr.net/gh/airbnb/visx@master/README.md))
- [Dashboard Layout Engines](https://awesome-repositories.com/f/user-interface-experience/dashboard-layout-engines.md) — Facilitates the creation of highly tailored analytical dashboards with unique layout requirements.
- [Interactive Interface Design](https://awesome-repositories.com/f/user-interface-experience/interactive-graphics/interactive-interface-design.md) — Supports the development of responsive, data-driven visual elements that integrate with application state.

### Graphics & Multimedia

- [SVG-Based Vector Rendering](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/svg-based-vector-rendering.md) — Renders visual elements as standard SVG graphics by mapping component properties to DOM nodes.
- [Web Graphics Engineering](https://awesome-repositories.com/f/graphics-multimedia/graphics-rendering-engines/web-graphics-engineering.md) — Offers low-level control over coordinate systems and rendering logic for custom web graphics.
- [Scale-Based Coordinate Mappings](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/scale-based-coordinate-mappings.md) — Provides mathematical scales to translate raw data into pixel coordinates for custom visualization rendering.
- [Declarative Visualization Grammars](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/declarative-visualization-grammars.md) — Enables declarative definition of visual structures and chart layouts through component properties.

### Part of an Awesome List

- [Charts](https://awesome-repositories.com/f/awesome-lists/data/charts.md) — Low-level visualization primitives for custom charts.
- [Charts and Visualization](https://awesome-repositories.com/f/awesome-lists/data/charts-and-visualization.md) — Visualization components
- [Charts](https://awesome-repositories.com/f/awesome-lists/devtools/charts.md) — Listed in the “Charts” section of the Awesome React awesome list.
- [Graphics and Animation](https://awesome-repositories.com/f/awesome-lists/media/graphics-and-animation.md) — Low-level visualization components.

### Web Development

- [Component Composition](https://awesome-repositories.com/f/web-development/component-composition.md) — Constructs complex visualizations by nesting modular components within the standard React lifecycle.

### Software Engineering & Architecture

- [Functional Data Pipelines](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/design-patterns/functional-design-patterns/functional-data-pipelines.md) — Implements functional data transformation pipelines using pure utility functions for coordinate mapping.
- [Decoupled Architectures](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/modular-decoupled-design/decoupled-architectures.md) — Utilizes a modular, decoupled package architecture to allow selective import of visualization utilities.