xonstat/static/js/weaponCharts.js

   1 // weapons and their corresponding colors
   2 var weapons = ["laser", "shotgun", "uzi", "grenadelauncher", "minelayer", "electro",
   3     "crylink", "nex", "hagar", "rocketlauncher", "porto", "minstanex", "hook", "hlac",
   4     "seeker", "rifle", "tuba", "fireball"];
   5
   6 var weaponColors = ["#ff5933", "#b2b2b2", "#66e559", "#ff2600", "#bfbf00", "#597fff",
   7     "#d83fff", "#00e5ff", "#d87f59", "#ffbf33", "#7fff7f", "#a5a5ff", "#a5ffd8",
   8     "#ffa533", "#ff5959", "#d87f3f", "#d87f3f", "#33ff33"];
   9
  10 var colorScale = d3.scale.ordinal().domain(weapons).range(weaponColors);
  11
  12 var drawDamageChart = function(data) {
  13   // the chart should fill the "damageChart" div
  14   var width = document.getElementById("damageChart").offsetWidth;
  15
  16   // transform the dataset into something nvd3 can use
  17   var transformedData = d3.nest()
  18     .key(function(d) { return d.weapon_cd; }).entries(data.weapon_stats);
  19
  20   // transform games list into a map such that games[game_id] = linear sequence
  21   var games = {};
  22   data.games.forEach(function(v,i){ games[v] = i; });
  23
  24   // margin model
  25   var margin = {top: 20, right: 30, bottom: 30, left: 60},
  26       height = 300 - margin.top - margin.bottom;
  27
  28   width -= margin.left - margin.right;
  29
  30   // colors
  31   keyColor = function(d, i) {return colorScale(d.key)};
  32
  33   var chart;
  34   nv.addGraph(function() {
  35     chart = nv.models.stackedAreaChart()
  36       .margin(margin)
  37       .width(width)
  38       .height(height)
  39       .x(function(d) { return games[d.game_id] })
  40       .y(function(d) { return d.actual })
  41       .tooltip(function(key, x, y, e, graph) {
  42         return '<h3>' + key + '</h3>' + '<p>' +  y + ' damage in game #' + x + '</p>'
  43       })
  44       .color(keyColor);
  45
  46     chart.xAxis
  47       .axisLabel("Game ID")
  48       .showMaxMin(false)
  49       .ticks(5)
  50       .tickFormat(function(d) { return data.games[d]; });
  51
  52     chart.yAxis
  53       .tickFormat(d3.format(',02d'));
  54
  55     d3.select('#damageChartSVG')
  56       .datum(transformedData)
  57       .transition().duration(500).call(chart);
  58
  59     nv.utils.windowResize(chart.update);
  60
  61     return chart;
  62   });
  63 }
  64
  65 var drawAccuracyChart = function(data) {
  66   // the chart should fill the "accuracyChart" div
  67   var width = document.getElementById("accuracyChart").offsetWidth;
  68
  69   // get rid of empty values
  70   data.weapon_stats = data.weapon_stats.filter(function(e){ return e.fired > 0; });
  71
  72   // transform the dataset into something nvd3 can use
  73   var transformedData = d3.nest()
  74     .key(function(d) { return d.weapon_cd; }).entries(data.weapon_stats);
  75
  76   // transform games list into a map such that games[game_id] = linear sequence
  77   var games = {};
  78   data.games.forEach(function(v,i){ games[v] = i; });
  79
  80   // margin model
  81   var margin = {top: 20, right: 30, bottom: 30, left: 40},
  82       height = 300 - margin.top - margin.bottom;
  83
  84   width -= margin.left - margin.right;
  85
  86   // colors
  87   keyColor = function(d, i) {return colorScale(d.key)};
  88
  89   var chart;
  90   nv.addGraph(function() {
  91     chart = nv.models.lineChart()
  92       .margin(margin)
  93       .width(width)
  94       .height(height)
  95       .forceY([0,1])
  96       .x(function(d) { return games[d.game_id] })
  97       .y(function(d) {
  98         if(d.fired > 0) {
  99           return d.hit/d.fired;
 100         } else {
 101           return 0;
 102         }
 103       })
 104       .tooltip(function(key, x, y, e, graph) {
 105         return '<h3>' + key + '</h3>' + '<p>' +  y + ' accuracy in game #' + x + ' <br /> ' + data.averages[key]  + '% average</p>';
 106       })
 107       .color(keyColor);
 108
 109     chart.xAxis
 110       .axisLabel("Game ID")
 111       .showMaxMin(false)
 112       .ticks(5)
 113       .tickFormat(function(d) { return data.games[d]; });
 114
 115     var yScale = d3.scale.linear().domain([0,1]).range([0,height]);
 116     chart.yAxis
 117       .axisLabel('% Accuracy')
 118       .tickFormat(d3.format('2%'));
 119
 120     d3.select('#accuracyChartSVG')
 121       .datum(transformedData)
 122       .transition().duration(500).call(chart);
 123
 124     nv.utils.windowResize(chart.update);
 125
 126     return chart;
 127   });
 128 }