Skip to content

Instantly share code, notes, and snippets.

@curran

curran/README.md

Last active June 19, 2016 14:28
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/76c077c3f779fe4534c6fdf4ff100158 to your computer and use it in GitHub Desktop.
Save curran/76c077c3f779fe4534c6fdf4ff100158 to your computer and use it in GitHub Desktop.
Download ZIP
Staggered Donut Chart
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.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: 32pt;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.color-legend text {
font-family: 'Open Sans', sans-serif;
font-size: 29pt;
}
</style>
</head>
<body>
<script>
var outerWidth = 960;
var outerHeight = 500;
var margin = { left: 11, top: 33, right: 377, bottom: 88 };
var radiusMax = 180;
var xColumn = "name";
var sliceSizeColumn = "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 pieG = g.append("g");
var colorLegendG = g.append("g")
.attr("class", "color-legend")
.attr("transform", "translate(595, 20)");
var xScale = d3.scale.ordinal().rangePoints([0, innerWidth]);
var colorScale = d3.scale.category10();
var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
.outerTickSize(0);
var pie = d3.layout.pie();
var arc = d3.svg.arc();
var colorLegend = d3.legend.color()
.scale(colorScale)
.shapePadding(3)
.shapeWidth(40)
.shapeHeight(40)
.labelOffset(4);
function render(data){
xScale.domain(data.map( function (d){ return d[xColumn]; }));
colorScale.domain(data.map(function (d){ return d[colorColumn]; }));
pie.value(function(d) { return d[sliceSizeColumn]; });
xAxisG.call(xAxis);
var pieData = pie(data);
pieG.attr("transform", "translate(" + innerWidth / 2 + "," + innerHeight / 2 + ")");
var slices = pieG.selectAll("path").data(pieData);
slices.enter().append("path");
slices
.attr("d", function (d, i){
arc
.innerRadius(function(d) {
return i / (pieData.length - 1) * radiusMax;
})
.outerRadius(function(d) {
return (i + 1) / (pieData.length - 1) * radiusMax;
});
return arc(d);
})
.attr("fill", function (d){ return colorScale(d.data[colorColumn]); });
slices.exit().remove();
colorLegendG.call(colorLegend);
}
function type(d){
d.name = "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