tomgullo/tree_map_d3js.html

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

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

  position: relative;

}

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

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

</style>
<form>
  <label><input type="radio" name="mode" value="size" checked> Size</label>
  <label><input type="radio" name="mode" value="count"> Count</label>
</form>
<script src="d3.js"></script>
<script>

var mydata = {
   "name": "analytics",
   "children": [
    {
     "name": "cluster",
     "children": [
      {"name": "AgglomerativeCluster", "size": 3938},
      {"name": "CommunityStructure", "size": 3812},
      {"name": "HierarchicalCluster", "size": 6714},
      {"name": "MergeEdge", "size": 743}
     ]
    }]
}

var margin = {top: 5, right: 0, bottom: 0, left: 0},
    width = 1260,
    height = 800;

var color = d3.scale.category20c();

var treemap = d3.layout.treemap()
    .size([width, height])
    .sticky(true)
    .value(function(d) { return d.size; });

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");


var node = div.datum(mydata).selectAll(".node")
  .data(treemap.nodes)
.enter().append("div")
  .attr("class", "node")
  .call(position)
  .style("background", function(d) { return d.children ? color(d.name) : null; })
  .text(function(d) { return d.children ? null : d.name; });

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

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>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

	position: relative;

	}

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

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

	</style>
	<form>
	<label><input type="radio" name="mode" value="size" checked> Size</label>
	<label><input type="radio" name="mode" value="count"> Count</label>
	</form>
	<script src="d3.js"></script>
	<script>

	var mydata = {
	"name": "analytics",
	"children": [
	{
	"name": "cluster",
	"children": [
	{"name": "AgglomerativeCluster", "size": 3938},
	{"name": "CommunityStructure", "size": 3812},
	{"name": "HierarchicalCluster", "size": 6714},
	{"name": "MergeEdge", "size": 743}
	]
	}]
	}

	var margin = {top: 5, right: 0, bottom: 0, left: 0},
	width = 1260,
	height = 800;

	var color = d3.scale.category20c();

	var treemap = d3.layout.treemap()
	.size([width, height])
	.sticky(true)
	.value(function(d) { return d.size; });

	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");


	var node = div.datum(mydata).selectAll(".node")
	.data(treemap.nodes)
	.enter().append("div")
	.attr("class", "node")
	.call(position)
	.style("background", function(d) { return d.children ? color(d.name) : null; })
	.text(function(d) { return d.children ? null : d.name; });

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

	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>