Skip to content

Instantly share code, notes, and snippets.

@gelicia gelicia/_.md

Created Mar 5, 2013
Embed
What would you like to do?
Simple Stacked Bar Charts data 2
{"description":"Simple Stacked Bar Charts data 2","endpoint":"","display":"svg","public":true,"require":[{"name":"Underscore","url":"http://underscorejs.org/underscore.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}
/*modified from Mike Bostock at http://bl.ocks.org/3943967 */
function getSessionCount(sessionCounts, state){
for (var i = 0; i < sessionCounts.length; i++) {
if (sessionCounts[i].state == state){
return sessionCounts[i].sessionCount;
}
}
return 0;
}
var data = [
{"key":"0", sessionCounts : [{state:'AZ', sessionCount:5}, {state:'CA', sessionCount:14}, {state:'CT', sessionCount:30}] },
{"key":"1", sessionCounts : [{state:'AZ', sessionCount:8}, {state:'WI', sessionCount:23}, {state:'IA', sessionCount:12}] },
{"key":"2", sessionCounts : [{state:'AZ', sessionCount:3}, {state:'CA', sessionCount:9}] }
];
var uniqueStates = [];
for (var i = 0; i < data.length; ++i) {
for (var j = 0; j < data[i].sessionCounts.length; ++j) {
uniqueStates.push(data[i].sessionCounts[j].state);
}
}
uniqueStates = _.uniq(uniqueStates);
uniqueStates.sort(function(a, b){
if (a < b){ return -1;}
if (a > b){ return 1; }
return 0;
});
var n = uniqueStates.length,
m = data.length, // number of samples per layer
stack = d3.layout.stack(),
labels = data.map(function(d) {return d.key;});
//go through each state
//then go through each object in data and pull out that state if it exists
//and put it into an array where x is the index and y is the number
layers = stack(d3.range(n).map(function(d) {
var a = [];
var state = uniqueStates[d];
for (var i = 0; i < m; ++i) { //go through each hour and look for that state
a[i] = {x: i, y: getSessionCount(data[i].sessionCounts, state)};
}
return a;
})),
//the largest single layer
yGroupMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y; }); }),
//the largest stack
yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });
var margin = {top: 40, right: 61, bottom: 20, left: 38},
width = 526 - margin.left - margin.right,
height = 414 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.domain(d3.range(m))
.rangeRoundBands([0, width], .08);
var y = d3.scale.linear()
.domain([0, yStackMax])
.range([height, 0]);
var color = d3.scale.category20()
.domain([0, n - 1]);
var xAxis = d3.svg.axis()
.scale(x)
.tickSize(1)
.tickPadding(6)
.tickValues(labels)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.tickSize(1)
.tickPadding(6)
.tickValues([0, 25, 50])
.orient("left");
var svg = d3.select("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 layer = svg.selectAll(".layer")
.data(layers)
.enter().append("g")
.attr("class", "layer")
.style("fill", function(d, i) { return color(i); });
layer.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y0 + d.y); })
.attr("width", x.rangeBand())
.attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(0," + 0 + ")")
.call(yAxis);
var legend = svg.append("g")
.attr({
width: 100,
height: 100,
transform: "translate(-20,2)"
})
.classed("legend", true);
legend.selectAll("rect")
.data(layers)
.enter()
.append("rect")
.attr({
x: 468,
y: function(d,i) { return i * 20; },
width: 10,
height: 10,
fill: function(d, i) {
return color(i);
}
});
legend.selectAll("text")
.data(layers)
.enter()
.append("text")
.attr({
x : 481,
y : function(d,i) {return i * 20 + 11;}
})
.text(function(d, i){
return uniqueStates[i];
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.