1 var weapons = ["laser", "shotgun", "uzi", "grenadelauncher", "minelayer", "electro",
2 "crylink", "nex", "hagar", "rocketlauncher", "porto", "minstanex", "hook", "hlac",
3 "seeker", "rifle", "tuba", "fireball"];
5 var weaponColors = ["#ff5933", "#b2b2b2", "#66e559", "#ff2600", "#bfbf00", "#597fff",
6 "#d83fff", "#00e5ff", "#d87f59", "#ffbf33", "#7fff7f", "#a5a5ff", "#a5ffd8",
7 "#ffa533", "#ff5959", "#d87f3f", "#d87f3f", "#33ff33"];
9 var colorScale = d3.scale.ordinal().domain(weapons).range(weaponColors);
11 var drawDamageChart = function(data) {
12 // the chart should fill the "damageChart" div
13 var width = document.getElementById("damageChart").offsetWidth;
15 // transform the dataset into something nvd3 can use
16 var transformedData = d3.nest()
17 .key(function(d) { return d.weapon_cd; }).entries(data.weapon_stats);
19 // transform games list into a map such that games[game_id] = linear sequence
21 data.games.forEach(function(v,i){ games[v] = i; });
24 var margin = {top: 20, right: 30, bottom: 30, left: 60},
25 height = 300 - margin.top - margin.bottom;
27 width -= margin.left - margin.right;
30 keyColor = function(d, i) {return colorScale(d.key)};
33 nv.addGraph(function() {
34 chart = nv.models.stackedAreaChart()
38 .x(function(d) { return games[d.game_id] })
39 .y(function(d) { return d.actual })
40 .tooltip(function(key, x, y, e, graph) {
41 return '<h3>' + key + '</h3>' + '<p>' + y + ' damage in game #' + x + '</p>'
49 .tickFormat(function(d) { return data.games[d]; });
52 .tickFormat(d3.format(',02d'));
54 d3.select('#damageChartSVG')
55 .datum(transformedData)
56 .transition().duration(500).call(chart);
58 nv.utils.windowResize(chart.update);
64 var drawAccuracyChart = function(data) {
65 // the chart should fill the "accuracyChart" div
66 var width = document.getElementById("accuracyChart").offsetWidth;
68 // get rid of empty values
69 data.weapon_stats = data.weapon_stats.filter(function(e){ return e.fired > 0; });
71 // transform the dataset into something nvd3 can use
72 var transformedData = d3.nest()
73 .key(function(d) { return d.weapon_cd; }).entries(data.weapon_stats);
75 var findNumGames = function(weapon) {
76 var numGames = transformedData.filter(function(e){return e.key == weapon})[0].values.length;
77 if(numGames !== undefined) {
84 // transform games list into a map such that games[game_id] = linear sequence
86 data.games.forEach(function(v,i){ games[v] = i; });
89 var margin = {top: 20, right: 30, bottom: 30, left: 40},
90 height = 300 - margin.top - margin.bottom;
92 width -= margin.left - margin.right;
95 keyColor = function(d, i) {return colorScale(d.key)};
98 nv.addGraph(function() {
99 chart = nv.models.lineChart()
104 .x(function(d) { return games[d.game_id] })
107 return d.hit/d.fired;
112 .tooltip(function(key, x, y, e, graph) {
113 return '<h3>' + key + '</h3>' + '<p>' + y + ' accuracy in game #' + x + ' <br /> ' + data.averages[key] + '% average over ' + findNumGames(key) + ' games</p>';
118 .axisLabel("Game ID")
121 .tickFormat(function(d) { return data.games[d]; });
123 var yScale = d3.scale.linear().domain([0,1]).range([0,height]);
125 .axisLabel('% Accuracy')
126 .tickFormat(d3.format('2%'));
128 d3.select('#accuracyChartSVG')
129 .datum(transformedData)
130 .transition().duration(500).call(chart);
132 nv.utils.windowResize(chart.update);