jackross/data.json

## data.json
{
  "name": "Non Member Club Accounts",
  "children": [
    {
      "name": "Known Member Accounts",
      "children": [
        {
          "name": "Known Member Accounts with Known Email Addresses",
          "children": [
            {
              "name": "Known Email Addresses For The Account",
              "email_addresses": 1163842,
              "sent": 47515542
            },
            {
              "name": "Known Email Addresses but Not For The Account",
              "email_addresses": 20277,
              "sent": 175681
            }
          ]
        },
        {
          "name": "Known Member Accounts with Unknown Email Addresses",
          "email_addresses": 237938,
          "sent": 5472344
        }
      ]
    },
    {
      "name": "Unknown Accounts",
      "children": [
        {
          "name": "Unknown Accounts with Known Email Addresses",
          "email_addresses": 434874,
          "sent": 1479705
        },
        {
          "name": "Unknown Accounts with Unknown Email Addresses",
          "email_addresses": 64212,
          "sent": 259968
        }
      ]
    }
  ]
}

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

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}

form {
  position: absolute;
  right: 10px;
  top: 10px;
}

.node {
  border: solid 1px white;
  font: 12px sans-serif;
  line-height: 14px;
  overflow: hidden;
  position: absolute;
  text-indent: 4px;
}

</style>
<form>
  <label><input type="radio" name="mode" value="email_addresses" checked> # Unique Email Addresses</label>
  <label><input type="radio" name="mode" value="sent"> # Sent</label>
</form>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var integerFormat = d3.format(",d");

var margin = {top: 40, right: 10, bottom: 10, left: 10},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var color = d3.scale.category20c();

var treemap = d3.layout.treemap()
    .size([width, height])
    .sticky(true)
    .value(function(d) { return d.email_addresses; })
    .sort(function(a, b) { return d3.descending(a.key, b.key); });

var div = d3.select("body").append("div")
    .style("position", "relative")
    .style("width", (width + margin.left + margin.right) + "px")
    .style("height", (height + margin.top + margin.bottom) + "px")
    .style("left", margin.left + "px")
    .style("top", margin.top + "px");

d3.json("data.json", function(error, root) {
  var node = div.datum(root).selectAll(".node")
      .data(treemap.nodes)
    .enter().append("div")
      .attr("class", "node")
      .call(position)
      .style("background", function(d) { return d.children ? color(d.name) : null; })
      .html(function(d) { return d.children ? null : d.name + "<br/># Email Addresses: " + integerFormat(d.email_addresses) + "<br/># Sent: " + integerFormat(d.sent); });

  d3.selectAll("input").on("change", function change() {
    var value = this.value === "sent"
        ? function(d) { return d.sent; }
        : function(d) { return d.email_addresses; };

    node
        .data(treemap.value(value).nodes)
      .transition()
        .duration(1500)
        .call(position);
  });
});

function position() {
  this.style("left", function(d) { return d.x + "px"; })
      .style("top", function(d) { return d.y + "px"; })
      .style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
      .style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });
}

</script>
	{
	"name": "Non Member Club Accounts",
	"children": [
	{
	"name": "Known Member Accounts",
	"children": [
	{
	"name": "Known Member Accounts with Known Email Addresses",
	"children": [
	{
	"name": "Known Email Addresses For The Account",
	"email_addresses": 1163842,
	"sent": 47515542
	},
	{
	"name": "Known Email Addresses but Not For The Account",
	"email_addresses": 20277,
	"sent": 175681
	}
	]
	},
	{
	"name": "Known Member Accounts with Unknown Email Addresses",
	"email_addresses": 237938,
	"sent": 5472344
	}
	]
	},
	{
	"name": "Unknown Accounts",
	"children": [
	{
	"name": "Unknown Accounts with Known Email Addresses",
	"email_addresses": 434874,
	"sent": 1479705
	},
	{
	"name": "Unknown Accounts with Unknown Email Addresses",
	"email_addresses": 64212,
	"sent": 259968
	}
	]
	}
	]
	}
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: auto;
	position: relative;
	width: 960px;
	}

	form {
	position: absolute;
	right: 10px;
	top: 10px;
	}

	.node {
	border: solid 1px white;
	font: 12px sans-serif;
	line-height: 14px;
	overflow: hidden;
	position: absolute;
	text-indent: 4px;
	}

	</style>
	<form>
	<label><input type="radio" name="mode" value="email_addresses" checked> # Unique Email Addresses</label>
	<label><input type="radio" name="mode" value="sent"> # Sent</label>
	</form>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var integerFormat = d3.format(",d");

	var margin = {top: 40, right: 10, bottom: 10, left: 10},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var color = d3.scale.category20c();

	var treemap = d3.layout.treemap()
	.size([width, height])
	.sticky(true)
	.value(function(d) { return d.email_addresses; })
	.sort(function(a, b) { return d3.descending(a.key, b.key); });

	var div = d3.select("body").append("div")
	.style("position", "relative")
	.style("width", (width + margin.left + margin.right) + "px")
	.style("height", (height + margin.top + margin.bottom) + "px")
	.style("left", margin.left + "px")
	.style("top", margin.top + "px");

	d3.json("data.json", function(error, root) {
	var node = div.datum(root).selectAll(".node")
	.data(treemap.nodes)
	.enter().append("div")
	.attr("class", "node")
	.call(position)
	.style("background", function(d) { return d.children ? color(d.name) : null; })
	.html(function(d) { return d.children ? null : d.name + "<br/># Email Addresses: " + integerFormat(d.email_addresses) + "<br/># Sent: " + integerFormat(d.sent); });

	d3.selectAll("input").on("change", function change() {
	var value = this.value === "sent"
	? function(d) { return d.sent; }
	: function(d) { return d.email_addresses; };

	node
	.data(treemap.value(value).nodes)
	.transition()
	.duration(1500)
	.call(position);
	});
	});

	function position() {
	this.style("left", function(d) { return d.x + "px"; })
	.style("top", function(d) { return d.y + "px"; })
	.style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
	.style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });
	}

	</script>