Airbnb Engineering recently released the first major iteration of visx, a set of low-level React components that can be composed into interactive visualizations. Visx builds on D3 primitives, the React component model, and React DOM handling. Visx strives to provide a data visualization front-end solution that is easy to learn without sacrificing expressiveness.
Visx’s release note explained visx’s origin and design objectives:
After 3 years of development, 2.5 years of production use at Airbnb, and a rewrite in TypeScript we are excited to announce the official 1.0 release of visx (formerly vx).
[Visx] brings together the power of [the] D3 [data visualization library] with the joy of React […] to create visualizations for the web [… that strives to be] learnable, expressive [and] performant.
Airbnb claims that learnability and performance are achieved by using React as a front-end framework. No benchmark is however provided regarding the performance of visx vs. high-level data visualization libraries.
By being architected around a set of low-level, focused building blocks that are composed as needed, visx allows developers to pay only for the cost of the specific packages that they are using. Visx does not enforce any opinion on state management, animation, and styling, which further facilitates modularity and composition.
While recently released, visx has been used for over two years by Airbnb for Airbnb.com visualizations, higher-level re-usable charts, and internal data tools. Visx is written in TypeScript and ships with extensive unit testing.
Developers may use any of the 31 packages that make visx. The packages address common data visualization concerns like measurement, interactivity, and chart primitives. Visx also includes utility functions and specialized charts (heatmap, treemap, chord diagrams, geographic maps, and more).
The strategy that consists of using D3 for its mathematics and utility functions while using a UI framework for the interactivity and DOM handling can also be used in Svelte, Vue, and others. Tom Fevrier illustrated that strategy in a talk organized by the Svelte Society. In the talk, Fevrier gave two examples of animated, responsive graphs directly implemented with a few D3 APIs and Svelte’s animations and event management.
There are, however, some interactive or DOM-handling features included in D3 whose implementation in a UI framework may be sufficiently complex or repetitive to be worth extracting in a separate library. Filtering, zooming, linking, and brushing interactions may fit that description. Visx ships with four packages focusing on interactions: brush, drag, zoom, and voronoi. The voronoi package can be used to implement user-friendly details-on-demand visualization techniques by selecting a data point before the pointer reaches the exact location of the point.
An example of brushing interaction implemented with visx is as follows:
Visx is open-source software distributed under the MIT license. Feedback and contributions are welcome and should follow the contributions guidelines and code of conduct for the project.