D3 Examples - Reddit Treemap 2

xxxxxxxxxx
 
<!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="https://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 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)
    .value(function(d) { return d.score; });
​
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 tooltip = div.append("div")
    .style("background", "#fff")
    .style("position", "absolute")
    .style("display", "none")
    .style("z-index", 5000)
    .style("top", "80px")
    .style("left", "90px")
    .style("width", "200px")
    .style("padding", "10px")
    .style("pointer-events", "none")
    .text("Testing");
​
d3.json("https://www.reddit.com/.json?limit=100", function(error, raw) {
  window.data = raw.data.children.map(function(d) { return d.data; });
  color.domain(
    d3.extent(data, function(d) { return d.ups / d.num_comments; })
  );
​
  window.nested = d3.nest()
      .key(function(d) { return "root"; })
      .key(function(d) { return d.subreddit; })
      .entries(data)[0];
​
  window.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);
      })
      .filter(function(d) { return !!d.id; })
      .on("click", function(d) {
        console.log(d); 
      })
      .on("mousemove", function(d) {
        var pos = d3.mouse(this);
​
        tooltip
          .style("display", null)
          .style("top", (d.y + pos[1]) + "px")
          .style("left", d.x > width/2
            ? (d.x + pos[0] - 200) + "px"
            : (d.x + pos[0]) + "px")
//          .style("top", (d.y + d.dy) + "px")
//          .style("left", (d.x + d.dx) + "px")
          .text(d.title);
      })
      .on("mouseout", function(d) {
        tooltip
          .style("display", "none")
          .text(d.title);
      })
​
    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"; });
}
​
</script>
​
    