Build powerful data visualizations for the web.
Without writing JavaScript.

Variance empowers engineers, designers, journalists, scientists, and analysts to build elegant bespoke data graphics for the web, using only HTML & CSS. Our intuitive, markup-based grammar emphasizes clear, practical graphics and serves as the foundation for a wide range of visualizations.

{{value}} °C

Global Surface Temperature

Change in global surface temperature relative to 1951-1980 average temperatures.

  • Monthly Mean
  • Annual Mean
  • Five Year Mean

Source: NASA’s Goddard Institute for Space Studies (GISS)

Getting started with Variance

In Variance, data graphics are created using special new data visualization tags that work like regular HTML — tags like <chart>, <line>, <point>, and <repeat>. These independent components can be composed together to build custom data graphics, with a set of rules much like a language’s grammar.

Unlike libraries that provide a fixed set of chart types (line, bar, et al.), Variance’s “grammar of graphics” enables you to quickly and easily build graphics specifically tailored to your needs. It’s very simple to try out different visual representations — moving from points to bars to lines — without having to reshape your dataset or learn a new function API.

To get started, let’s build a simple dot plot. We’ll start with a plain old HTML page that includes the Variance JavaScript:

<html>
  <body>
    <script src="http://variancecharts.com/cdn/variance-noncommercial-standalone-6d26aa2.min.js"
            charset="UTF-8"></script>
  </body>
</html>

Next, we’ll add a small CSV dataset directly to the page. This tag can go anywhere inside the <head> or <body> tags of the document. Note the ID, quarterly-sales, which we’ll use later to refer to this dataset from charts elsewhere on the page.

A simple way to depict this data is to draw a point for each sales quarter, mapping the amount of sales to the horizontal position of the point. We’ll add a <chart> tag to the <body> of our page, just like we’d add an <img>, <p>, or any other plain HTML tag:

<csv id="quarterly-sales">
  quarter,sales
  Q1,493
  Q2,573
  Q3,639
  Q4,855
</csv>
quarter,sales Q1,493 Q2,573 Q3,639 Q4,855 
<chart data="#quarterly-sales" scale-x-linear="300 1000">
  <repeat>
    <dot map-position="sales"></dot>
  </repeat>
</chart>

This yields the graphic at right. The repeat element duplicates its children once for every object in the data array on its scope; thus, we end up with one dot for each datum. As you’ve probably guessed, the scale-x-linear attribute of <chart> adds a linear scale to the chart’s scope with a domain of [300, 1000]. The map-position attribute of the <dot> tells the dot geometry that its position mapping should be calculated according to the sales property on its scope. Each dot uses this value with the chart’s x-scale to position itself.

Of course, context-free dots aren’t very helpful, so lets add a title, labels for each quarter, and an x-axis guide:

<h4 style="text-align: center;">Quarterly Sales ($USD)</h4>
<chart data="#quarterly-sales" scale-x-linear="300 1000">
  <guide-x></guide-x>
  <repeat>
    <annotation class="left">{{quarter}}</annotation>
    <dot map-position="sales"></dot>
  </repeat>
</chart>

And here’s our final scatterplot chart, produced with only a few brief, declarative lines of HTML markup.

As you can see, Variance provides a basic visual style by default, but all elements of a graphic can be fully styled via plain CSS or Sass for a completely custom visual aesthetic.

From here, you could continue to explore options for the visualization by changing the geometries, or flipping the axes. Variance makes it easy to work iteratively as you determine the best representation for your data set.

Continue this tutorial

Quarterly Sales ($USD)

{{quarter}}

What makes Variance unique?

Existing visualization libraries for the web can be roughly arranged on a continuum of abstraction and ease-of-use.

Variance takes a middle path between flexibility and ease-of-use, with an emphasis on data exploration, presentation quality, and use in a practical, fast-paced production environment.

Variance draws inspiration from Hadley Wickham’s ggplot2 library for R, which itself is inspired by Leland Wilkinson’s Grammar of Graphics book.

A Grammar of Graphics

Quick to explore, easy to customize

Variance’s grammar is a set of composable abstractions, allowing you to quickly explore a dataset via many different visualizations (i.e., data exploration). Once you find a suitable representation of your data, custom annotations and styling can be added to enhance the graphic. Because the Variance renders directly to the DOM, you can take full advantage of the power of Sass and CSS to style your visualizations.

Abstract, flexible
Difficult, slow
Black box, limited
Simple, quick

Canvas API

Powerful, But Masochistic

At the lowest level, you have the humble pixel grid made available through the <canvas> API, where you're responsible for all painting, erasing, repainting, and styling.

While performant and powerful, Canvas is quite code-heavy for common production visualization workflows.

SVG & HTML DOMs

Flexible, But Tedious

Above the Canvas layer you have the <html> and <svg> DOMs, which handle scenegraphs and repaints on your behalf and can be styled via CSS. Tools like Raphael and D3 abstract these scenegraphs, allowing you to manipulate them with JavaScript.

This approach is extremely flexible and powerful, well-suited for unique, highly-interactive data graphics. The trade-off, however, is that these tools have steep learning curves and are labor-intensive for building more common visualizations.

Turnkey JavaScript Libraries

Easy, But Limited

At the far opposite extreme lie “black box” turnkey libraries like HighCharts and FusionCharts. These offer a collection of fixed chart types that require the data to be shaped in a specific way. If the library supports exactly the chart you want to make, then this can be the easiest way to go.

On the other hand, if the library doesn’t support exactly chart you want, you’re out of luck. The internal rendering is opaque and custom styling is limited to some predefined variables mixed into the JavaScript for each graphic.

Where is Variance not a good fit?

  • Complex custom visualizations

    You have exacting requirements for a complex interactive visualization with the accompanying time and budget. Custom work directly targeting the DOM will provide the most flexibility.

  • Large datasets

    You have datasets beyond ~20k rows; Variance lives in the browser, and modern browsers struggle to render pages with 10–100k+ DOM elements. Try summarizing your data (humans can't meaningfully perceive that many elements anyway).

  • Deprecated browsers

    You require support for elderly browsers. Variance relies on the advanced features of modern browsers (Safari, Chrome, & Firefox) for reliable rendering and layout.

  • Pie charts

    You absolutely, positively must have pie charts.
    (Are you really sure you want pie charts?)