Simple bars with hover event

<!DOCTYPE html>
<html>
<head>
  <title>Simple Example</title>
  
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/underscore@1.12.1/underscore-min.js"></script>
  <style>
    #chart {
      position: relative;
    }
    #chart .item {
      width: 20px;
      padding: 0 1px;
      height: 200px;
      float: left;
      position: relative;
    }
    #chart .bar {
      width: 20px;
      position: absolute;
    }
    #tooltip {
      position: absolute;
      left: 200px;
      top: 94px;
    }
    #baseline {
      height: 1px;
      background: #e2e2e2;
      position: absolute;
      top: 100px;
      left: 0px;
    }
  </style>
</head>
 <body>

// construct a scale
  var changes = _(data)
    .chain()
    .pluck('change')
    .map(function(d) { return Math.abs(parseInt(d)); })
    .value();
  var scale = d3.scale.linear()
    .domain([0, d3.max(changes)])
    .range(["0px", "100px"]);

// render the chart
  d3.select('#chart')
    .selectAll('.item')
    .data(data)
    .enter().append('div')
      .attr('class', 'item')
      .on("mouseover", hover)
      .append('div')
        .attr('class', 'bar')
        .style('height', function(d) { return scale(Math.abs(d.change)); })
        .style('background', colorize)
        .each(position);

// add a baseline
  d3.select('#baseline')
    .style('width', data.length*22 + 'px');

// tooltip
  function hover(d) {
    var num = 0,
        color = 'black';
    if (d.change > 0) {
      color = 'green';
      num = "+" + d.change;
    } else if (d.change < 0) {
      color = 'red';
      num = d.change;
    }
    d3.select("#tooltip")
      .html(d.item + "<br/><span style='color:" + color + "'>" + num + "</span>");
  }

// position above or below axis
  function position(d) {
    if (d.change > 0) {
      d3.select(this).style('bottom', '100px');
    } else if (d.change < 0) {
      d3.select(this).style('top', '100px');
    }
  }

// red/green coloring
  function colorize(d) {
    if (d.change > 0) {
      return 'green';
    } else if (d.change < 0) {
      return 'red';
    }
  }
});
</script>

</body>
</html>

Modified http://mbostock.github.com/d3/d3.v2.js to a secure url

Modified http://documentcloud.github.com/underscore/underscore-min.js to a secure url

https://mbostock.github.com/d3/d3.v2.js

https://documentcloud.github.com/underscore/underscore-min.js