d3

Version:

A small, free JavaScript library for manipulating documents based on data.

mbostock.github.com/d3/

mbostock/d3

105 lines (99 loc) • 16 kB

HTML

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>d3.js ~ Treemap</title> <script type="text/javascript" src="../d3.js?1.12.0"></script> <style type="text/css"> @import url("../style.css?1.10.0"); @import url("../syntax.css?1.6.0"); </style> </head> <body> <div class="body"> <div class="content"> <div class="topbar"> <a href="../">Overview</a> <a href="../ex/">Examples</a> <a href="../api/">Documentation</a> <a href="http://github.com/mbostock/d3/archives/master">Download</a> </div> <div class="sidebar"> <h1>d3.js</h1> </div> <h1 id='treemap'>Treemap</h1> <div class='gallery' id='chart'> <button class='first active' id='size'> Size </button><button class='last' id='count'> Count </button> </div><link href='button.css' rel='stylesheet' type='text/css' /><link href='treemap.css' rel='stylesheet' type='text/css' /><script src='../d3.layout.js?1.12.0' type='text/javascript'> </script><script src='treemap.js' type='text/javascript'> </script> Treemap design invented by <a href='http://www.cs.umd.edu/~ben/'>Ben Shneiderman</a>. Squarified algorithm by <a href='http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.36.6685'>Bruls, Huizing and van Wijk</a>. Data courtesy <a href='http://flare.prefuse.org/'>Jeff Heer</a>. <h3 id='source_code'>Source Code</h3> <div class='highlight'><pre><code class='js'> 1 var w = 960, 2 h = 500, 3 color = d3.scale.category20c(); 4 5 var treemap = d3.layout.treemap() 6 .size([w, h]) 7 .children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; }) 8 .value(function(d) { return d.value; }) 9 .sticky(true); 10 11 var div = d3.select("#chart").append("div") 12 .style("position", "relative") 13 .style("width", w + "px") 14 .style("height", h + "px"); 15 16 d3.json("flare.json", function(json) { 17 div.data(d3.entries(json)).selectAll("div") 18 .data(treemap) 19 .enter().append("div") 20 .attr("class", "cell") 21 .style("background", function(d) { return d.children ? color(d.data.key) : null; }) 22 .call(cell) 23 .text(function(d) { return d.children ? null : d.data.key; }); 24 25 d3.select("#size").on("click", function() { 26 div.selectAll("div") 27 .data(treemap.value(function(d) { return d.value; })) 28 .transition() 29 .duration(1500) 30 .call(cell); 31 32 d3.select("#size").classed("active", true); 33 d3.select("#count").classed("active", false); 34 }); 35 36 d3.select("#count").on("click", function() { 37 div.selectAll("div") 38 .data(treemap.value(function(d) { return 1; })) 39 .transition() 40 .duration(1500) 41 .call(cell); 42 43 d3.select("#size").classed("active", false); 44 d3.select("#count").classed("active", true); 45 }); 46 }); 47 48 function cell() { 49 this 50 .style("left", function(d) { return d.x + "px"; }) 51 .style("top", function(d) { return d.y + "px"; }) 52 .style("width", function(d) { return d.dx - 1 + "px"; }) 53 .style("height", function(d) { return d.dy - 1 + "px"; }); 54 } </code></pre> </div> </div> <div class="foot">Copyright © 2011 <a href="http://bost.ocks.org/mike">Mike Bostock</a></div> </div> </div> <a href="http://github.com/mbostock/d3"><img style="position:absolute;top:0;right:0;border:0;" width="149" height="149" src="../forkme.png" alt="Fork me on GitHub" /></a> </body> </html>