D3 Examples - Empty Boxes

Empty Boxes

Top 5 countries, sorted by population, represented as empty boxes. These empty boxes represent infinite possible visualizations for each of these countries. This example is an experiment for laying the foundation for arbitrarily nested visualizations.

What would you put in each box?

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>
    <link href='https://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
    <style>
      
      body {
        margin: 0;
        font-family: 'Playfair Display', serif;
      }
    
      .axis text {
        font-size: 29pt;
      }
​
      .axis path, .axis line {
        fill: none;
        stroke: none;
        shape-rendering: crispEdges;
      }
​
    </style>
  </head>
  <body>
    <script>
      
      var outerWidth = 960;
      var outerHeight = 500;
      var margin = { left: 20, top: 140, right: 20, bottom: 176 };
      var padding = 0;
​
      var xColumn = "country";
​
      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 xScale = d3.scale.ordinal().rangeBands([0, innerWidth], padding);
​
      // Use a modified SI formatter that uses "B" for Billion.
      var siFormat = d3.format("s");
      var customTickFormat = function (d){
        return siFormat(d).replace("G", "B");
      };
​
      var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
        .outerTickSize(0);
​
      function render(data){
​
        xScale.domain(data.map( function (d){ return d[xColumn]; }));
​
        xAxisG.call(xAxis);
​
        var bars = g.selectAll("rect").data(data);
        bars.enter().append("rect")
          .attr("width", xScale.rangeBand());
        bars
          .attr("x", function (d){ return xScale(d[xColumn]); })
          .attr("y", 0)
          .attr("height", innerHeight)
          .attr("fill", "#ededed")
          .attr("stroke", "gray")
          .attr("stroke-width", 1)
        console.log(innerHeight, xScale.rangeBand())
        
        bars.exit().remove();
      }
​
      d3.csv("populationByCountry2015.csv", render);
​
    </script>
  </body>
</html>
​
    