Skip to content

Instantly share code, notes, and snippets.

@mgold

mgold/.block

Last active March 5, 2017 01:40
Show Gist options
  • Save mgold/0ef28ff3c2ff27245f5a4f943789a916 to your computer and use it in GitHub Desktop.
Save mgold/0ef28ff3c2ff27245f5a4f943789a916 to your computer and use it in GitHub Desktop.
Download ZIP
valv
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-hierarchy.v1.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0;
background-color: #222;
}
rect { fill: #FFF; }
</style>
</head>
<body>
<script>
var width = screen.availWidth;
var height = screen.availHeight;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
var treemapNode = svg.append("g")
.attr("transform", "translate("+(width/2-180)+","+(height/2-180)+")")
var data =
[{
language:
{name: "English", code: "en"},
categories: [
{name: "People",
subcategories: [
{name: "Politicians", articles: [
{quality: 100}, {quality: 50}
]},
{name: "Scientists", articles: [
{quality: 120}, {quality: 30}
]}
]},
{name: "Things",
subcategories: [
{name: "Materials", articles: [
{quality: 55}, {quality: 85}
]},
{name: "Electronics", articles: [
{quality: 50}, {quality: 30}
]}
]}
]
}]
var node = d3.hierarchy(data[0], function(d){
return d.categories || d.subcategories || d.articles || null;
})
var treemap = d3.treemap()
.size([360, 360])
.padding(2);
var nodes = treemap(node
.sum(function(d) { return d.quality || 0; })
.sort(function(a, b) { return b.height - a.height || b.value - a.value; }))
.leaves();
var sel = treemapNode.selectAll(".treeRect")
.data(nodes)
sel.exit().remove();
sel.enter().append("rect").attr("class", "treeRect")
.merge(sel)
.attr("x", function(d){ return d.x0 })
.attr("width", function(d){ return d.x1 - d.x0 })
.attr("y", function(d){ return d.y0 })
.attr("height", function(d){ return d.y1 - d.y0 })
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment