Skip to content

Instantly share code, notes, and snippets.

@curran

curran/README.md

Last active November 20, 2015 00:48
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 curran/ab098389dd80e4a6eb58 to your computer and use it in GitHub Desktop.
Save curran/ab098389dd80e4a6eb58 to your computer and use it in GitHub Desktop.
Download ZIP
Splitting a Rectangle
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<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.5.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: 20pt;
}
.axis .label {
font-size: 20pt;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis text {
font-size: 20pt;
}
.color-legend text {
font-family: 'Open Sans', sans-serif;
font-size: 20pt;
}
</style>
</head>
<body>
<script>
var outerWidth = 900;
var outerHeight = 500;
var margin = { left: 64, top: 30, right: 212, bottom: 57 };
var barPadding = 0.2;
var xColumn = "region";
var yColumn = "population";
var colorColumn = "religion";
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(593, 0)");
var xScale = d3.scale.ordinal().rangeBands([0, innerWidth], barPadding);
var yScale = d3.scale.linear().range([innerHeight, 0]);
var colorScale = d3.scale.category10();
// Use a modified SI formatter that uses "B" for Billion.
var siFormat = d3.format("s");
var customTickFormat = function (d){
return siFormat(d).replace("G", "B");
};
var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
.outerTickSize(0);
var yAxis = d3.svg.axis().scale(yScale).orient("left")
.ticks(5)
.tickFormat(customTickFormat)
.outerTickSize(0);
var colorLegend = d3.legend.color()
.scale(colorScale)
.shapePadding(5)
.shapeWidth(30)
.shapeHeight(30)
.labelOffset(6)
.ascending(true);
function render(data){
colorScale.domain(data.map(function (d){ return d[colorColumn]; }));
var stack = d3.layout.stack()
.y(function (d){ return d[yColumn]; })
.values(function (d){ return [d]; });
var stacked = stack(data);
xScale.domain(stacked.map(function (d){ return d[xColumn]; }));
yScale.domain([0, d3.max(stacked, function (d){ return d.y0 + d.y; })]);
xAxisG.call(xAxis);
yAxisG.call(yAxis);
var bars = g.selectAll("rect").data(stacked);
bars.enter().append("rect")
.attr("width", xScale.rangeBand());
bars
.attr("x", function (d){ return xScale(d[xColumn]); })
.attr("y", function (d){ return yScale(d.y0 + d.y); })
.attr("height", function (d){ return innerHeight - yScale(d.y); })
.attr("fill", function (d){ return colorScale(d[colorColumn]); });
bars.exit().remove();
colorLegendG.call(colorLegend);
}
function type(d){
d.region = "World";
d.population = +d.population;
return d;
}
d3.csv("religionWorldTotals.csv", type, render);
</script>
</body>
</html>
Raw
religionWorldTotals.csv
religion population
Christian 2173100000
Muslim 1598360000
Unaffiliated 1126280000
Hindu 1032860000
Buddhist 487320000
Folk Religions 404890000
Other Religions 57770000
Jewish 13640000
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment