Skip to content

Instantly share code, notes, and snippets.

@copyleftdevsbl

copyleftdevsbl/gist:3779469

Created September 25, 2012 01:33
Show Gist options
  • Save copyleftdevsbl/3779469 to your computer and use it in GitHub Desktop.
Save copyleftdevsbl/3779469 to your computer and use it in GitHub Desktop.
Download ZIP
HTML: d3 SVG treemap
Raw
gistfile1
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Treemap</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment