D3 Examples - Sortable Slices

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!

xxxxxxxxxx
 
<!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){
​
        var nested = d3.nest()
          .key(function (d){ return d[xColumn]; })
          .entries(data);
        
        // Sort by the clicked color value.
        nested.forEach(function (d){
          d.rank = d3.sum(d.values, function (d){
            if(d[colorColumn] === clickedColorValue){
              return d[radiusColumn];
            } else {
              return 0;
            }
          });
        })
        nested.sort(function (a, b){
          return b.rank - a.rank;
        });
​
        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, function (d){ return d.key; });
        pies.enter().append("g").attr("class", "pie");
        pies
          .transition()
          .duration(500)
          .delay(function(d, i) { return i * 3; })
          .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", "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>
​
    