Skip to content

Instantly share code, notes, and snippets.

@jasondavies

jasondavies/d3.js ~ Treemap.htm

Forked from bmajz/d3.js ~ Treemap.htm
Created February 12, 2012 14:36
Show Gist options
  • Save jasondavies/1808856 to your computer and use it in GitHub Desktop.
Save jasondavies/1808856 to your computer and use it in GitHub Desktop.
Download ZIP
d3 Treemap with resizing problems
Raw
d3.js ~ Treemap.htm
<!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="http://mbostock.github.com/d3/d3.js"></script>
<style type="text/css">
@import url("http://mbostock.github.com/d3/style.css?1.10.0");
</style>
</head>
<body>
<div class="body">
<div class="content">
<div class="topbar">
<a href="../">Overview</a>
<b><a href="../ex/">Examples</a></b>
<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><p />
</div><link href='http://mbostock.github.com/d3/ex/button.css' rel='stylesheet' type='text/css' /><link href='http://mbostock.github.com/d3/ex/treemap.css' rel='stylesheet' type='text/css' /><script src='http://mbostock.github.com/d3/d3.layout.js' type='text/javascript'> </script><script src='treemap.js' type='text/javascript'> </script>
<p>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>.</p>
</div>
<div class="foot">Copyright &copy; 2011 <a href="http://bost.ocks.org/mike">Mike Bostock</a></div>
</div>
</div>
</body>
</html>
Raw
index.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="http://mbostock.github.com/d3/d3.js"></script>
<style type="text/css">
@import url("http://mbostock.github.com/d3/style.css?1.10.0");
</style>
</head>
<body>
<div class="body">
<div class="content">
<div class='gallery' id='chart'>
<button class='first active' id='size'>
Original Size
</button>
<button class='last' id='count'>
Other Size
</button><p />
</div>
<link href='http://mbostock.github.com/d3/ex/button.css' rel='stylesheet' type='text/css' />
<link href='http://mbostock.github.com/d3/ex/treemap.css' rel='stylesheet' type='text/css' />
<script src='http://mbostock.github.com/d3/d3.layout.js' type='text/javascript'> </script><script src='treemap.js' type='text/javascript'> </script>
</body>
</html>
Raw
test.json
{
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item",
"children": [
{
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item",
"children": [
{
"size": "37",
"other_size": "97",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "229",
"other_size": "112",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "618",
"other_size": "49",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "174",
"other_size": "32",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "59",
"other_size": "46",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "118",
"other_size": "0",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "2499",
"other_size": "6",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "156",
"other_size": "92",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "87",
"other_size": "51",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "1",
"other_size": "23",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
}
]
},
{
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item",
"children": [
{
"size": "293",
"other_size": "1232",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "381",
"other_size": "1097",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "269",
"other_size": "517",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "153",
"other_size": "94",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "825",
"other_size": "82",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "1434",
"other_size": "73",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "427",
"other_size": "196",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "891",
"other_size": "178",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "100",
"other_size": "495",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "2098",
"other_size": "373",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
}
]
},
{
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item",
"children": [
{
"size": "12341",
"other_size": "159",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "164",
"other_size": "45",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "3573",
"other_size": "33",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "418",
"other_size": "42",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "644",
"other_size": "47",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "411",
"other_size": "13",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "417",
"other_size": "24",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "206",
"other_size": "138",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "555",
"other_size": "331",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "500",
"other_size": "916",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
}
]
},
{
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item",
"children": [
{
"size": "143",
"other_size": "216",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "534",
"other_size": "273",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "1049",
"other_size": "87",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "317",
"other_size": "63",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "677",
"other_size": "44",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "268",
"other_size": "21",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "1729",
"other_size": "18",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "450",
"other_size": "118",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "1607",
"other_size": "38",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "519",
"other_size": "24",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
}
]
},
{
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item",
"children": [
{
"size": "24",
"other_size": "0",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "2926",
"other_size": "0",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "401",
"other_size": "0",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "64",
"other_size": "0",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "1294",
"other_size": "0",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "55",
"other_size": "0",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "14",
"other_size": "0",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "21",
"other_size": "0",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "2231",
"other_size": "0",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "801",
"other_size": "0",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
}
]
},
{
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item",
"children": [
{
"size": "940",
"other_size": "31",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "3865",
"other_size": "83",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "525",
"other_size": "67",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "1841",
"other_size": "144",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "1598",
"other_size": "214",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "1157",
"other_size": "171",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "5397",
"other_size": "175",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "1018",
"other_size": "306",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "2046",
"other_size": "36",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "1295",
"other_size": "392",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
}
]
},
{
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item",
"children": [
{
"size": "64",
"other_size": "0",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "377",
"other_size": "0",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "550",
"other_size": "0",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "106",
"other_size": "0",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "30",
"other_size": "0",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "71",
"other_size": "0",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "162",
"other_size": "0",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "87",
"other_size": "0",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "114",
"other_size": "0",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
},
{
"size": "140",
"other_size": "0",
"name": "Test Item/Test Item/Test Item/Test Item/Test Item/Test Item"
}
]
}
]
}
Raw
treemap.js
var w = 960,
h = 500,
color = d3.scale.category20c();
var treemap = d3.layout.treemap()
.size([w, h])
.sticky(true)
.value(function(d) { return d.size; });
var div = d3.select("#chart").append("div")
.style("position", "relative")
.style("width", w + "px")
.style("height", h + "px");
d3.json("test.json", function(json) {
div.data([json]).selectAll("div")
.data(treemap.nodes)
.enter().append("div")
.attr("class", "cell")
.style("background", function(d) { return d.children ? color(d.name) : null; })
.call(cell)
.text(function(d) { return d.children ? null : d.name; });
d3.select("#size").on("click", function() {
div.selectAll("div")
.data(treemap.value(function(d) { return d.size; }))
.transition()
.duration(1500)
.call(cell);
d3.select("#size").classed("active", true);
d3.select("#count").classed("active", false);
});
d3.select("#count").on("click", function() {
div.selectAll("div")
.data(treemap.value(function(d) { return d.other_size; }))
.transition()
.duration(1500)
.call(cell);
d3.select("#size").classed("active", false);
d3.select("#count").classed("active", true);
});
});
function cell() {
this
.style("left", function(d) { return d.x + "px"; })
.style("top", function(d) { return d.y + "px"; })
.style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
.style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment