Example Gallery

Unlike many traditional charting libraries, Variance graphics aren’t built by just selecting a fixed chart type from a predefined list. Instead, graphics are constructed by layering together components: data, geometric objects, scales, and annotations. This is Variance’s implementation of a grammar of graphics: a powerful framework that enables you to move quickly from ideas to custom production graphics.


1. Visualize quickly

Common workhorse graphics can be rendered in minutes using only simple HTML and CSS markup. Our first examples are clean and simple charts, each using one of Variance’s geometric objects:

2. Explore, transform, and iterate

It’s easy to explore different data representations, add or transform elements, and iteratively update your graphics. These examples build on the previous charts by using multiple geometries, grouping plots, adding data labels, &c.:

3. Design the user experience

Advanced visual styling, responsive charts, and animation can be added via your existing CSS workflow, whether that’s writing by hand or using a preprocessor like Sass. These examples use CSS to create rich, unique graphics:

4. Integrate with your content & applications

Variance graphics are just HTML, so they integrate seamlessly with both the written word and custom application UIs. The following examples are data graphics living in context; side-by-side with written explanations and other graphics: