script.js

// Generated by CoffeeScript 1.4.0
var Chart, allAxis, axisMap, height, indexUpdateSub, lineClassMap, log, padding, responsibleUpdateSub, width;

padding = 35;

height = 450;

width = 940;

lineClassMap = {};

axisMap = {};

allAxis = {};

indexUpdateSub = function(event) {
  var cl, display, text, title;
  if (event.type === 'mouseenter') {
    title = $(event.target).text();
    text = 'indice: ' + title;
    cl = lineClassMap[title];
    display = '';
  } else {
    title = $(event.target).text();
    text = 'Andamento di alcuni indici italiani negli ultimi anni';
    cl = '';
    display = 'none';
  }
  $('div#submessage').text(text);
  $('div#submessage').attr('class', cl);
  return axisMap[title].transition().duration(300).style('display', display);
};

responsibleUpdateSub = function(event) {
  var color, text;
  if (event.type === 'mouseenter') {
    text = 'governo: ' + ($(event.target).text());
    color = 'gray';
  } else {
    text = 'Andamento di alcuni indici italiani negli ultimi anni';
    color = '';
  }
  return $('div#submessage').text(text).css('color', color);
};

log = function(m) {
  if (typeof console !== "undefined" && console !== null) {
    return console.log(m);
  }
};

Chart = (function() {

  function Chart(selector) {
    selector = selector || 'body';
    this.svg = d3.select(selector).append('svg').attr('width', width).attr('height', height);
    this.x = d3.scale.linear().domain([2000, 2012]).range([padding, width - padding]);
    this.axis = d3.svg.axis().scale(this.x).ticks(13).tickFormat(d3.format('0'));
    this.axisSelection = this.svg.append('g').attr('class', 'axis').attr('transform', 'translate(0, ' + (height - padding) + ')').call(this.axis);
    this.delay = 0;
  }

  Chart.prototype.load = function() {
    var _this = this;
    return d3.json('data.json', function(data) {
      return _this.handle(data);
    });
  };

  Chart.prototype.detach = function() {
    return $(this.svg.node).detach();
  };

  Chart.prototype.handle = function(data) {
    var index, _i, _len, _ref, _results,
      _this = this;
    this.data = data;
    this.governments = this.data[0];
    this.data = this.data.slice(1);
    this.svg.selectAll('rect.responsible').data(this.governments).enter().append('rect').attr('class', 'responsible').attr('y', padding).attr('height', height - 2 * padding).attr('x', function(d) {
      return _this.x(d.start);
    }).attr('width', function(d) {
      return _this.x(d.end) - _this.x(d.start);
    }).append('title').text(function(d) {
      return d.responsible;
    });
    this.svg.selectAll('line.elections').data(this.governments.slice(1)).enter().append('line').attr('class', 'elections').attr('y1', padding).attr('y2', height - padding).attr('x1', function(d) {
      return _this.x(d.start);
    }).attr('x2', function(d) {
      return _this.x(d.start);
    });
    $('rect.responsible').hover(responsibleUpdateSub);
    _ref = this.data;
    _results = [];
    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
      index = _ref[_i];
      _results.push(this.draw(index));
    }
    return _results;
  };

  Chart.prototype.draw = function(index) {
    var d, extent, init, line, path, yScale, zero,
      _this = this;
    yScale = d3.scale.linear().range([height - 2 * padding, 2 * padding]);
    line = d3.svg.line().x(function(d) {
      return _this.x(Number(d[0]));
    }).y(function(d) {
      return yScale(d[1]);
    }).interpolate('cardinal').tension(0.9);
    path = this.svg.append('path').attr('class', 'line ' + index["class"]);
    path.append('title').text(index.description);
    lineClassMap[index.description] = index["class"];
    extent = d3.extent(index.data.body, function(d) {
      return d[1];
    });
    yScale.domain(extent);
    init = index.data.body[0][1];
    zero = (function() {
      var _i, _len, _ref, _results;
      _ref = index.data.body;
      _results = [];
      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
        d = _ref[_i];
        _results.push([d[0], init]);
      }
      return _results;
    })();
    path.datum(zero).attr('d', line);
    path.datum(index.data.body).transition().duration(4000).delay(200 * this.delay).attr('d', line);
    this.delay += 1;
    this.axis = d3.svg.axis().scale(yScale).ticks(13).tickFormat(d3.format('0.0f')).orient('left');
    this.axisSelection = this.svg.append('g').attr('class', 'axis').attr('id', index.description).attr('transform', 'translate(' + (30 + Number(padding)) + ', 0)').call(this.axis).style('display', 'none');
    axisMap[index.description] = this.axisSelection;
    allAxis[index.description.slice(0, 5)] = this.axis;
    return $('path.line').hover(indexUpdateSub);
  };

  return Chart;

})();