Simple bars with hover event by syntagmatic

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Simple Example</title>
  <!-- d3.js : https://github.com/mbostock/d3/wiki/ -->
  <script type="text/javascript" src="//mbostock.github.com/d3/d3.v2.js"></script>

  <!-- Underscore.js : //documentcloud.github.com/underscore/ --> 
  <script type="text/javascript" src="//documentcloud.github.com/underscore/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>

  <div id="chart"><div id="baseline"></div></div>
  <div id="tooltip"></div>

  <div style="clear:both"></div>

<script type="text/javascript">
d3.json('data.json', function(data) {
    console.log(data);

  // 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>

data.csv

item,num,change
Basetables,44,2
Fields,941,159
File Access,2,1
File References,0,
Base Directories,0,
Tables,73,-93
Relationships,208,60
Value Lists,47,21

data.json

[{"item":"Basetables","num":"44","change":"2"},{"item":"Fields","num":"941","change":"159"},{"item":"File Access","num":"2","change":"1"},{"item":"File References","num":"0","change":""},{"item":"Base Directories","num":"0","change":""},{"item":"Tables","num":"73","change":"-93"},{"item":"Relationships","num":"208","change":"60"},{"item":"Value Lists","num":"47","change":"21"}]