d3 SVG treemap

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Treemap</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.layout.js"></script>
	<style type="text/css"> rect { fill: none; stroke: #fff; } text { font: 10px sans-serif; } </style>  
    <script type="text/javascript" src="treemap_USA.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>

Modified http://mbostock.github.com/d3/d3.js to a secure url

Modified http://mbostock.github.com/d3/d3.layout.js to a secure url

https://mbostock.github.com/d3/d3.js

https://mbostock.github.com/d3/d3.layout.js