Skip to content

Instantly share code, notes, and snippets.

@alexgibson
Forked from syntagmatic/README.md
Created June 24, 2014 16:13
Show Gist options
  • Save alexgibson/ceaf149fa67f9b73d84d to your computer and use it in GitHub Desktop.
Save alexgibson/ceaf149fa67f9b73d84d to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 960px;
}
form {
position: absolute;
right: 10px;
top: 10px;
}
.node {
border: solid 1px white;
font: 10px sans-serif;
color: #fff;
line-height: 12px;
overflow: hidden;
position: absolute;
text-indent: 2px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 4, right: 4, bottom: 4, left: 4},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var color = d3.scale.category20c();
var treemap = d3.layout.treemap()
.size([width, height])
.sticky(true)
.padding(2)
.children(function(d, depth) { return d.values; })
.value(function(d) { return 1; });
var div = d3.select("body").append("div")
.style("position", "relative")
.style("width", (width + margin.left + margin.right) + "px")
.style("height", (height + margin.top + margin.bottom) + "px")
.style("left", margin.left + "px")
.style("top", margin.top + "px");
d3.json("http://www.reddit.com/.json?limit=100", function(error, raw) {
var data = raw.data.children.map(function(d) { return d.data; });
console.log("data", data);
var root = d3.nest()
.key(function(d) { return "root"; })
.key(function(d) { return d.subreddit; })
.entries(data)[0];
console.log("root", root);
console.log("treemap", treemap.nodes(root));
var node = div.datum(root).selectAll(".node")
.data(treemap.nodes)
.enter().append("div")
.attr("class", "node")
.call(position)
.style("background", function(d) { return d.values ? null : "steelblue"; })
.text(function(d) { return d.values ? null : d.subreddit; });
});
function position() {
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"; });
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment