Bluelight & Drugsforum treemaps (Cassandra)

README.md

A comparison of two forums analysed in the Cassandra project (Bluelight on the left, and Drugsforum on the right). Two hierarchies are visualized in a single treemap having a "fake" root (and two "fake children" used to create a padding between the two hierarchies).

bluelight_forum.csv

drugsforum.csv

index.coffee

svg = d3.select('svg')
width = svg.node().getBoundingClientRect().width
height = svg.node().getBoundingClientRect().height

# append a group for zoomable content
zoomable_layer = svg.append('g')

# define a zoom behavior
zoom = d3.behavior.zoom()
  .scaleExtent([1,1000]) # min-max zoom
  .on 'zoom', () ->
    # GEOMETRIC ZOOM
    zoomable_layer
      .attr
        transform: "translate(#{zoom.translate()})scale(#{zoom.scale()})"

# bind the zoom behavior to the main SVG
svg.call(zoom)

vis = zoomable_layer.append('g')
  .attr
    class: 'vis'
    transform: "translate(#{width/2-400},#{height/2-200})"


# define the treemap layout
PAD = 6

treemap = d3.layout.treemap()
  .size([800, 400])
  .value((d) -> d.size)
  .sort(null)
  .padding((d) ->
    # WARNING special padding depends on ordering (bluelight first, drugsforum next)
    switch d.id
      when 'root_fake' then 0
      when 'bluelight_fake' then [0,2*PAD,0,0]
      when 'drugsforum_fake' then [0,0,0,2*PAD]
      else PAD
  )
  .ratio(1)
  .round(false) # bugfix: d3 wrong ordering

# define a categorical color scale
color = d3.scale.category20c()

# correction scales for labels
correct_x = d3.scale.linear()
  .domain([0, width])
  .range([0, width*1.2])
correct_y = d3.scale.linear()
  .domain([0, height])
  .range([0, height*1.1])

# fetch data
d3.csv 'drugsforum.csv', (data1) ->
  
  # prepare table 1 for merging into a single tree
  data1.forEach (d) ->
    d.size = +d.size
    d.id = 'drugsforum_' + d.id
    d.forum_parent_id = if d.forum_parent_id is "null" then 'drugsforum_fake' else 'drugsforum_' + d.forum_parent_id
  
  d3.csv 'bluelight_forum.csv', (data2) ->
    
    # prepare table 2 for merging into a single tree
    data2.forEach (d) ->
      d.size = +d.size
      d.id = 'bluelight_' + d.id
      d.forum_parent_id = if d.forum_parent_id is "null" then 'bluelight_fake' else 'bluelight_' + d.forum_parent_id

    # merge tables
    data = data1.concat(data2)
    
    # add fake nodes: a single root for both hierarchies and two more internal nodes to hack d3 treemap padding
    data.push {
      id: 'drugsforum_fake',
      size: 0,
      forum_parent_id: 'root_fake',
      name: '',
      fake: true
    }
    data.push {
      id: 'bluelight_fake',
      size: 0,
      forum_parent_id: 'root_fake',
      name: '',
      fake: true
    }
    data.push {
      id: 'root_fake',
      size: 0,
      forum_parent_id: null,
      name: '',
      fake: true
    }
    
    # create the tree structure
    index = {}
    data.forEach (d) ->
      index[d.id] = d
      d.children = []
  
    data.forEach (d) -> if d.forum_parent_id isnt null
      index[d.forum_parent_id].children.push d
      
    tree = index['root_fake']
    
    # split the names for displaying multiline labels
    data.forEach (d) ->
      d.splitted_name = d.name.split(' ')
      
    walk = (n, depth) ->
      # no children array -> empty children array
      if not n.children?
        n.children = []
        
      if n.children.length > 0
        for child in n.children
          walk(child, depth+1)
        
        # sort children
        n.children.sort (a,b) -> a.size - b.size
        
        # save original size for later
        size = n.size
        
        # compute aggregated node sizes
        n.size += d3.sum n.children, (d) -> d.size

        # add the node representing leaves
        n.children.unshift {
          name: n.name,
          splitted_name: n.splitted_name,
          size: size,
          leaves: true
        }

    walk(tree, 0)
  
    # depth-first enumeration
    i = 0
    walk_i = (n) ->
      if n.children?
        for child in n.children
          walk_i(child)
      n.i = i
      i += 1

    walk_i(tree)

    # compute the treemap layout
    data = treemap.nodes(tree)
    
    # draw the treemap
    boxes = vis.selectAll('.box')
      .data(data)
      
    enter_boxes = boxes.enter().append('g')
      .attr
        class: 'box'
        transform: (d) -> "translate(#{d.x},#{d.y})"
      .classed('hidden', (d) -> d.fake? and d.fake)
      .classed('leaves', (d) -> d.leaves? and d.leaves)
      
    enter_boxes.append('rect')
      .attr
        width: (d) -> d.dx
        height: (d) -> d.dy
        fill: (d) ->
          if d.leaves? and d.leaves
            return color(d.parent.i)
          else
            return color(d.i)
        
    enter_labels_g = enter_boxes.append('g')
      .classed('hidden', (d) -> d.children?)

    enter_labels = enter_labels_g.append('svg')
      .attr
        class: 'label'

    enter_texts = enter_labels.append('text')

    tspans = enter_texts.selectAll('tspan')
      .data((d) -> d.splitted_name)

    tspans.enter().append('tspan')
      .text((d) -> d.toUpperCase())
      .attr
        x: 0
        y: (d, i) ->
          l = d3.select(this.parentNode).datum().splitted_name.length
          return (i-l/2) + 'em'

    enter_texts
      .each (node) ->
        bbox = this.getBBox()
        bbox_aspect = bbox.width / bbox.height

        node_bbox = {width: node.dx, height: node.dy}
        node_bbox_aspect = node_bbox.width / node_bbox.height

        rotate = bbox_aspect >= 1 and node_bbox_aspect < 1 or bbox_aspect < 1 and node_bbox_aspect >= 1
        node.label_bbox = {
          x: bbox.x+(bbox.width-correct_x(bbox.width))/2,
          y: bbox.y+(bbox.height-correct_y(bbox.height))/2,
          width: correct_x(bbox.width),
          height: correct_y(bbox.height)
        }

        if rotate
          node.label_bbox = {
            x: node.label_bbox.y,
            y: node.label_bbox.x,
            width: node.label_bbox.height,
            height: node.label_bbox.width
          }      
          d3.select(this).attr('transform', 'rotate(90) translate(0,28)')

    enter_labels
      .attr
        width: (d) -> d.dx
        height: (d) -> d.dy
        viewBox: (d) -> "#{d.label_bbox.x} #{d.label_bbox.y} #{d.label_bbox.width} #{d.label_bbox.height}"
        preserveAspectRatio: 'none'
        fill: (d) ->
          if d.leaves? and d.leaves
            c = d3.hcl(color(d.parent.i))
          else
            c = d3.hcl(color(d.i))
            
          c.l -= 20
          return c

    enter_boxes.append('title')
      .text (d) ->
        "#{d.name}\n#{d3.format(',')(d.size)} posts" + if d.leaves? and d.leaves then '\n(subforums excluded)' else ''
        

index.css

.box rect {
  stroke: #111;
  vector-effect: non-scaling-stroke;
}
.box.leaves rect {
  stroke: none;
}

.label {
  pointer-events: none;
  text-anchor: middle;
  font-family: Impact;
}

.box:hover .label {
  fill: black;
}
.box:hover rect {
  fill: yellow;
}

.hidden {
  display: none;
}

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bluelight and Drugsforum treemaps (Cassandra)</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <svg width="960px" height="500px"></svg>
    <script src="index.js"></script>
  </body>
</html>

index.js

// Generated by CoffeeScript 1.4.0
(function() {
  var PAD, color, correct_x, correct_y, height, svg, treemap, vis, width, zoom, zoomable_layer;

  svg = d3.select('svg');

  width = svg.node().getBoundingClientRect().width;

  height = svg.node().getBoundingClientRect().height;

  zoomable_layer = svg.append('g');

  zoom = d3.behavior.zoom().scaleExtent([1, 1000]).on('zoom', function() {
    return zoomable_layer.attr({
      transform: "translate(" + (zoom.translate()) + ")scale(" + (zoom.scale()) + ")"
    });
  });

  svg.call(zoom);

  vis = zoomable_layer.append('g').attr({
    "class": 'vis',
    transform: "translate(" + (width / 2 - 400) + "," + (height / 2 - 200) + ")"
  });

  PAD = 6;

  treemap = d3.layout.treemap().size([800, 400]).value(function(d) {
    return d.size;
  }).sort(null).padding(function(d) {
    switch (d.id) {
      case 'root_fake':
        return 0;
      case 'bluelight_fake':
        return [0, 2 * PAD, 0, 0];
      case 'drugsforum_fake':
        return [0, 0, 0, 2 * PAD];
      default:
        return PAD;
    }
  }).ratio(1).round(false);

  color = d3.scale.category20c();

  correct_x = d3.scale.linear().domain([0, width]).range([0, width * 1.2]);

  correct_y = d3.scale.linear().domain([0, height]).range([0, height * 1.1]);

  d3.csv('drugsforum.csv', function(data1) {
    data1.forEach(function(d) {
      d.size = +d.size;
      d.id = 'drugsforum_' + d.id;
      return d.forum_parent_id = d.forum_parent_id === "null" ? 'drugsforum_fake' : 'drugsforum_' + d.forum_parent_id;
    });
    return d3.csv('bluelight_forum.csv', function(data2) {
      var boxes, data, enter_boxes, enter_labels, enter_labels_g, enter_texts, i, index, tree, tspans, walk, walk_i;
      data2.forEach(function(d) {
        d.size = +d.size;
        d.id = 'bluelight_' + d.id;
        return d.forum_parent_id = d.forum_parent_id === "null" ? 'bluelight_fake' : 'bluelight_' + d.forum_parent_id;
      });
      data = data1.concat(data2);
      data.push({
        id: 'drugsforum_fake',
        size: 0,
        forum_parent_id: 'root_fake',
        name: '',
        fake: true
      });
      data.push({
        id: 'bluelight_fake',
        size: 0,
        forum_parent_id: 'root_fake',
        name: '',
        fake: true
      });
      data.push({
        id: 'root_fake',
        size: 0,
        forum_parent_id: null,
        name: '',
        fake: true
      });
      index = {};
      data.forEach(function(d) {
        index[d.id] = d;
        return d.children = [];
      });
      data.forEach(function(d) {
        if (d.forum_parent_id !== null) {
          return index[d.forum_parent_id].children.push(d);
        }
      });
      tree = index['root_fake'];
      data.forEach(function(d) {
        return d.splitted_name = d.name.split(' ');
      });
      walk = function(n, depth) {
        var child, size, _i, _len, _ref;
        if (!(n.children != null)) {
          n.children = [];
        }
        if (n.children.length > 0) {
          _ref = n.children;
          for (_i = 0, _len = _ref.length; _i < _len; _i++) {
            child = _ref[_i];
            walk(child, depth + 1);
          }
          n.children.sort(function(a, b) {
            return a.size - b.size;
          });
          size = n.size;
          n.size += d3.sum(n.children, function(d) {
            return d.size;
          });
          return n.children.unshift({
            name: n.name,
            splitted_name: n.splitted_name,
            size: size,
            leaves: true
          });
        }
      };
      walk(tree, 0);
      i = 0;
      walk_i = function(n) {
        var child, _i, _len, _ref;
        if (n.children != null) {
          _ref = n.children;
          for (_i = 0, _len = _ref.length; _i < _len; _i++) {
            child = _ref[_i];
            walk_i(child);
          }
        }
        n.i = i;
        return i += 1;
      };
      walk_i(tree);
      data = treemap.nodes(tree);
      boxes = vis.selectAll('.box').data(data);
      enter_boxes = boxes.enter().append('g').attr({
        "class": 'box',
        transform: function(d) {
          return "translate(" + d.x + "," + d.y + ")";
        }
      }).classed('hidden', function(d) {
        return (d.fake != null) && d.fake;
      }).classed('leaves', function(d) {
        return (d.leaves != null) && d.leaves;
      });
      enter_boxes.append('rect').attr({
        width: function(d) {
          return d.dx;
        },
        height: function(d) {
          return d.dy;
        },
        fill: function(d) {
          if ((d.leaves != null) && d.leaves) {
            return color(d.parent.i);
          } else {
            return color(d.i);
          }
        }
      });
      enter_labels_g = enter_boxes.append('g').classed('hidden', function(d) {
        return d.children != null;
      });
      enter_labels = enter_labels_g.append('svg').attr({
        "class": 'label'
      });
      enter_texts = enter_labels.append('text');
      tspans = enter_texts.selectAll('tspan').data(function(d) {
        return d.splitted_name;
      });
      tspans.enter().append('tspan').text(function(d) {
        return d.toUpperCase();
      }).attr({
        x: 0,
        y: function(d, i) {
          var l;
          l = d3.select(this.parentNode).datum().splitted_name.length;
          return (i - l / 2) + 'em';
        }
      });
      enter_texts.each(function(node) {
        var bbox, bbox_aspect, node_bbox, node_bbox_aspect, rotate;
        bbox = this.getBBox();
        bbox_aspect = bbox.width / bbox.height;
        node_bbox = {
          width: node.dx,
          height: node.dy
        };
        node_bbox_aspect = node_bbox.width / node_bbox.height;
        rotate = bbox_aspect >= 1 && node_bbox_aspect < 1 || bbox_aspect < 1 && node_bbox_aspect >= 1;
        node.label_bbox = {
          x: bbox.x + (bbox.width - correct_x(bbox.width)) / 2,
          y: bbox.y + (bbox.height - correct_y(bbox.height)) / 2,
          width: correct_x(bbox.width),
          height: correct_y(bbox.height)
        };
        if (rotate) {
          node.label_bbox = {
            x: node.label_bbox.y,
            y: node.label_bbox.x,
            width: node.label_bbox.height,
            height: node.label_bbox.width
          };
          return d3.select(this).attr('transform', 'rotate(90) translate(0,28)');
        }
      });
      enter_labels.attr({
        width: function(d) {
          return d.dx;
        },
        height: function(d) {
          return d.dy;
        },
        viewBox: function(d) {
          return "" + d.label_bbox.x + " " + d.label_bbox.y + " " + d.label_bbox.width + " " + d.label_bbox.height;
        },
        preserveAspectRatio: 'none',
        fill: function(d) {
          var c;
          if ((d.leaves != null) && d.leaves) {
            c = d3.hcl(color(d.parent.i));
          } else {
            c = d3.hcl(color(d.i));
          }
          c.l -= 20;
          return c;
        }
      });
      return enter_boxes.append('title').text(function(d) {
        return ("" + d.name + "\n" + (d3.format(',')(d.size)) + " posts") + ((d.leaves != null) && d.leaves ? '\n(subforums excluded)' : '');
      });
    });
  });

}).call(this);

thumbnail.png