Skip to content

Instantly share code, notes, and snippets.

@curran
Last active October 25, 2022 03:56
Show Gist options
  • Save curran/94f1376b946c9d217014 to your computer and use it in GitHub Desktop.
Save curran/94f1376b946c9d217014 to your computer and use it in GitHub Desktop.
Polar Area Diagram
<!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: 75, right: 377, bottom: 88 };
var radiusMax = 231;
var xColumn = "name";
var colorColumn = "religion";
var radiusColumn = "population";
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, -36)");
var xScale = d3.scale.ordinal().rangePoints([0, innerWidth]);
var radiusScale = d3.scale.sqrt().range([0, radiusMax]);
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]; }));
radiusScale.domain([0, d3.max(data, function (d){ return d[radiusColumn]; })]);
colorScale.domain(data.map(function (d){ return d[colorColumn]; }));
pie.value(function (){ return 1; });
arc.outerRadius(function(d) {
return radiusScale(d.data[radiusColumn]);
});
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", arc)
.attr("fill", function (d){ return colorScale(d.data[colorColumn]); });
slices.exit().remove();
xAxisG.call(xAxis);
colorLegendG.call(colorLegend);
}
function type(d){
d.name = "World";
d.population = +d.population;
return d;
}
d3.csv("religionWorldTotals.csv", type, render);
</script>
</body>
</html>
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