GDP of all countries (derived from Mike Bostock's work)

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="style.css"/>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.layout.js"></script>
    <style type="text/css">

.chart {
  display: block;
  margin: auto;
  margin-top: 40px;
}

text {
  font-size: 11px;
}

rect {
  fill: none;
}

</style>
  </head>
  <body>
    <div id="body">
      <div id="footer">
        GDP (PPP) of countries of the world
        <div class="hint">click or option-click to descend or ascend</div>
      </div>
    </div>
    <script type="text/javascript">

var w = 1280 - 80,
    h = 800 - 180,
    x = d3.scale.linear().range([0, w]),
    y = d3.scale.linear().range([0, h]),
    color = d3.scale.category20c(),
    root,
    node;

var treemap = d3.layout.treemap()
    .round(false)
    .size([w, h])
    .sticky(true)
    .mode("squarify")
    .ratio(1)
    .value(function(d) { return d.size; });

var svg = d3.select("#body").append("div")
    .attr("class", "chart")
    .style("width", w + "px")
    .style("height", h + "px")
  .append("svg:svg")
    .attr("width", w)
    .attr("height", h)
  .append("svg:g")
    .attr("transform", "translate(.5,.5)");

d3.json("area2.json", function(data) {
  node = root = data;

var nodes = treemap.nodes(root)
      .filter(function(d) { return !d.children; });

var cell = svg.selectAll("g")
      .data(nodes)
    .enter().append("svg:g")
      .attr("class", "cell")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
      .on("click", function(d) { 
               console.log("node: " + d.name + " parent: " + d.parent.name)
               return (node == d.parent ? 0 : zoom(d.parent)); });

cell.append("svg:rect")
      .attr("width", function(d) { return d.dx - 1; })
      .attr("height", function(d) { return d.dy - 1; })
      .style("fill", function(d) { return color(d.parent.name); });

cell.append("a")
          .attr("xlink:href", function(d) { return (node == d.parent ? d.link : "javascript: void(0)"); })
          
  .append("svg:text")
      .attr("x", function(d) { return d.dx / 2; })
      .attr("y", function(d) { return d.dy / 2; })
      .attr("dy", ".35em")
      .attr("text-anchor", "middle")
      .attr("font-family", "sans-serif")
  		.attr("font-size", "18px")
      .text(function(d) { return d.name; })
      .style("opacity", function(d) { d.w = this.getComputedTextLength(); return d.dx > d.w ? 1 : 0; });

cell.append("svg:title")
   .text(function(d) { return d.name.concat(" : ",numberWithCommas(d.size)); });

d3.select(window).on("click", function() { zoom(root); });

});

function numberWithCommas(x) {
    x = x/1000000
    return "$".concat(x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",")," million");
}

function size(d) {
  return d.size;
}

function count(d) {
  return 1;
}

function zoom(d) {
  console.log("zooming " + d.name)
  var kx = w / (1 * d.dx), ky = h / (1 * d.dy);
  x.domain([d.x, d.x + d.dx]);
  y.domain([d.y, d.y + d.dy]);

t.select("rect")
      .attr("width", function(d) { return kx * d.dx - 1; })
      .attr("height", function(d) { return ky * d.dy - 1; })

t.select("text")
      .attr("x", function(d) { return kx * d.dx / 2; })
      .attr("y", function(d) { return ky * d.dy / 2; })
      .style("opacity", function(d) { return kx * d.dx > d.w ? 1 : 0; });

node = d;
  d3.event.stopPropagation();
}

</script>
  </body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://mbostock.github.com/d3/d3.layout.js to a secure url

https://d3js.org/d3.v3.min.js

https://mbostock.github.com/d3/d3.layout.js