Reusable D3 column chart with transparency dimension

See it in action on bl.ocks.org

Created to look at returns within a portfolio of investments, this shows the allocation to a particular investment using transparency of the columns. The more opaque the column, the greater the allocation in the portfolio.

This also connects to this Google Spreadsheet for data.

This builds on my column chart gist

<!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="density-column.js"></script>
<style>

.bars rect.positive{
        fill: steelblue;
        stroke: steelblue;
        stroke-width: 1px;
        stroke-opacity: .5;
        shape-rendering: crispEdges;
    }
    .bars rect.negative {
        fill: brown;
        stroke: brown;
        stroke-width: 1px;
        stroke-opacity: .5;
        shape-rendering: crispEdges;
    }
    
    line.return.positive {
        stroke-width: 2px;
        stroke-opacity: 1;
        stroke: steelblue;
        shape-rendering: crispEdges;
    }
    line.return.negative {
        fill: none;
        stroke-width: 2px;
        stroke-opacity: 1;
        stroke: brown;
        shape-rendering: crispEdges;
    }
    .axis text {
        font: 10px sans-serif;
    }
    .axis path, .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }
    .axis.zero line.tick {
        fill: none;
        stroke: lightgray;
        shape-rendering: crispEdges;
    }
    
    .axis.total line.tick {
        fill: none;
        stroke: #000;
        stroke-width: 1.5px;
        shape-rendering: crispEdges;
    }
    
</style>
  
  </head>
  <body>
  <div id="example"></div>

function myCallback(spreadsheetdata) {
  // Callback from Google spreadsheet API for JSONP
  // Gets the data from a published spreadsheet and then passes it to the chart

var data = [];
    
  for (var i = 0; i < spreadsheetdata.feed.entry.length; i++) {
      var entry = spreadsheetdata.feed.entry[i];
      var row = {};
      row.inv = entry.gsx$investment.$t;
      row.ror = entry.gsx$return.$t;
      row.allocation = entry.gsx$allocation.$t;
      data[i] = row;
  };

d3.select("#example")
      .datum(data)
    .call(densityChart()
      .width(960)
      .height(500)
      .x(function(d) { return d.inv; })
      .y(function(d) { return +d.ror; })
      .allocation(function(d) { return +d.allocation; })
      .yTickFormat(".1%"));
};

</script>

</body>
</html>

Modified http://d3js.org/d3.v2.min.js?2.10.0 to a secure url

Updated missing url https://spreadsheets.google.com/feeds/list/0Agxrt1aeoXHOdFlWbl9tQm12cWRlRWdMVFY0bER4c2c/od6/public/values?alt=json-in-script&callback=myCallback to https://spreadsheets.google.com/feeds/list/0agxrt1aeoxhodflwbl9tqm12cwrlrwdmvfy0ber4c2c/od6/public/values?alt=json-in-script&callback=mycallback

https://d3js.org/d3.v2.min.js?2.10.0

https://spreadsheets.google.com/feeds/list/0Agxrt1aeoXHOdFlWbl9tQm12cWRlRWdMVFY0bER4c2c/od6/public/values?alt=json-in-script&callback=myCallback