1 var drawDamageChart = function(data) {
2 // the chart should fill the "damageChart" div
3 var width = document.getElementById("damageChart").offsetWidth;
5 // transform the dataset into something nvd3 can use
6 var transformedData = d3.nest()
7 .key(function(d) { return d.weapon_cd; }).entries(data.weapon_stats);
9 // transform games list into a map such that games[game_id] = linear sequence
11 data.games.forEach(function(v,i){ games[v] = i; });
14 var margin = {top: 20, right: 30, bottom: 30, left: 40},
15 height = 500 - margin.top - margin.bottom;
17 width -= margin.left - margin.right;
20 var colors = d3.scale.category20();
21 keyColor = function(d, i) {return colors(d.key)};
24 nv.addGraph(function() {
25 chart = nv.models.stackedAreaChart()
29 .x(function(d) { return games[d.game_id] })
30 .y(function(d) { return d.actual })
37 .tickFormat(function(d) { return data.games[d]; });
40 .tickFormat(d3.format(',02d'));
42 d3.select('#damageChartSVG')
43 .datum(transformedData)
44 .transition().duration(500).call(chart);
46 nv.utils.windowResize(chart.update);