D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
billdwhite
Full window
Github gist
d3 SVG treemap
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Treemap</title> <script src='https://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>
Modified
http://d3js.org/d3.v2.js
to a secure url
https://d3js.org/d3.v2.js