xonstat/static/js/weaponCharts.js

   1 var weapons = ["laser", "shotgun", "uzi", "grenadelauncher", "electro", "crylink",
   2                "nex", "hagar", "rocketlauncher", "minstanex", "rifle",  "fireball",
   3                "minelayer", "seeker", "tuba", "hlac", "hook", "porto"];
   4
   5 var drawDamageChart = function(data) {
   6   // the chart should fill the "damageChart" div
   7   var width = document.getElementById("damageChart").offsetWidth;
   8
   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);
  12
  13   // transform games list into a map such that games[game_id] = linear sequence
  14   var games = {};
  15   data.games.forEach(function(v,i){ games[v] = i; });
  16
  17   // margin model
  18   var margin = {top: 20, right: 30, bottom: 30, left: 40},
  19       height = 500 - margin.top - margin.bottom;
  20
  21   width -= margin.left - margin.right;
  22
  23   // colors
  24   var colors = d3.scale.category20().domain(weapons);
  25   keyColor = function(d, i) {return colors(d.key)};
  26
  27   var chart;
  28   nv.addGraph(function() {
  29     chart = nv.models.stackedAreaChart()
  30       .margin(margin)
  31       .width(width)
  32       .height(height)
  33       .x(function(d) { return games[d.game_id] })
  34       .y(function(d) { return d.actual })
  35       .color(keyColor);
  36
  37     chart.xAxis
  38       .axisLabel("Game ID")
  39       .showMaxMin(false)
  40       .ticks(5)
  41       .tickFormat(function(d) { return data.games[d]; });
  42
  43     chart.yAxis
  44       .tickFormat(d3.format(',02d'));
  45
  46     d3.select('#damageChartSVG')
  47       .datum(transformedData)
  48       .transition().duration(500).call(chart);
  49
  50     nv.utils.windowResize(chart.update);
  51
  52     return chart;
  53   });
  54 }