enjalot/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}

.node {
  border: solid 1px white;
  font: 10px sans-serif;
  line-height: 12px;
  overflow: hidden;
  position: absolute;
  text-indent: 2px;
}

.node img {
  position:absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 3;
}

.node span {
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 5;
}

.nsfw {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  line-height: 24px;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 40, right: 10, bottom: 10, left: 10},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var treemap = d3.layout.treemap()
    .size([width, height])
    .children(function(d) { return d.values; })
    .padding(2)
    .value(function(d) { return 1; });

var color = d3.scale.log()
  .range(["#91bfdb","#fc8d59"]);

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");

var last = 0;
var paused = false;

var after = "";
var loaded = true;

d3.timer(function(){
  if(paused) return false
  var now = +new Date();
  if(now - last < 2000) return false;
  last = now;
  if(loaded) getData()
})

function getData() {
  var url = "http://www.reddit.com/.json?limit=50";
  if(after) url += "&after=" + after
  loaded = false;
  d3.json(url, function(error, raw) {
    var data = raw.data.children.map(function(d) { return d.data; });
    treechart(data);
    after = data[25].name;
    setTimeout(function(){
      loaded = true;
    }, 1200)
  });
};


function treechart(data) {
  color.domain(
    d3.extent(data, function(d) { return d.ups / d.num_comments; })
  );

  var nested = d3.nest()
      .key(function(d) { return "root"; })
      .key(function(d) { return d.subreddit; })
      .entries(data)[0];

  var transformed = treemap.nodes(nested);

  var node = div.selectAll(".node")
    .data(transformed, function(d) { return "key" in d ? (d.key + d.depth) : d.id; });

  node.exit()
    .transition()
    .duration(400)
    .style("opacity", 0)
    .remove();

  node
    .transition()
    .delay(400)
    .duration(400)
    .call(position)

  var entered = node
    .enter().append("div")
      .attr("class", "node")
      .style("opacity", 0)
      .call(position)
      .style("background", function(d) {
        var score = d.ups / d.num_comments;
        return d.children ? null : color(score);
      })
      .filter(function(d) { return !!d.id; })
      .on("click", function(d) {
        console.log(d);
      })

    entered
      .transition()
      .delay(800)
      .duration(400)
      .style("opacity", 1);

    entered
      .filter(function(d) { return !!d.thumbnail; })
      .append("img")
      .attr("src", function(d) { return d.thumbnail; });

    entered
      .append("span")
      .text(function(d) { return d.children ? null : d.subreddit; })
    d3.selectAll(".node")
      .filter(function(d) { return d.over_18; })
      .classed("nsfw", true)
      .style("background", "red")
      .html("")
      .text("nsfw!");


};

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>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: auto;
	position: relative;
	width: 960px;
	}

	.node {
	border: solid 1px white;
	font: 10px sans-serif;
	line-height: 12px;
	overflow: hidden;
	position: absolute;
	text-indent: 2px;
	}

	.node img {
	position:absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 3;
	}

	.node span {
	position:absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 5;
	}

	.nsfw {
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	line-height: 24px;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var margin = {top: 40, right: 10, bottom: 10, left: 10},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var treemap = d3.layout.treemap()
	.size([width, height])
	.children(function(d) { return d.values; })
	.padding(2)
	.value(function(d) { return 1; });

	var color = d3.scale.log()
	.range(["#91bfdb","#fc8d59"]);

	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");

	var last = 0;
	var paused = false;

	var after = "";
	var loaded = true;

	d3.timer(function(){
	if(paused) return false
	var now = +new Date();
	if(now - last < 2000) return false;
	last = now;
	if(loaded) getData()
	})

	function getData() {
	var url = "http://www.reddit.com/.json?limit=50";
	if(after) url += "&after=" + after
	loaded = false;
	d3.json(url, function(error, raw) {
	var data = raw.data.children.map(function(d) { return d.data; });
	treechart(data);
	after = data[25].name;
	setTimeout(function(){
	loaded = true;
	}, 1200)
	});
	};


	function treechart(data) {
	color.domain(
	d3.extent(data, function(d) { return d.ups / d.num_comments; })
	);

	var nested = d3.nest()
	.key(function(d) { return "root"; })
	.key(function(d) { return d.subreddit; })
	.entries(data)[0];

	var transformed = treemap.nodes(nested);

	var node = div.selectAll(".node")
	.data(transformed, function(d) { return "key" in d ? (d.key + d.depth) : d.id; });

	node.exit()
	.transition()
	.duration(400)
	.style("opacity", 0)
	.remove();

	node
	.transition()
	.delay(400)
	.duration(400)
	.call(position)

	var entered = node
	.enter().append("div")
	.attr("class", "node")
	.style("opacity", 0)
	.call(position)
	.style("background", function(d) {
	var score = d.ups / d.num_comments;
	return d.children ? null : color(score);
	})
	.filter(function(d) { return !!d.id; })
	.on("click", function(d) {
	console.log(d);
	})

	entered
	.transition()
	.delay(800)
	.duration(400)
	.style("opacity", 1);

	entered
	.filter(function(d) { return !!d.thumbnail; })
	.append("img")
	.attr("src", function(d) { return d.thumbnail; });

	entered
	.append("span")
	.text(function(d) { return d.children ? null : d.subreddit; })
	d3.selectAll(".node")
	.filter(function(d) { return d.over_18; })
	.classed("nsfw", true)
	.style("background", "red")
	.html("")
	.text("nsfw!");


	};

	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>