Skip to content

Instantly share code, notes, and snippets.

@kevinwarne
Last active August 29, 2015 14:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kevinwarne/27a7f949571014ba3c36 to your computer and use it in GitHub Desktop.
Save kevinwarne/27a7f949571014ba3c36 to your computer and use it in GitHub Desktop.
Bar Chart With Drilldown Data
[
{"x":2009,"y":1259,"drilldowns":[
{"title":"Gender","values":[
{"label":"Male","value":592},
{"label":"Female","value":668}
]},
{"title":"Level","values":[
{"label":"Freshmen","value":486},
{"label":"Sophmores","value":430},
{"label":"Juniors","value":214},
{"label":"Seniors","value":129}
]}
]},
{"x":2010,"y":1319,"drilldowns":[
{"title":"Gender","values":[
{"label":"Male","value":603},
{"label":"Female","value":716}
]},
{"title":"Level","values":[
{"label":"Freshmen","value":712},
{"label":"Sophmores","value":314},
{"label":"Juniors","value":185},
{"label":"Seniors","value":108}
]}
]},
{"x":2011,"y":1279,"drilldowns":[
{"title":"Gender","values":[
{"label":"Male","value":862},
{"label":"Female","value":417}
]},
{"title":"Level","values":[
{"label":"Freshmen","value":486},
{"label":"Sophmores","value":392},
{"label":"Juniors","value":278},
{"label":"Seniors","value":123}
]}
]},
{"x":2012,"y":1450,"drilldowns":[
{"title":"Gender","values":[
{"label":"Male","value":490},
{"label":"Female","value":960}
]},
{"title":"Level","values":[
{"label":"Freshmen","value":543},
{"label":"Sophmores","value":489},
{"label":"Juniors","value":320},
{"label":"Seniors","value":98}
]}
]}
]
<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
svg {
font-family: "Helvetica Neue", Helvetica;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis path {
stroke-opacity: 0.3;
}
rect{
stroke:black;
stroke-width:0.5;
}
.bar-drilldown-bar{
pointer-events:none;
opacity:0.9;
}
text{
font-size:12px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 30, bottom: 30, left: 60},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var chart_svg = d3
.select('body')
.append('svg')
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append('g')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var data;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .2);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var xAxisGroup = chart_svg
.append('g')
.attr('class','x axis')
.attr("transform", "translate(0," + height + ")");
var yAxisGroup = chart_svg
.append('g')
.attr('class','y axis')
.attr("transform", "translate(0,0)");
var barGroup = chart_svg
.append('g')
.attr('class','bars');
var color = d3.scale.category20();
d3.json('data.json', function(error,json){
if (error) return console.warn(error);
data = json;
make_chart()
})
function bar_mouseover(d){
d3.select(this).selectAll(".bar-drilldown-bar rect")
.transition()
.duration(300)
.attr('width',function(d1){return d1.width})
.attr('x',function(d1){return d1.x0});
}
function bar_mouseout(d){
d3.select(this).selectAll(".bar-drilldown-bar rect")
.transition()
.duration(300)
.attr('width',0)
.attr('x',0);
}
function make_chart(){
console.log(data)
x.domain(data.map(function(d){return d.x}))
y.domain([0, d3.max(data, function(d) { return d.y; })]);
xAxisGroup.call(xAxis);
yAxisGroup.call(yAxis);
var bars = barGroup.selectAll('g.bar').data(data);
var enteredBars = bars.enter()
.append('g')
.attr('class','bar')
.attr("transform", function(d, i) { return "translate(" + (x(d.x)) + ",0)"; })
.on('mouseover', bar_mouseover)
.on('mouseout', bar_mouseout);
enteredBars.append('rect');
bars.select('rect')
.attr("y", function(d) { return y(d.y); })
.attr("height", function(d) { return height - y(d.y); })
.attr("width", x.rangeBand())
.style('fill',color('first'));
var barDrilldownGroups = bars
.append('g')
.attr('class','bar-drilldowns');
var barDrilldowns = barDrilldownGroups.selectAll('g.bar-drilldown').data(function(d){return d.drilldowns});
var enteredDrilldowns = barDrilldowns.enter()
.append('g')
.attr('class','bar-drilldown');
var barDrilldownBars = enteredDrilldowns.selectAll('g.bar-drilldown-bar').data(function(d){return d.values});
var enteredDrilldownBars = barDrilldownBars.enter()
.append('g')
.attr('class','bar-drilldown-bar');
enteredDrilldownBars.append('rect');
bars.each(function(d){
var bar = d3.select(this);
var y2 = d3.scale.linear()
.range([0,height-y(d.y)])
.domain([0,d.y]);
bar.selectAll('.bar-drilldown').each(function(d1,i1){
var drilldown = d3.select(this);
var drilldown_bars = drilldown.selectAll('.bar-drilldown-bar rect');
var drilldown_width = (x.rangeBand()/(d.drilldowns.length+1));
drilldown.attr("transform", "translate(0,"+y(d.y)+")");
var y_position_track = 0;
drilldown_bars.each(function(d2){
d2.y0 = y_position_track;
d2.x0 = drilldown_width*i1;
d2.width = drilldown_width;
y_position_track += y2(d2.value);
})
drilldown_bars
.attr('width',0)
.attr('height',function(d2){return y2(d2.value);})
.attr('y',function(d2){return d2.y0;})
.attr('x',0)
.style('fill',function(d2){return color(d2.label);});
})
})
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment