Last active
August 29, 2015 14:10
-
-
Save kevinwarne/27a7f949571014ba3c36 to your computer and use it in GitHub Desktop.
Bar Chart With Drilldown Data
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[ | |
{"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} | |
]} | |
]} | |
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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