Easier Visual Data in the Browser With Variance Charts

Today, we will be diving into Variance Charts; a unique JavaScript based "grammar of graphics" which provides an abstract, declarative markup style to create what would otherwise be fairly complex charts. Variance Charts sits somewhere between D3.js and HighCharts, providing flexibility while retaining an approachable syntax.

Using Variance Charts does not rely on deeper knowledge of JavaScript. Let's take a look!

Getting the Library

Variance provides a non-commercial version, hosted through its own CDN, which you should include in your page like so:

1	<script src="http://variancecharts.com/cdn/variance-noncommercial-standalone-9bc0f5e.min.js" charset="UTF-8"></script>

You'll want to include a style.css file as well. We won't go through the process of explaining the basic setup of the HTML file, as most of these details are straightforward.

Our First Chart

Variance can read both JSON and CSV; we will create a simple bar chart using the following unofficial CSV data about bacon popularity:

1	<csv id="yearly-bacons"> year,bacons 1990,20 1995,231 2000,639 2005,1625 2010,7000 2015,16000 </csv>

As we can see from these value pairs, bacon is getting exponentially more and more popular. For example, the pair 1990,20 shows that bacon was 20 popular (whatever the heck that means) in 1990, but then by 1995 popularity had risen to 231.

But really, to see this visually, we'd like to present it using a bar chart. Here's an example of how we'd markup our chart (we'll go over the various elements in a moment).

<div class="bacon-chart">
    <h3>Bacon data</h3> 
    <chart data="#yearly-bacons" scale-y-linear="0 20000">
        <guide-x></guide-x>
        <guide-y></guide-y>
        <repeat>
            <annotation class="bottom">{{year}}</annotation>
            <bar map-length="bacons"></bar>
        </repeat>
    </chart>
</div>

We will also need some accompanying CSS to set the size of the chart. To do this, we will wrap all of our markup in a <div class='container'> and add the following styles to a style.css file:

.container {
width:50%;
margin:60px auto;
}

.container chart {
width:100%;
height:400px;
}

Notice a few things here:

The chart markup looks a lot like HTML. In fact, it is valid XML which Variance uses to build our bar chart. We also used this custom tagging to wrap the CSV data. We reference that CSV element in the chart tag.
scale-y-linear tells us what the scale of the y direction should be. In our case, our data set goes to 16000, but starts as low as 20. To cover the range, we set our bottom end at 0, and our top at 20000.
guide-x / guide-y creates a tick-mark guide on the respective axes.
<repeat> loops over our data and creates items based on each data point.
annotation is a label that can be placed around a particular item, such as a bar. Curly braces allow you to display a piece of data; in our case, year is in our CSV, so we can easily output year.
bar creates a bar element, and map-lengthdefines the width of the bar bacons maps to the CSV.

Great! Now how do we make it less ugly?

Styling the Chart

To style the chart, we simply style as we would normal elements in CSS. The bar elements of the chart are block level normal DOM elements and are positioned using flexbox. We will add some styles to our CSS, which should then look something like this.

body {
color:#3f130c;
height:100%;
font-family:sans-serif;
background-image:url(../bg.jpg);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
}

h1,h2,h3,h4 {
font-family:Tauri, sans-serif;
}

.container {
width:50%;
position:relative;
background-image:url(../bg-blur.jpg);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
margin:100px auto;
padding:100px;
}

.bacon-chart {
position:relative;
z-index:999;
}

.bacon-chart h3 {
margin:0 0 1em;
}

.container:after {
background-color:rgba(255,255,255,0.4);
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
content:"";
}

.container chart {
width:100%;
height:400px;
}

.bacon-chart bar {
background-color:rgba(96,28,18,0.7);
border:none;
}

Note: we've added a Google font to the index file above our style.css link:

1	<link href='http://fonts.googleapis.com/css?family=Tauri' rel='stylesheet' type='text/css'>

We've included a little bonus here: the "blurred window" effect can be seen created between the container and body elements. We make use of a second background image to achieve this.

Now we have a more useful chart. But it gets much, much better.

Animation and Tooltips

Time for some flourishes, beginning with some tooltips on the bars. To kick things off, we'll add a new annotation for each bar, so that our chart markup looks like this:

<chart data="#yearly-bacons" scale-y-linear="0 20000" scale-y-linear="1990 2015">
    <guide-x></guide-x>
    <guide-y></guide-y>
    <repeat>
        <annotation class="bottom">{{year}}</annotation>
        <annotation class="tooltip" map-position="bacons">{{bacons}}</annotation>
        <bar map-length="bacons"></bar>
    </repeat>
</chart>

After that, we will add some new styles to our CSS that will allow for some interesting hover effects and simple transitions for the tooltip:

.bacon-chart bar {
background-color:rgba(96,28,18,0.7);
border:none;
margin:0!important;
}

datum {
overflow:hidden;
}

.tooltip {
width:auto;
height:auto;
background-color:#444;
color:#fff;
opacity:0;
left:-100%;
font-size:.6em;
-webkit-transition:all .4s;
-moz-transition:all .4s;
-ms-transition:all .4s;
-o-transition:all .4s;
transition:all .4s;
padding:6px;
}

datum:hover {
background-color:rgba(255,255,255,0.1);
}

datum:hover .tooltip {
display:block;
opacity:1;
left:0;
}

Animation

Finally, we want to animate our bars in. We'll accomplish this with a keyframe animation:

@-webkit - keyframes barsIn {
    0 % {
        bottom: -100 % ;
    }
    100 % {
        bottom: 0;
    }
}

Which we then will apply to our bar element:

.bacon - chart bar {
    background - color: rgba(96, 28, 18, 0.7);
    margin: 0!important;
    border: none;
    height: 0; - webkit - animation: barsIn 1s;
}

This can also be accomplished using something like-webkit-transform: scale( 1, 0 ), but we wanted to keep it as simple as possible. You should also make sure you add the proper prefixes as necessary.

More About Variance

Variance does a great job of explaining more complex examples, and also provides a great index of documentation. You will find that Variance is capable of far more complex visualizations. We'll touch briefly on some of the main points here.

Variance utilizes names of different core parts of a chart to make building the charts easy, including point,dot, range, bar, boxplot, and line. Each of these have their own determinable inputs. These can all be used in combination with one another, and can be created in iterative fashion with the repeat block.

Variance can also use linked data, which allows for API-driven visualizations that have dynamically updated information.

Conclusion

Today, you've learned how to create a completely declarative, animated, styled chart using Variance Charts. In an effort to get you started quickly, we've left out a lot of the functionality available in Variance, so be sure to check it out for yourself!

Bacon photo by jeffreyww on Flickr, edited. Creative Commons 2.0