Counterpoint

Counterpoint is a state management library for animated data visualization, designed to help you create beautifully smooth data-driven interactive graphics. It’s ideal for developers who are used to working with D3.js or other customizable graphics libraries, but need more control and design options for animations.

Counterpoint is:

• Lightweight and fast. You can animate anywhere from hundreds to millions of data points using Counterpoint. Unlike most multipurpose animation libraries, Counterpoint is specifically designed to work well with HTML5 Canvas and WebGL.
• Reactive (when you need it). Reactive web frameworks like React and Svelte make it much easier to manage application state than vanilla JS, but those affordances don’t tend to scale well to individual data points and their properties. With Counterpoint, you can make data item properties reactive while retaining full control over when those properties update.
• Compatible with popular libraries. Use Counterpoint in combination with D3, regl, Svelte + LayerCake, and more. Let those libraries handle the graphics or the chart logic, we’ll handle the animations.

Counterpoint is not:

• A graphics library. Perhaps surprisingly, Counterpoint doesn’t contain any rendering code. You bring all the rendering code yourself, which means you can make the outputs look exactly as you want!
• A replacement for D3 or Vega. Similarly, Counterpoint makes no assumptions or opinions about charts, and doesn’t provide any functionality to render chart elements such as axes, grids, or legends. To build charts, we highly recommend using modules from D3 such as d3-zoom, d3-axis, and others in combination with Counterpoint’s data structures.

Ready to get started? Head over to the quickstart to install and learn the basics.

Or, check out this demo chart showing worldwide GDP, life expectancy, and population trends from Gapminder. The code for this example is around 600 lines and showcases Counterpoint’s ability to manage multiple animations at once as well as animating elements in and out.