D3 Examples - Reusable D3 column chart that supports negative values

Reusable D3 column chart that supports negative values

See in action /llad/3766585

This simple column chart shows how to handle negative values on the y axis. It handles ordinal values for the X axis only.

I started with this gist from Mike Bostock: https://gist.github.com/2368837 see it on blocks: /mbostock/2368837

borrowed a bit from the histogram example in D3: https://github.com/mbostock/d3/tree/master/examples/histogram

and used the reusable chart convention from: http://bost.ocks.org/mike/chart/

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>  
    <script src="https://d3js.org/d3.v2.min.js?2.10.0"></script>
    <script type="text/javascript" src="../d3.v2.js" charset="utf-8" ></script>
    <script type="text/javascript" src="column-chart.js"></script>
<style>
​
.chart rect {
  stroke: white;
  fill-opacity: .6;
  fill: steelblue;
​
}
.bar.positive {
  fill: steelblue;
}
​
.bar.negative {
  fill: brown;
}
​
.axis text {
  font: 10px sans-serif;
}
​
.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
​
​
</style>
  
  </head>
  <body>
  <div id="example"></div>
​
  
<script>
​
var data = [["A",0.012], ["B",-0.025], ["C",0.008], ["D",0.023], ["E",-0.009], ["F", 0.005]];
​
​
d3.select("#example")
  .datum(data)
    .call(columnChart()
      .width(960)
      .height(500)
      .x(function(d, i) { return d[0]; })
      .y(function(d, i) { return d[1]; }));
​
</script>
​
​
  </body>
</html>
    