mk8-dataviz.js

// Generated by CoffeeScript 1.7.1
(function() {
  'use strict';
  var COLOR_TABLE, DISPLAY_AMOUNT, L, TEMPLATIZE, boxen, filter_search, results_collected, score, search_string, sort_stack, space_regex,
    __slice = [].slice;

  L = function() {
    var things;
    things = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
    return console.log.apply(console, things);
  };

  boxen = document.querySelectorAll('form input[type="checkbox"]');

  filter_search = document.querySelector('#filter-search');

  space_regex = / /g;

  DISPLAY_AMOUNT = 5;

  COLOR_TABLE = {
    "Speed": d3.rgb(255, 0, 0),
    "Acceleration": d3.rgb(255, 214, 3),
    "Weight": d3.rgb(42, 186, 71),
    "Handling": d3.rgb(95, 158, 160),
    "Traction": d3.rgb(46, 46, 249),
    "Mini-Turbo": d3.rgb(255, 97, 0)
  };

  search_string = null;

  results_collected = 0;

  sort_stack = [];

  TEMPLATIZE = function(d, i) {
    var c, char_images, t, tire_images, v, vehicle_images, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2;
    char_images = [];
    vehicle_images = [];
    tire_images = [];
    _ref = d.value.Options[0];
    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
      c = _ref[_i];
      char_images.push("<div title='" + c + "' alt='" + c + "' class='charopt mk8" + (c.replace(space_regex, '').replace('.', '').toLowerCase()) + "'></div>");
    }
    _ref1 = d.value.Options[1];
    for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
      v = _ref1[_j];
      vehicle_images.push("<div title='" + v + "' alt='" + v + "' class='bodyopt mk8" + (v.replace(space_regex, '').replace('.', '').toLowerCase()) + "body'></div>");
    }
    _ref2 = d.value.Options[2];
    for (_k = 0, _len2 = _ref2.length; _k < _len2; _k++) {
      t = _ref2[_k];
      tire_images.push("<div title='" + t + "' alt='" + t + "' class='tireopt mk8" + (t.replace(space_regex, '').replace('.', '').toLowerCase()) + "tires'></div>");
    }
    return "<div class='combo-details'>\n  <div class='opts'>\n    <div class='opt charopts'>" + (char_images.join("")) + "</div>\n    <div class='opt vehicleopts'>" + (vehicle_images.join("")) + "</div>\n    <div class='opt wheelsopts'>" + (tire_images.join("")) + "</div>\n  </div>\n  <div class='chart'>\n    <div class='bar sub-bar speed-bar'    style='width: " + (d.value["Speed"]["Ground"] / 6 * 100 + '%') + "'>&nbsp;</div>\n    <div class='bar sub-bar speed-bar'    style='width: " + (d.value["Speed"]["Water"] / 6 * 100 + '%') + "'>&nbsp;</div>\n    <div class='bar sub-bar speed-bar'    style='width: " + (d.value["Speed"]["Air"] / 6 * 100 + '%') + "'>&nbsp;</div>\n    <div class='bar sub-bar speed-bar'    style='width: " + (d.value["Speed"]["Anti-Gravity"] / 6 * 100 + '%') + "'>&nbsp;</div>\n    <div class='bar acceleration-bar'     style='width: " + (d.value["Acceleration"] / 6 * 100 + '%') + "'>&nbsp;</div>\n    <div class='bar weight-bar'           style='width: " + (d.value["Weight"] / 6 * 100 + '%') + "'>&nbsp;</div>\n    <div class='bar sub-bar handling-bar' style='width: " + (d.value["Handling"]["Ground"] / 6 * 100 + '%') + "'>&nbsp;</div>\n    <div class='bar sub-bar handling-bar' style='width: " + (d.value["Handling"]["Water"] / 6 * 100 + '%') + "'>&nbsp;</div>\n    <div class='bar sub-bar handling-bar' style='width: " + (d.value["Handling"]["Air"] / 6 * 100 + '%') + "'>&nbsp;</div>\n    <div class='bar sub-bar handling-bar' style='width: " + (d.value["Handling"]["Anti-Gravity"] / 6 * 100 + '%') + "'>&nbsp;</div>\n    <div class='bar traction-bar'         style='width: " + (d.value["Traction"] / 6 * 100 + '%') + "'>&nbsp;</div>\n    <div class='bar miniturbo-bar'        style='width: " + (d.value["Mini-Turbo"] / 6 * 100 + '%') + "'>&nbsp;</div>\n  </div>\n  <br class='clear'/>\n</div>\n<div class='details hide'>\n  <hr class='clear'/>\n  <div class='optnames'>\n    <div class='opt charopts'><p>" + (d.value.Options[0].join("</p><p>")) + "</p></div>\n    <div class='opt vehicleopts'><p>" + (d.value.Options[1].join("</p><p>")) + "</p></div>\n    <div class='opt wheelsopts'><p>" + (d.value.Options[2].join("</p><p>")) + "</p></div>\n    <div class='clear'/>\n  </div>\n  <hr class='clear'/>\n  <table class='stat'>\n    <thead>\n      <tr>\n          <th colspan='4'>Speed</th>\n          <th>Acceleration</th>\n          <th>Weight</th>\n          <th colspan='4'>Handling</th>\n          <th>Traction</th>\n          <th>Mini-Turbo</th>\n      </tr>\n      <tr>\n          <th class='speed-heading'>Ground</th>\n          <th class='speed-heading'>Water</th>\n          <th class='speed-heading'>Air</th>\n          <th class='speed-heading'>Anti-Gravity</th>\n          <th class='acceleration-heading'></th>\n          <th class='weight-heading'></th>\n          <th class='handling-heading'>Ground</th>\n          <th class='handling-heading'>Water</th>\n          <th class='handling-heading'>Air</th>\n          <th class='handling-heading'>Anti-Gravity</th>\n          <th class='traction-heading'></th>\n          <th class='miniturbo-heading'></th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n      <td>" + d.value["Speed"]["Ground"] + "</td>\n      <td>" + d.value["Speed"]["Water"] + "</td>\n      <td>" + d.value["Speed"]["Air"] + "</td>\n      <td>" + d.value["Speed"]["Anti-Gravity"] + "</td>\n      <td>" + d.value["Acceleration"] + "</td>\n      <td>" + d.value["Weight"] + "</td>\n      <td>" + d.value["Handling"]["Ground"] + "</td>\n      <td>" + d.value["Handling"]["Water"] + "</td>\n      <td>" + d.value["Handling"]["Air"] + "</td>\n      <td>" + d.value["Handling"]["Anti-Gravity"] + "</td>\n      <td>" + d.value["Traction"] + "</td>\n      <td>" + d.value["Mini-Turbo"] + "</td>\n      </tr>\n    </tbody>\n  </table>\n</div>\n\n<br class='clear'/>";
  };

  score = function(combo, keys) {
    var avg_of_vals, calculate_deviations, deviation, k, sum, vals, _i, _len;
    if (keys.length === 0) {
      return 0;
    }
    vals = [];
    sum = 0;
    for (_i = 0, _len = keys.length; _i < _len; _i++) {
      k = keys[_i];
      if (k === "Handling" || k === "Speed") {
        if (combo[k]["avg"] === void 0) {
          combo[k]["avg"] = (combo[k]["Ground"] + combo[k]["Air"] + combo[k]["Water"] + combo[k]["Anti-Gravity"]) / 4;
        }
        sum += combo[k]["avg"];
        vals.push(combo[k]["avg"]);
      } else if (k === "Acceleration") {
        sum += Math.floor(combo[k]);
        vals.push(Math.floor(combo[k]));
      } else {
        sum += combo[k];
        vals.push(combo[k]);
      }
    }
    if (!(keys.length > 1)) {
      return sum;
    }
    avg_of_vals = (vals.reduce(function(a, b) {
      return a + b;
    })) / keys.length;
    calculate_deviations = function(a, b) {
      return a + Math.pow(b - avg_of_vals, 2);
    };
    deviation = vals.reduce(calculate_deviations, 0);
    return (Math.pow(sum, 2)) / (1 + Math.pow(deviation, 2));
  };

  d3.json('averaged_and_combined.json', function(err, json_data) {
    var FILTER_RESULTS_WITH_OPACITY, PADDING, RANGE, aScale, combination_points, detail_view, graph, performing2dCompare, setLabels, xAxis, xAxisEl, xLabel, xScale, yAxis, yAxisEl, yLabel, yScale;
    if (err) {
      console.error(err);
      throw new Error('Error getting averaged');
    }
    PADDING = 50;
    RANGE = [PADDING, 600 - PADDING];
    xScale = d3.scale.linear().domain([0, 6]).rangeRound(RANGE).clamp(true);
    yScale = d3.scale.linear().domain([6, 0]).rangeRound(RANGE).clamp(true);
    aScale = d3.scale.linear().domain([Object.keys(json_data).length - 1, 0]).rangeRound(RANGE).clamp(true);
    xAxis = d3.svg.axis().scale(xScale).orient('bottom').tickSize(RANGE[1] - PADDING / 2 - 20).tickFormat(d3.format('.0')).ticks(7);
    yAxis = d3.svg.axis().scale(yScale).orient('left').tickSize(RANGE[1] - PADDING / 2 - 20).tickFormat(d3.format('.0')).ticks(7);
    graph = d3.select('#graph');
    performing2dCompare = function() {
      if (sort_stack.length < 2) {
        return 0;
      } else {
        return 1;
      }
    };
    setLabels = function() {
      xLabel.text(sort_stack[0]);
      if (1 < sort_stack.length) {
        return yLabel.text(sort_stack[1]);
      } else {
        return yLabel.text('');
      }
    };
    xAxisEl = graph.append('g').attr('id', 'x-axis').attr('transform', "translate(0," + PADDING + ")").call(xAxis);
    yAxisEl = graph.append('g').attr('id', 'y-axis').attr('transform', "translate(" + RANGE[1] + ",0)").call(yAxis).style('opacity', function() {
      return performing2dCompare();
    });
    xLabel = xAxisEl.append('text').attr('class', 'x-label').attr('transform', "translate(" + (xScale(3)) + "," + (RANGE[1] - 10) + ")").attr('text-anchor', 'middle');
    yLabel = yAxisEl.append('text').attr('class', 'y-label').attr('transform', "translate(-" + (RANGE[1] - PADDING / 2) + "," + (yScale(3)) + "),rotate(-90)").attr('text-anchor', 'middle');
    combination_points = graph.selectAll('circle').data(d3.entries(json_data)).enter().append('circle').attr('cx', xScale(0)).attr('cy', yScale(0)).attr('r', 5);
    detail_view = d3.select('#detail-view');
    combination_points.on('mouseover', function(d) {
      return detail_view.html(function() {
        var c, char_images, i, t, tire_images, v, vehicle_images, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2;
        char_images = vehicle_images = tire_images = '';
        _ref = d.value.Options[0];
        for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
          c = _ref[i];
          char_images += "<div title='" + c + "' alt='" + c + "' class='mk8" + (c.replace(space_regex, '').replace('.', '').toLowerCase()) + "'></div>";
        }
        _ref1 = d.value.Options[1];
        for (i = _j = 0, _len1 = _ref1.length; _j < _len1; i = ++_j) {
          v = _ref1[i];
          vehicle_images += "<div title='" + v + "' alt='" + v + "' class='mk8" + (v.replace(space_regex, '').replace('.', '').toLowerCase()) + "body'></div>";
        }
        _ref2 = d.value.Options[2];
        for (i = _k = 0, _len2 = _ref2.length; _k < _len2; i = ++_k) {
          t = _ref2[i];
          tire_images += "<div title='" + t + "' alt='" + t + "' class='mk8" + (t.replace(space_regex, '').replace('.', '').toLowerCase()) + "tires'></div>";
        }
        return "<div class='opts'>\n  <div class='opt'>" + char_images + "</div>\n  <div class='opt'>" + vehicle_images + "</div>\n  <div class='opt'>" + tire_images + "</div>\n</div>\n<div class='chart'>\n  <div class='bar sub-bar speed-bar'    style='width: " + (d.value["Speed"] / 6 * 100 + '%') + "'>&nbsp;</div>\n  <div class='bar sub-bar speed-bar'    style='width: " + (d.value["Speed"] / 6 * 100 + '%') + "'>&nbsp;</div>\n  <div class='bar sub-bar speed-bar'    style='width: " + (d.value["Speed"] / 6 * 100 + '%') + "'>&nbsp;</div>\n  <div class='bar sub-bar speed-bar'    style='width: " + (d.value["Speed"] / 6 * 100 + '%') + "'>&nbsp;</div>\n  <div class='bar acceleration-bar'     style='width: " + (d.value["Acceleration"] / 6 * 100 + '%') + "'>&nbsp;</div>\n  <div class='bar weight-bar'           style='width: " + (d.value["Weight"] / 6 * 100 + '%') + "'>&nbsp;</div>\n  <div class='bar sub-bar handling-bar' style='width: " + (d.value["Handling"] / 6 * 100 + '%') + "'>&nbsp;</div>\n  <div class='bar sub-bar handling-bar' style='width: " + (d.value["Handling"] / 6 * 100 + '%') + "'>&nbsp;</div>\n  <div class='bar sub-bar handling-bar' style='width: " + (d.value["Handling"] / 6 * 100 + '%') + "'>&nbsp;</div>\n  <div class='bar sub-bar handling-bar' style='width: " + (d.value["Handling"] / 6 * 100 + '%') + "'>&nbsp;</div>\n  <div class='bar traction-bar'         style='width: " + (d.value["Traction"] / 6 * 100 + '%') + "'>&nbsp;</div>\n  <div class='bar miniturbo-bar'        style='width: " + (d.value["Mini-Turbo"] / 6 * 100 + '%') + "'>&nbsp;</div>\n</div>";
      });
    });
    FILTER_RESULTS_WITH_OPACITY = function(d, i) {
      if (search_string === null || search_string.test("".concat.apply([].concat.apply([], d.value.OptionsString)))) {
        return 1;
      } else {
        return 0;
      }
    };
    d3.select('#filter-search').on('input.graph', function() {
      search_string = new RegExp(filter_search.value, 'i');
      return combination_points.transition().duration(2000).style('opacity', FILTER_RESULTS_WITH_OPACITY);
    });
    return d3.selectAll('form input[type="checkbox"]').on('click.graph', function(c) {
      var b, idx, rgbInterpolator, stat, _i, _j, _len, _len1;
      if (this.checked) {
        sort_stack.push(this.name);
      } else {
        for (idx = _i = 0, _len = sort_stack.length; _i < _len; idx = ++_i) {
          stat = sort_stack[idx];
          if (stat === this.name) {
            sort_stack.splice(idx, 1);
          }
        }
      }
      if (2 < sort_stack.length) {
        sort_stack.splice(0, sort_stack.length - 2);
      }
      for (_j = 0, _len1 = boxen.length; _j < _len1; _j++) {
        b = boxen[_j];
        if (sort_stack.indexOf(b.name) === -1) {
          b.checked = false;
        }
      }
      setLabels();
      yAxisEl.transition().duration(1000).style('opacity', function() {
        return performing2dCompare();
      });
      if (1 < sort_stack.length) {
        rgbInterpolator = d3.interpolateRgb(COLOR_TABLE[sort_stack[0]], COLOR_TABLE[sort_stack[1]]);
        combination_points.attr('fill', function(d) {
          return rgbInterpolator(d.value[sort_stack[1]] / (d.value[sort_stack[0]] + d.value[sort_stack[1]]));
        });
      } else {
        combination_points.attr('fill', 'white');
      }
      return combination_points.transition().duration(1000).attr('cx', function(d, i, el) {
        if (0 < sort_stack.length) {
          return xScale(d.value[sort_stack[0]]);
        } else {
          return xScale(0);
        }
      }).attr('cy', function(d, i, el) {
        if (1 < sort_stack.length) {
          return yScale(d.value[sort_stack[1]]);
        } else {
          return aScale(i);
        }
      }).style('opacity', FILTER_RESULTS_WITH_OPACITY);
    });
  });

}).call(this);

//# sourceMappingURL=mk8-dataviz.map