csv is just a file in a gist

.gitignore

# Editor backup files
*.bak
*~

readme.csv

barchart.js

/* ### EDITED ### */ d3.csv('readme.csv', function(data) {
       var format = d3.time.format("%d/%m/%Y");
       var color = d3.scale.category10();

       data.forEach(function(o){
               o.Total_Gross_Actual = parseFloat(o.Total_Gross_Actual);
               o.Total_Gross_Estimate = parseFloat(o.Total_Gross_Estimate);
               o.Initiated = format.parse(o.Initiated);
       });

       var w = 1000;
       var h = 500;


       var yScale = d3.scale.linear()
               .domain([0,d3.max(data, function(d){
                       if (d.Total_Gross_Estimate > d.Total_Gross_Actual)
                               {
                                       return d.Total_Gross_Estimate
                               }
                               else
                               {
                                       return d.Total_Gross_Actual
                               }
               })])
               .range([0,h/2]);

       var yScale2 = d3.scale.linear()
               .domain([0,d3.max(data, function(d){
               if (d.Total_Gross_Estimate > d.Total_Gross_Actual)
                               {
                                       return d.Total_Gross_Estimate
                               }
                               else
                               {
                                       return d.Total_Gross_Actual
                               }
               })])
               .range([h/2,0]);

       var vis = d3.select("body")
                               .append("svg")
                               .attr("width", w+110)
                               .attr("height", h+100)
                               .append("g")
                               .attr("transform", "translate(100,50)")
                               ;
       var bigBarWidth = w/data.length - 1;
       var smallBarWidth = bigBarWidth/2;
       var smallBarOffset = (bigBarWidth-smallBarWidth)/2

       var bars = vis.selectAll("bar")
               .data(data)
               .enter().append("g")
               .on("click", typeFilter)
               .attr("class","bar")
               ;

//draw the data bars
       bars.append("rect")
               .attr("x", function (d,i){
                       return i * (w/data.length);
               })
               .attr("y", h/2)
               .attr("width", bigBarWidth)
               .attr("fill", function(d) { return color(d.Type); })
               .attr("opacity" , "0.5")
               .attr("height", function(d){
                       return yScale(d.Total_Gross_Estimate);
               })              ;


               bars.append("rect")
               .attr("x", function (d,i){
                       return i * (w/data.length);
               })
               .attr("y", function(d){
               return yScale2(d.Total_Gross_Actual);
               })
               .attr("width", bigBarWidth)
               .attr("fill", function(d) { return color(d.Type); })
               .attr("opacity" , "0.5")
               .attr("height", function(d){
                       return yScale(d.Total_Gross_Actual);
               });

//draw the difference bars

               bars.append("rect")
               .attr("x", function (d,i){
                       return i * (w/data.length) + smallBarOffset;
               })
               .attr("y",function(d){
                       if (d.Total_Gross_Actual-d.Total_Gross_Estimate > 0)
                       {
                               return yScale2(d.Total_Gross_Actual-d.Total_Gross_Estimate);
                       }
                       else
                       {
                               return 0;
                       }

               })
               .attr("width", smallBarWidth)
               .attr("fill", function(d) { return color(d.Type); })
               .attr("height", function(d){

                       if (d.Total_Gross_Actual-d.Total_Gross_Estimate > 0)
                       {
                               return yScale(d.Total_Gross_Actual-d.Total_Gross_Estimate);
                       }
                       else
                       {
                               return 0;
                       }
               });


               bars.append("rect")
               .attr("x", function (d,i){
                       return i * (w/data.length) + smallBarOffset;
               })
               .attr("y", h/2)
               .attr("width", smallBarWidth)
               .attr("fill", function(d) { return color(d.Type); })
               .attr("height", function(d){
                       if (d.Total_Gross_Estimate-d.Total_Gross_Actual >=0)
                       {
                               return yScale(d.Total_Gross_Estimate-d.Total_Gross_Actual);
                       }
                       else
                       {
                               return 0;
                       }

               })
               ;


//draw the axis

       var xScale = d3.scale.linear()
               .domain([0,1])
               .range([0,w]);

       var xAxis = d3.svg.axis()
       .scale(xScale)
       .orient("bottom")
               .ticks(0);

       var yAxis = d3.svg.axis()
               .scale(yScale)
               .orient("left")
               .ticks(5);

       var yAxis2 = d3.svg.axis()
               .scale(yScale2)
               .orient("left")
               .ticks(5);

   vis.append("g")
               .attr("class", "axis")
               .attr("transform", "translate(0,"+ h /2 +")")
               .call(yAxis);

       vis.append("g")
               .attr("class","axis")
               .call(yAxis2);

       vis.append("g")
               .attr("class", "axis")
               .attr("transform", "translate(0,"+ h /2 +")")
               .call(xAxis);

//function to filter on type click
       function typeFilter(d,i){
               var data2 = data.filter(function(e, j)
               {
                       return (e.Type !== d.Type);
               });
               var test = bars.filter(function(e, j)
               {
                       return (e.Type === d.Type);
               })
               /*.exit() */.remove();
               //console.log(test)

       }

});

index.html

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

    <svg id="svg"></svg>

    <script type="text/javascript" src="barchart.js"></script>
 </body>
</html>