Variance Charts: Example Gallery

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:

Line chart example Bar chart example Scatterplot chart example

Dotplot chart example Boxplot chart example Range chart example

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.:

Line chart with data labels example Grouped bar chart example Tufte Atom chart example

Employment chart example Bullet chart example Multiple line chart example

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:

Slopegraph chart example Population Age chart example Global Surface Temperature chart example

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:

Weekly Forcast