Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
csv is just a file in a gist
# Editor backup files
*.bak
*~
Initiated Number Type Total_Gross_Actual Total_Gross_Estimate
08/01/2004 1 type_1 9263.34 20085
08/01/2004 3 type_2 357600.16 330674
08/01/2004 5 type_3 59244.87 222000
08/01/2004 6 type_4 6608.93 47100
08/01/2004 7 type_4 16774.64 32025
08/01/2004 8 type_5 3078.9 29555
08/01/2004 9 type_6 0 31500
08/01/2004 4 type_2 31121.37 133925
08/01/2004 10 type_6 20860.47 372670
08/01/2004 2 type_1 1070.05 14420
16/01/2004 11 type_3 632017.16 633029
16/01/2004 12 type_5 0 40000
/* ### 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)
}
});
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment