Sortable Slices

A small multiples visualization of polar area charts showing the breakdown of religions for all countries. This is a variation derived from example 30 from the screencast Splitting Charts.

This visualization is useless, in the sense that it is not very readable. It has many issues, such as occlusion, but it does show the data for all countries on earth. This example gives a starting point for exploring how this data can be visualized more effectively. Please fork this block and experiment!

Data from Pew Research Center Global Religious Landscape data set
Uses d3-legend
Uses nested selections.

forked from curran's block: Polar Area Diagram

forked from curran's block: Useless Vis

forked from curran's block: Sortable Slices

<!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: 87, top: 50, right: 297, bottom: 152 };
      var radiusMax = 143;

var xColumn = "country";
      var colorColumn = "religion";
      var radiusColumn = "population";
      
      var clickedColorValue;

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 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 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(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 slices = pies.selectAll("path").data(function (d){
          return pie(d.values);
        });

slices.enter().append("path");
        slices
          .attr("d", arc)
          .attr("fill", "none")
          .attr("stroke", function (d){ return colorScale(d.data[colorColumn]); });
        slices.exit().remove();

colorLegendG.call(colorLegend);
        listenForHover(colorLegendG.selectAll("rect"), data);
        listenForHover(colorLegendG.selectAll("text"), data);
      }
      
      function listenForHover(selection, data){
        selection
          .on("click", function (d){
            clickedColorValue = d;
            render(data);
          })
//           .on("mouseover", function (d){
//             hoveredColorValue = d;
//             render(data);
//           })
//           .on("mouseout", function (d){
//             hoveredColorValue = null;
//             render(data);
//           })
          .style("cursor", "pointer");
      }

function type(d){
        d.name = "World";
        d.population = +d.population;
        return d;
      }

d3.csv("religionByCountry.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