<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Treemap</title>
<script src='http://d3js.org/d3.v2.js'></script>
<style type="text/css"> rect { fill: none; stroke: #fff; } text { font: 10px sans-serif; } </style>
<script type="text/javascript" src="USA_data.js"></script>
</head>
<body>
<script type="text/javascript">
// setup initial params
var w = 960,
h = 500,
color = d3.scale.category20c();
// make the treemap layout
var treemap = d3.layout.treemap()
.size([w+1, h+1])
.value(function(d) { return d['90F30']; })
.sticky(true);
// create the visualization area
var vis = d3.select('body')
.append('svg:svg')
.style('width', w)
.style('height', h)
.append('svg:g')
.attr('transform', 'translate(-.5, -.5)');
// make cells for each cause
var cell = vis.data(USA)
.selectAll('g')
.data(treemap)
.enter().append('svg:g')
.attr('class', 'cell')
.attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; });
// add a rectangle to each cell
cell.append('svg:rect')
.attr('width', function(d) { return d.dx; })
.attr('height', function(d) { return d.dy; })
.style('fill', function(d) { return d.children ? color(d.data.key) : null; });
// label the cells
cell.append('svg:text')
.attr('x', function(d) { return d.dx/2; d})
.attr('y', function(d) { return d.dy/2; d})
.attr('dy', '.35em')
.attr('text-anchor', 'middle')
.text(function(d) { return d.children ? null : d.data.key; });
</script>
</body>
</html>