1 var weaponColors = ["#ff5933", "#b2b2b2", "#66e559", "#ff2600", "#bfbf00", "#597fff",
2 "#d83fff", "#00e5ff", "#d87f59", "#ffbf33", "#7fff7f", "#a5a5ff", "#a5ffd8",
3 "#ffa533", "#ff5959", "#d87f3f", "#d87f3f", "#33ff33"];
5 var drawDamageChart = function(data) {
6 // the chart should fill the "damageChart" div
7 var width = document.getElementById("damageChart").offsetWidth;
9 // transform the dataset into something nvd3 can use
10 var transformedData = d3.nest()
11 .key(function(d) { return d.weapon_cd; }).entries(data.weapon_stats);
13 // transform games list into a map such that games[game_id] = linear sequence
15 data.games.forEach(function(v,i){ games[v] = i; });
18 var margin = {top: 20, right: 30, bottom: 30, left: 60},
19 height = 300 - margin.top - margin.bottom;
21 width -= margin.left - margin.right;
23 nv.addGraph(function() {
24 chart = nv.models.stackedAreaChart()
29 .x(function(d) { return games[d.game_id] })
30 .y(function(d) { return d.actual })
31 .useInteractiveGuideline(true)
32 .controlsData(['Stacked','Expanded'])
34 .tooltip(function(key, x, y, e, graph) {
35 return '<h3>' + key + '</h3>' + '<p>' + y + ' damage in game #' + x + '</p>';
38 chart.xAxis.tickFormat(function(d) { return ''; });
39 chart.yAxis.tickFormat(d3.format(',02d'));
41 d3.select('#damageChartSVG')
42 .datum(transformedData)
43 .transition().duration(500).call(chart);
45 nv.utils.windowResize(chart.update);
51 var drawAccuracyChart = function(data) {
52 // the chart should fill the "accuracyChart" div
53 var width = document.getElementById("accuracyChart").offsetWidth;
55 // get rid of empty values
56 data.weapon_stats = data.weapon_stats.filter(function(e){ return e.fired > 0; });
58 // transform the dataset into something nvd3 can use
59 var transformedData = d3.nest()
60 .key(function(d) { return d.weapon_cd; }).entries(data.weapon_stats);
62 var findNumGames = function(weapon) {
63 var numGames = transformedData.filter(function(e){return e.key == weapon})[0].values.length;
64 if(numGames !== undefined) {
71 // transform games list into a map such that games[game_id] = linear sequence
73 data.games.forEach(function(v,i){ games[v] = i; });
76 var margin = {top: 20, right: 30, bottom: 30, left: 40},
77 height = 300 - margin.top - margin.bottom;
79 width -= margin.left - margin.right;
81 nv.addGraph(function() {
82 chart = nv.models.lineChart()
88 .x(function(d) { return games[d.game_id] })
89 .y(function(d) { return d.fired > 0 ? d.hit/d.fired : 0; })
91 .tooltipContent(function(key, x, y, e, graph) {
92 return '<h3>' + key + '</h3>' + '<p>' + y + ' accuracy in game #' + x + ' <br /> ' + data.averages[key] + '% average over ' + findNumGames(key) + ' games</p>';
95 chart.xAxis.tickFormat(function(d) { return ''; });
97 var yScale = d3.scale.linear().domain([0,1]).range([0,height]);
99 .axisLabel('% Accuracy')
100 .tickFormat(d3.format('2%'));
102 d3.select('#accuracyChartSVG')
103 .datum(transformedData)
104 .transition().duration(500).call(chart);
106 nv.utils.windowResize(chart.update);