syntagmatic/data.csv

## 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"}]

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

  <!-- Underscore.js : http://documentcloud.github.com/underscore/ -->
  <script type="text/javascript" src="http://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>
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
	<!DOCTYPE html>
	<html>
	<head>
	<title>Simple Example</title>
	<!-- d3.js : https://github.com/mbostock/d3/wiki/ -->
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script>

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