reddit treemap

_.md

[ Launch: reddit treemap ] d2920a4c8643fb45912b by enjalot
[ Launch: github commit exploration ] 9960b7384b42d22edd3f by enjalot

config.json

{"description":"reddit treemap","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/Dr9GWKG.png"}

inlet.js

//https://github.com/mbostock/d3/wiki/Treemap-Layout#ratio
var ratio = 0.5 * (1 + Math.sqrt(5));

var width = tributary.sw; //magic variable
var height = tributary.sh;
var color = d3.scale.log()
  .range(["#91bfdb","#fc8d59"]);

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

var div = d3.select("#display");

d3.json("http://www.reddit.com/.json?limit=100", function(error, raw) {
  var data = raw.data.children.map(function(d) { return d.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.datum(nested).selectAll(".node")
      .data(treemap.nodes)
    .enter().append("div")
      .attr("class", "node")
      .call(position)
      .style("background", function(d) {
        var score = d.ups / d.num_comments;
        return d.children ? null : color(score);
      })
      .on("click", function(d) {
        console.log(d); 
      })

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

    node
      .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"; });
}

style.css

.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;
}