block by curran 137e8af12d3c10bcd9dc

Empty Boxes

Full Screen

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?

forked from curran‘s block: Largest 5 Countries

web counter

index.html

<!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>

populationByCountry2015.csv

country,population
China,1376048943
India,1311050527
USA,321773631
Indonesia,257563815
Brazil,207847528