A small multiples visualization of polar area charts showing the breakdown of religions for the largest 5 countries. This is example 30 from the screencast Splitting Charts.
forked from curran's block: 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: 20pt; | |
| } | |
| .axis path, .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .color-legend text { | |
| font-family: 'Open Sans', sans-serif; | |
| font-size: 20pt; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| var outerWidth = 960; | |
| var outerHeight = 500; | |
| var margin = { left: 79, top: 50, right: 297, bottom: 152 }; | |
| var radiusMax = 143; | |
| var xColumn = "country"; | |
| 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 colorLegendG = svg.append("g") | |
| .attr("class", "color-legend") | |
| .attr("transform", "translate(714, 40)"); | |
| 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){ | |
| var nested = d3.nest() | |
| .key(function (d){ return d[xColumn]; }) | |
| .entries(data) | |
| xScale.domain(nested.map( function (d){ return d.key; })); | |
| radiusScale.domain([ | |
| 0, | |
| d3.max(nested, function (xEntry){ | |
| return d3.max(xEntry.values, function (d){ | |
| return d[radiusColumn]; | |
| }); | |
| }) | |
| ]); | |
| colorScale.domain(nested[0].values.map(function (d){ | |
| return d[colorColumn]; | |
| })); | |
| pie.value(function (){ return 1; }); | |
| arc.outerRadius(function(d) { | |
| return radiusScale(d.data[radiusColumn]); | |
| }); | |
| var pies = g.selectAll(".pie").data(nested); | |
| pies.enter().append("g").attr("class", "pie"); | |
| pies.attr("transform", function (d){ | |
| var x = xScale(d.key); | |
| return "translate(" + x + "," + innerHeight / 2 + ")"; | |
| }); | |
| pies.exit().remove(); | |
| var slices = pies.selectAll("path").data(function (d){ | |
| return pie(d.values); | |
| }); | |
| 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("religionByCountryTop5.csv", type, render); | |
| </script> | |
| </body> | |
| </html> |
| country | religion | population | |
|---|---|---|---|
| China | Christian | 68410000 | |
| China | Muslim | 24690000 | |
| China | Unaffiliated | 700680000 | |
| China | Hindu | 20000 | |
| China | Buddhist | 244130000 | |
| China | Folk Religions | 294320000 | |
| China | Other Religions | 9080000 | |
| China | Jewish | 0 | |
| India | Christian | 31130000 | |
| India | Muslim | 176190000 | |
| India | Unaffiliated | 870000 | |
| India | Hindu | 973750000 | |
| India | Buddhist | 9250000 | |
| India | Folk Religions | 5840000 | |
| India | Other Religions | 27560000 | |
| India | Jewish | 10000 | |
| USA | Christian | 243060000 | |
| USA | Muslim | 2770000 | |
| USA | Unaffiliated | 50980000 | |
| USA | Hindu | 1790000 | |
| USA | Buddhist | 3570000 | |
| USA | Folk Religions | 630000 | |
| USA | Other Religions | 1900000 | |
| USA | Jewish | 5690000 | |
| Indonesia | Christian | 23660000 | |
| Indonesia | Muslim | 209120000 | |
| Indonesia | Unaffiliated | 240000 | |
| Indonesia | Hindu | 4050000 | |
| Indonesia | Buddhist | 1720000 | |
| Indonesia | Folk Religions | 750000 | |
| Indonesia | Other Religions | 340000 | |
| Indonesia | Jewish | 0 | |
| Brazil | Christian | 173300000 | |
| Brazil | Muslim | 40000 | |
| Brazil | Unaffiliated | 15410000 | |
| Brazil | Hindu | 0 | |
| Brazil | Buddhist | 250000 | |
| Brazil | Folk Religions | 5540000 | |
| Brazil | Other Religions | 300000 | |
| Brazil | Jewish | 110000 |
