D3 Examples - Reusable D3 column chart with transparency dimension

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.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <script src="https://d3js.org/d3.v2.min.js?2.10.0"></script>
    <!-- for c9.io dev --> <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>
​
  
<script>
​
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>
​
  
<script src="https://spreadsheets.google.com/feeds/list/0agxrt1aeoxhodflwbl9tqm12cwrlrwdmvfy0ber4c2c/od6/public/values?alt=json-in-script&callback=mycallback"></script>
​
​
​
​
  </body>
</html>
    