Nest Treemap

Source: data.gov.uk, via @davetaz.

This example demonstrates how to make a treemap using d3.nest.

forked from mbostock's block: Nest Treemap

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
  position: relative;
}

.node {
  box-sizing: border-box;
  line-height: 1em;
  overflow: hidden;
  position: absolute;
  white-space: pre;
  background: #ddd;
}

.node-label,
.node-value {
  margin: 4px;
}

.node-value {
  margin-top: -2px;
}

.node-value {
  font-weight: bold;
}

</style>
<body>
<script src="//d3js.org/d3.v4.0.0-alpha.49.min.js"></script>
<script>

var width = 960,
    height = 1060;

var format = d3.formatLocale({
  decimal: ".",
  thousands: ",",
  grouping: [3],
  currency: ["£", ""]
}).format("$,d");

var treemap = d3.treemap()
    .size([width, height])
    .padding(1)
    .round(true);

d3.csv("Home_Office_Air_Travel_Data_2011.csv", type, function(error, data) {
  if (error) throw error;

var root = d3.hierarchy({values: nest.entries(data)}, function(d) { return d.values; })
      .sum(function(d) { return d.value; })
      .sort(function(a, b) { return b.value - a.value; });

treemap(root);

node.append("div")
      .attr("class", "node-label")
      .text(function(d) { return d.parent.parent.data.key + " to " + d.parent.data.key + "\n" + d.data.key; });

node.append("div")
      .attr("class", "node-value")
      .text(function(d) { return format(d.value); });
});

function type(d) {
  d.Paid_fare = +d.Paid_fare;
  return d;
}

</script>

https://d3js.org/d3.v4.0.0-alpha.49.min.js