Documentation

visx is a suite of several low-level standalone packages for building visual interfaces with react. Packages can be mixed and used together depending on your use case, or you can simply add the umbrella @visx/visx package to use them all.

Individual packages can be roughly categorized as follows:

Chart primitives

  • annotation

    Annotate elements of a chart

  • axis

    Annotate your coordinate system

  • curve

    d3 line interpolators for @visx/shape

  • glyph

    Complex marks & symbols to be used in visuals

  • grid

    Grid lines for a chart

  • legend

    Make your visual encodings readable

  • marker

    Annotation lines with text

  • scale

    Map data to visual dimensions

  • shape

    Fundamental visualization shape primatives, the core of visx

  • tooltip

    Show details on demand

Layouts & specialized

  • chord

    Radial layout for matrix relationships

  • geo

    Geographic projections

  • heatmap

    Represent data values using color

  • hierarchy

    Components to visualize hierarchical or nested data

  • network

    Visualize nodes and links between them

  • react-spring

    Animated visx primitives

  • stats

    Common ways to visualize distributions

  • threshold

    Difference charts to compare the delta between two time series

  • xychart

    A chart-level API built on & integrated with several other visx building blocks

Interactions

  • brush

    Enable selection of a part of an interface

  • drag

    Make elements of an interface draggable

  • voronoi

    Partition points in a chart to improve user interaction

  • zoom

    Apply transforms to a viewport

SVG utilities

  • clip-path

    Utilities for clip-path elements

  • event

    Utilities for computing svg coordinates from mouse or touch events

  • group

    Simplified API for <g /> elements

  • gradient

    Utilities for making making color gradient definitions

  • pattern

    Utilities for creating pattern definitions

  • text

    An improved SVG Text component

Data utilities

  • bounds

    Detect the bounding box of an element & its parent

  • mock-data

    Lots of mock data sets to play with

  • responsive

    Utilities to make responsive visualizations easy

  • point

    A simple class to represent an x,y coordinate