Skip to content

Instantly share code, notes, and snippets.

@smukkejohan

smukkejohan/chart.js

Last active December 14, 2015 11:19
Show Gist options
  • Save smukkejohan/5078791 to your computer and use it in GitHub Desktop.
Save smukkejohan/5078791 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
chart.js
data = [
{
"key" : "Work" ,
"values" : [
[ 1 , 0],
[ 2 , 11],
[ 3 , 0],
[ 4 , 9.5],
[ 5 , 0],
[ 6 , 0],
[ 7 , 0],
[ 8 , 0],
[ 9 , 0],
[ 10 , 0],
[ 11 , 0],
[ 12 , 0],
[ 13 , 0],
[ 14 , 0],
[ 15 , 0],
[ 16 , 2],
[ 17 , 0],
[ 18 , 0],
[ 19 , 0],
[ 20 , 0],
[ 21 , 10],
[ 22 , 8],
[ 23 , 18.5],
[ 24 , 7],
[ 25 , 13],
[ 26 , 5.5],
[ 27 , 4],
[ 28 , 16],
[ 29 , 0],
[ 30 , 8.5],
[ 31 , 11],
[ 32 , 6],
[ 33 , 0],
[ 34 , 0],
[ 35 , 13.5],
[ 36 , 10],
[ 37 , 8.5],
[ 38 , 8.5],
[ 39 , 11],
[ 40 , 0],
[ 41 , 0],
[ 42 , 6.5],
[ 43 , 7.5],
[ 44 , 9],
[ 45 , 8.5],
[ 46 , 10],
[ 47 , 0],
[ 48 , 8],
[ 49 , 16.5],
[ 50 , 17],
[ 51 , 16],
[ 52 , 13.5],
[ 53 , 11.5],
[ 54 , 13],
[ 55 , 18],
[ 56 , 6],
[ 57 , 18],
[ 58 , 17],
[ 59 , 9],
[ 60 , 9.5],
[ 61 , 0],
[ 62 , 0],
]},
{
"key" : "Sex, drugs, and rock 'n' roll." ,
"values" : [
[ 1 , 14],
[ 2 , 0],
[ 3 , 5],
[ 4 , 0],
[ 5 , 0],
[ 6 , 0],
[ 7 , 0],
[ 8 , 0],
[ 9 , 0],
[ 10 , 0],
[ 11 , 0],
[ 12 , 10],
[ 13 , 0],
[ 14 , 0],
[ 15 , 0],
[ 16 , 2],
[ 17 , 0],
[ 18 , 7],
[ 19 , 0],
[ 20 , 0],
[ 21 , 0],
[ 22 , 0],
[ 23 , 0],
[ 24 , 0],
[ 25 , 0],
[ 26 , 12],
[ 27 , 12],
[ 28 , 0],
[ 29 , 0],
[ 30 , 0],
[ 31 , 0],
[ 32 , 0],
[ 33 , 18],
[ 34 , 12],
[ 35 , 0],
[ 36 , 0],
[ 37 , 0],
[ 38 , 0],
[ 39 , 0],
[ 40 , 0],
[ 41 , 0],
[ 42 , 6],
[ 43 , 0],
[ 44 , 0],
[ 45 , 0],
[ 46 , 0],
[ 47 , 12],
[ 48 , 14],
[ 49 , 0],
[ 50 , 0],
[ 51 , 0],
[ 52 , 0],
[ 53 , 0],
[ 54 , 0],
[ 55 , 0],
[ 56 , 0],
[ 57 , 0],
[ 58 , 0],
[ 59 , 0],
[ 60 , 8],
[ 61 , 0],
[ 62 , 0],
]},
{
"key" : "Other" ,
"values" : [
[ 1 , 10],
[ 2 , 13],
[ 3 , 19],
[ 4 , 14.5],
[ 5 , 24],
[ 6 , 24],
[ 7 , 24],
[ 8 , 24],
[ 9 , 24],
[ 10 ,24],
[ 11 , 24],
[ 12 , 14],
[ 13 , 24],
[ 14 , 24],
[ 15 , 24],
[ 16 , 20],
[ 17 , 24],
[ 18 , 17],
[ 19 , 24],
[ 20 , 24],
[ 21 , 14],
[ 22 , 16],
[ 23 , 5.5],
[ 24 , 17],
[ 25 , 11],
[ 26 , 6.5],
[ 27 , 8],
[ 28 , 8],
[ 29 , 24],
[ 30 , 15.5],
[ 31 , 13],
[ 32 , 18],
[ 33 , 6],
[ 34 , 12],
[ 35 , 10.5],
[ 36 , 14],
[ 37 , 15.5],
[ 38 , 15.5],
[ 39 , 13],
[ 40 , 24],
[ 41 , 24],
[ 42 , 11.5],
[ 43 , 16.5],
[ 44 , 15],
[ 45 , 15.5],
[ 46 , 14],
[ 47 , 12],
[ 48 , 2],
[ 49 , 7.5],
[ 50 , 7],
[ 51 , 8],
[ 52 , 10.5],
[ 53 , 12.5],
[ 54 , 11],
[ 55 , 6],
[ 56 , 18],
[ 57 , 6],
[ 58 , 7],
[ 59 , 15],
[ 60 , 6.5],
[ 61 , 24],
[ 62 , 24],
]},
]
nv.addGraph(function() {
var chart = nv.models.stackedAreaChart()
.x(function(d) { return d[0] })
.y(function(d) { return d[1] })
.clipEdge(true);
chart.xAxis
.showMaxMin(false);
chart.yAxis
.showMaxMin(true);
d3.select('#chart svg')
.datum(data)
.transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
Raw
data.json
[
{
"key" : "Work" ,
"values" : [
[ 1 , 0],
[ 2 , 11],
[ 3 , 0],
[ 4 , 9.5],
[ 5 , 0],
[ 6 , 0],
[ 7 , 0],
[ 8 , 0],
[ 9 , 0],
[ 10 , 0],
[ 11 , 0],
[ 12 , 0],
[ 13 , 0],
[ 14 , 0],
[ 15 , 0],
[ 16 , 2],
[ 17 , 0],
[ 18 , 0],
[ 19 , 0],
[ 20 , 0],
[ 21 , 10],
[ 22 , 8],
[ 23 , 18.5],
[ 24 , 7],
[ 25 , 13],
[ 26 , 5.5],
[ 27 , 4],
[ 28 , 16],
[ 29 , 0],
[ 30 , 8.5],
[ 31 , 11],
[ 32 , 6],
[ 33 , 0],
[ 34 , 0],
[ 35 , 13.5],
[ 36 , 10],
[ 37 , 8.5],
[ 38 , 8.5],
[ 39 , 11],
[ 40 , 0],
[ 41 , 0],
[ 42 , 6.5],
[ 43 , 7.5],
[ 44 , 9],
[ 45 , 8.5],
[ 46 , 10],
[ 47 , 0],
[ 48 , 8],
[ 49 , 16.5],
[ 50 , 17],
[ 51 , 16],
[ 52 , 13.5],
[ 53 , 11.5],
[ 54 , 13],
[ 55 , 18],
[ 56 , 6],
[ 57 , 18],
[ 58 , 17],
[ 59 , 9],
[ 60 , 9.5],
[ 61 , 0],
[ 62 , 0],
]},
{
"key" : "Sex, drugs, and rock 'n' roll." ,
"values" : [
[ 1 , 14],
[ 2 , 0],
[ 3 , 5],
[ 4 , 0],
[ 5 , 0],
[ 6 , 0],
[ 7 , 0],
[ 8 , 0],
[ 9 , 0],
[ 10 , 0],
[ 11 , 0],
[ 12 , 10],
[ 13 , 0],
[ 14 , 0],
[ 15 , 0],
[ 16 , 2],
[ 17 , 0],
[ 18 , 7],
[ 19 , 0],
[ 20 , 0],
[ 21 , 0],
[ 22 , 0],
[ 23 , 0],
[ 24 , 0],
[ 25 , 0],
[ 26 , 12],
[ 27 , 12],
[ 28 , 0],
[ 29 , 0],
[ 30 , 0],
[ 31 , 0],
[ 32 , 0],
[ 33 , 18],
[ 34 , 12],
[ 35 , 0],
[ 36 , 0],
[ 37 , 0],
[ 38 , 0],
[ 39 , 0],
[ 40 , 0],
[ 41 , 0],
[ 42 , 6],
[ 43 , 0],
[ 44 , 0],
[ 45 , 0],
[ 46 , 0],
[ 47 , 12],
[ 48 , 14],
[ 49 , 0],
[ 50 , 0],
[ 51 , 0],
[ 52 , 0],
[ 53 , 0],
[ 54 , 0],
[ 55 , 0],
[ 56 , 0],
[ 57 , 0],
[ 58 , 0],
[ 59 , 0],
[ 60 , 8],
[ 61 , 0],
[ 62 , 0],
]},
{
"key" : "Other" ,
"values" : [
[ 1 , 10],
[ 2 , 13],
[ 3 , 19],
[ 4 , 14.5],
[ 5 , 24],
[ 6 , 24],
[ 7 , 24],
[ 8 , 24],
[ 9 , 24],
[ 10 ,24],
[ 11 , 24],
[ 12 , 14],
[ 13 , 24],
[ 14 , 24],
[ 15 , 24],
[ 16 , 20],
[ 17 , 24],
[ 18 , 17],
[ 19 , 24],
[ 20 , 24],
[ 21 , 14],
[ 22 , 16],
[ 23 , 5.5],
[ 24 , 17],
[ 25 , 11],
[ 26 , 6.5],
[ 27 , 8],
[ 28 , 8],
[ 29 , 24],
[ 30 , 15.5],
[ 31 , 13],
[ 32 , 18],
[ 33 , 6],
[ 34 , 12],
[ 35 , 10.5],
[ 36 , 14],
[ 37 , 15.5],
[ 38 , 15.5],
[ 39 , 13],
[ 40 , 24],
[ 41 , 24],
[ 42 , 11.5],
[ 43 , 16.5],
[ 44 , 15],
[ 45 , 15.5],
[ 46 , 14],
[ 47 , 12],
[ 48 , 2],
[ 49 , 7.5],
[ 50 , 7],
[ 51 , 8],
[ 52 , 10.5],
[ 53 , 12.5],
[ 54 , 11],
[ 55 , 6],
[ 56 , 18],
[ 57 , 6],
[ 58 , 7],
[ 59 , 15],
[ 60 , 6.5],
[ 61 , 24],
[ 62 , 24],
]},
]
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.browser text {
text-anchor: end;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%y-%b-%d").parse,
formatPercent = d3.format(".0%");
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category20();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(formatPercent);
var area = d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(function(d) { return y(d.y0); })
.y1(function(d) { return y(d.y0 + d.y); });
var stack = d3.layout.stack()
.values(function(d) { return d.values; });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.tsv("data.json", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
data.forEach(function(d) {
d.date = parseDate(d.date);
});
var browsers = stack(color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {date: d.date, y: d[name] / 100};
})
};
}));
x.domain(d3.extent(data, function(d) { return d.date; }));
var browser = svg.selectAll(".browser")
.data(browsers)
.enter().append("g")
.attr("class", "browser");
browser.append("path")
.attr("class", "area")
.attr("d", function(d) { return area(d.values); })
.style("fill", function(d) { return color(d.name); });
browser.append("text")
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.y0 + d.value.y / 2) + ")"; })
.attr("x", -6)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment