Grouped bars showing religion by top 5 countries. This is an example from the tutorial Splitting Charts.
forked from curran's block: Grouped Bars
xxxxxxxxxx
<html>
<head>
<meta charset="utf-8">
<title>D3 Example</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3-legend/1.1.0/d3-legend.js"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style>
.axis text {
font-family: 'Open Sans', sans-serif;
font-size: 19pt;
}
.axis .label {
font-size: 20pt;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.color-legend text {
font-family: 'Open Sans', sans-serif;
font-size: 19pt;
}
</style>
</head>
<body>
<script>
var outerWidth = 960;
var outerHeight = 500;
var margin = { left: 90, top: 8, right: 30, bottom: 66 };
var barPadding = 0.2;
var yColumn = d => d.TotalEnrolled;
var colorColumn = d => d.NeighborhoodTown;
var layerColumn = colorColumn;
var innerWidth = outerWidth - margin.left - margin.right;
var innerHeight = outerHeight - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", outerWidth)
.attr("height", outerHeight);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var xAxisG = g.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + innerHeight + ")");
var yAxisG = g.append("g")
.attr("class", "y axis");
var colorLegendG = g.append("g")
.attr("class", "color-legend")
.attr("transform", "translate(596, 0)");
var xScale = d3.scale.ordinal().rangeBands([0, innerWidth], barPadding);
var yScale = d3.scale.linear().range([innerHeight, 0]);
var colorScale = d3.scale.category10();
var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
.outerTickSize(0);
var yAxis = d3.svg.axis().scale(yScale).orient("left")
.ticks(5)
.tickFormat(d3.format("s"))
.outerTickSize(0);
var colorLegend = d3.legend.color()
.scale(colorScale)
.shapePadding(6.24)
.shapeWidth(25)
.shapeHeight(25)
.labelOffset(5);
function render(data){
var nested = d3.nest()
.key(function (d){ return d[layerColumn]; })
.entries(data)
var stack = d3.layout.stack()
.y(function (d){ return d[yColumn]; })
.values(function (d){ return d.values; });
var layers = stack(nested);
xScale.domain(layers[0].values.map(function (d){
return d[xColumn];
}));
yScale.domain([
0,
d3.max(layers, function (layer){
return d3.max(layer.values, function (d){
return d.y;
});
})
]);
colorScale.domain(layers.map(function (layer){
return layer.key;
}));
xAxisG.call(xAxis);
yAxisG.call(yAxis);
var layers = g.selectAll(".layer").data(layers);
layers.enter().append("g").attr("class", "layer");
layers.exit().remove();
layers.style("fill", function (d){
return colorScale(d.key);
});
var bars = layers.selectAll("rect").data(function (d){
return d.values;
});
var barWidth = xScale.rangeBand() / colorScale.domain().length;
bars.enter().append("rect")
bars.exit().remove();
bars
.attr("x", function (d, i, j){
return xScale(d[xColumn]) + barWidth * j;
})
.attr("y", function (d){ return yScale(d.y); })
.attr("width", barWidth)
.attr("height", function (d){ return innerHeight - yScale(d.y); })
colorLegendG.call(colorLegend)
.selectAll("text")
.attr("y", 4);
}
function type(d){
d.TotalEnrolled = +d.TotalEnrolled;
return d;
}
d3.csv("diabetes2015label.csv", type, render);
</script>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js
https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.1.0/d3-legend.js