React + D3

Number Picture is a collection of low-level React components for declaratively composing animated, interactive SVG visualizations. React handles the DOM structure and D3 handles the animations + math.

Shapes

SVG and D3 shape primitives for composing any visualization. Circle, Line, Arc, Rect, SymbolShape and more.

Layouts

Layouts and Collections for joining shapes to datasets. Pie, Pack, Grid, ForceSimulation and more.

Animation

Declaratively animate shapes on enter, update and exit with many easing functions.

Interaction

Visualizations can be made interactive using built-in React event handlers.

Isomorphic

Full support for server-side rendering without any extra work needed.

Extras

Comes with extra utility components for rendering axes, patterns and annotations.

Shapes & Lines

Curves & Radial Lines on the way...

Collections & Layouts

Stacks, Areas, Radial Areas & Force Simulations in development...

Misc

Annotations and gradients in progress...

Why Use Number Picture?

It seems as if a new charting library is released everyday. Recently, quite a few React + D3 charting libraries have been released in fact. While some are very mature and offer a wide range of charts, they still restrict you to using the types of charts that they offer. You can make a Pie chart or a Bar chart and sometimes many others.

But what happens when you want to draw outside of the lines a bit and create something truly custom? What happens if you want to go down a level and arrange the shapes on your page in new and unique ways? That's where Number Picture comes in.

You are given full control of the way in which your data is rendered on the page and you can build highly custom, animated graphics.

See some more complex examples here that illustrate what is possible with Number Picture.