5471344 by timelyportfolio

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
  font-family: Helvetica;
  font-size: 10px;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="d3.layout.indent.js"></script>
<script>

function id(d) { return d.Country ? d.Country : d.key; };
 
var width = 960,
    height = 500;

var layout = d3.layout.indent()
  .sort(function(a, b) { return d3.ascending(id(a), id(b)) })
  .children(function(d) { return d.values; })
  .dx(10)
  .dy(function(d) { return d.children ? 30 : 15; });

var nestAlpha = d3.nest()
  .key(function(d) { return d.Country.slice(0,1); });

var nestContinent = d3.nest()
  .key(function(d) { return d.Continent; });

d3.csv("countries.csv", function(error, countries) {
  var svg = d3.select("body").append("svg")
    .attr({
      width: width,
      height: height
    })
  .append("g")
    .attr("transform", "translate(10,10)");

  var continents = {
    key: "Countries",
    values: nestContinent.entries(countries)
  };

  var alphabet = {
    key: "Countries",
    values: nestAlpha.entries(countries)
  };

  var countries = {
    key: "Countries",
    values: countries
  }

  function update(tree) {
    var nodes = layout(tree);

    labels = svg.selectAll(".label")
        .data(nodes, function(d) { return d.Country + d.key });

    labels.enter()
        .append("text")
        .attr({
          "class": "label",
          dy: ".35em",
          transform: function(d) { return "translate(" + (d.x - 200) + "," + d.y + ")"; }
        })
        .style("font-weight", function(d) { return d.Country ? null : "bold" })
        .text(function(d) { return id(d); });

    labels.transition().delay(250).duration(1000)
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

    labels.exit().transition()
      .attr("transform", function(d) { return "translate(" + (d.x - 200) + "," + d.y + ")"; })
      .remove()
  }

  function init() {
    update(countries);
    setTimeout(function() { update(continents) }, 3000);
    setTimeout(function() { update(alphabet) }, 6000);
    setTimeout(init, 9000);
  }

  init();
});
 
</script>

countries.csv

Country,Continent
Argentina,South America
Bangladesh,Asia
Botswana,Africa
Bulgaria,Europe
Canada,North America
Chile,South America
China,Asia
Ethiopia,Africa
France,Europe
Germany,Europe
Ghana,Africa
India,Asia
Japan,Asia
Kenya,Africa
Mexico,South America
Mozambique,Africa
Poland,Europe
Senegal,Africa
Spain,Europe
Sri Lanka,Asia
Sweden,Europe
Thailand,Asia
Turkey,Asia
United Kingdom,Europe
United States,North America
Viet Nam,Asia

d3.layout.indent.js

(function() {
  d3.layout.indent = function() {
    var hierarchy = d3.layout.hierarchy(),
        dx = d3.functor(15),
        dy = d3.functor(15);

    function position(node, y) {
      var children = node.children;
      node.y = y += dy.call(this, node);
      node.x = node.depth * dx.call(this, node);
      if (children && (n = children.length)) {
        var i = -1,
            n;
        while (++i < n) {
          y = position(children[i], y);
        }
      }
      return y;
    }

    function indent(d, i) {
      var nodes = hierarchy.call(this, d, i);
      position(nodes[0], -dy.call(this, nodes[0]));
      return nodes;
    }

    // Accessor for the x-increment of each depth level
    indent.dx = function(value) {
      if (!arguments.length) return dx;
      dx = d3.functor(value);
      return indent;
    };

    // Accessor for the y-increment of each node
    indent.dy = function(value) {
      if (!arguments.length) return dy;
      dy = d3.functor(value);
      return indent;
    };

    return d3_layout_hierarchyRebind(indent, hierarchy);
  };

  // A method assignment helper for hierarchy subclasses.
  function d3_layout_hierarchyRebind(object, hierarchy) {
    d3.rebind(object, hierarchy, "sort", "children", "value");

    // Add an alias for nodes and links, for convenience.
    object.nodes = object;
    object.links = d3_layout_hierarchyLinks;

    return object;
  }

  // Returns an array source+target objects for the specified nodes.
  function d3_layout_hierarchyLinks(nodes) {
    return d3.merge(nodes.map(function(parent) {
      return (parent.children || []).map(function(child) {
        return {source: parent, target: child};
      });
    }));
  }
})();