Today, we will be diving into Variance Charts ; a unique JavaScript based "grammer 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: 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: year,bacons 1990,20 1995,231 2000,639 2005,1625 2010,7000 2015,16000 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
↧