Add rollup layout.

This implements Martin Wattenberg's PivotGraph technique, described in "Visual Exploration of Multivariate Graphs", CHI 2006. I've included a force-directed layout of the same trivial dataset for comparison. Still to-do: spline interpolation and arrow markers for lines, which would allow rendering of pretty directed links.
mbostock · Mar 13, 2010 · c1f7557 · c1f7557
1 parent 24a6a85
commit c1f7557
Show file tree

Hide file tree

Showing 6 changed files with 207 additions and 1 deletion.
diff --git a/Makefile b/Makefile
@@ -72,6 +72,7 @@ JS_PV_FILES = \
 	src/layout/Partition.js \
 	src/layout/Arc.js \
 	src/layout/Horizon.js \
+	src/layout/Rollup.js \
 	src/behavior/Behavior.js \
 	src/behavior/Drag.js \
 	src/behavior/Point.js \

diff --git a/TODO b/TODO
@@ -27,7 +27,7 @@ mark/Area.js
 
 behavior/*
 - documentation, implementation, etc.
-- should behaviors automatically re-render?
+- should behaviors automatically re-render? render hooks (e.g., panel-transform)
 
 behavior/Select.js
 - rewrite

diff --git a/src/layout/Rollup.js b/src/layout/Rollup.js
@@ -0,0 +1,88 @@
+pv.Layout.Rollup = function() {
+  pv.Layout.Network.call(this);
+  var that = this;
+
+  /* Evaluate positional properties on each node. */
+  this.data(function() { return that.nodes(); });
+
+  /* Render rollup nodes. */
+  this.node
+      .data(function() { return that.scene.$rollup.nodes; })
+      .size(function(d) { return d.nodes.length * 20; });
+
+  /* Render rollup links. */
+  var add = this.link.add;
+  this.link.add = function(type) {
+      var mark = add.call(this, type);
+      mark.parent.data(function() { return that.scene.$rollup.links; });
+      return mark;
+    };
+};
+
+pv.Layout.Rollup.prototype = pv.extend(pv.Layout.Network)
+    .property("directed", Boolean);
+
+pv.Layout.Rollup.prototype.init = function() {
+  if (pv.Layout.Network.prototype.init.call(this)) return;
+  delete this.scene.$rollup;
+};
+
+pv.Layout.Rollup.prototype.build = function() {
+  pv.Layout.Network.prototype.build.call(this);
+  if (this.scene.$rollup) return;
+  var scene = this.scene,
+      nodes = this.nodes(),
+      links = this.links(),
+      directed = this.directed(),
+      rnindex = 0,
+      rnodes = {},
+      rlinks = {};
+
+  /** @private */
+  function id(i) {
+    return scene[i].left + "," + scene[i].top;
+  }
+
+  /* Compute rollup nodes. */
+  for (var i = 0; i < nodes.length; i++) {
+    var nodeId = id(i),
+        rn = rnodes[nodeId];
+    if (!rn) {
+      rn = rnodes[nodeId] = pv.extend(nodes[i]);
+      rn.index = rnindex++;
+      rn.x = scene[i].left;
+      rn.y = scene[i].top;
+      rn.nodes = [];
+    }
+    rn.nodes.push(nodes[i]);
+  }
+
+  /* Compute rollup links. */
+  for (var i = 0; i < links.length; i++) {
+    var source = links[i].sourceNode,
+        target = links[i].targetNode,
+        rsource = rnodes[id(source.index)],
+        rtarget = rnodes[id(target.index)],
+        reverse = !directed && rsource.index > rtarget.index,
+        linkId = reverse
+            ? rtarget.index + "," + rsource.index
+            : rsource.index + "," + rtarget.index,
+        rl = rlinks[linkId];
+    if (!rl) {
+      rl = rlinks[linkId] = {
+        sourceNode: rsource,
+        targetNode: rtarget,
+        linkValue: 0,
+        links: []
+      };
+    }
+    rl.links.push(links[i]);
+    rl.linkValue += links[i].linkValue;
+  }
+
+  /* Export the rolled up nodes and links to the scene. */
+  this.scene.$rollup = {
+    nodes: pv.values(rnodes),
+    links: pv.values(rlinks)
+  };
+};
diff --git a/tests/layout/force4.html b/tests/layout/force4.html
@@ -0,0 +1,41 @@
+<html>
+  <head>
+    <title>Social Force</title>
+    <script type="text/javascript" src="../../protovis-d3.2.js"></script>
+    <script type="text/javascript" src="../social.js"></script>
+    <style type="text/css">
+
+body {
+  margin: 0;
+}
+
+    </style>
+  </head>
+  <body>
+    <script type="text/javascript+protovis">
+
+var vis = new pv.Panel()
+    .width(window.innerWidth)
+    .height(window.innerHeight)
+    .fillStyle("white")
+    .event("mousedown", pv.Behavior.pan())
+    .event("mousewheel", pv.Behavior.zoom());
+
+vis.add(pv.Layout.Force)
+    .nodes(social.nodes)
+    .links(social.links)
+  .link.add(pv.Line)
+  .node.add(pv.Dot)
+    .strokeStyle(null)
+    .shape(function(d) d.gender == "M" ? "square" : "circle")
+    .fillStyle(function(d) d.group == 1 ? "black" : "grey")
+    .event("mousedown", pv.Behavior.drag())
+  .anchor("center").add(pv.Label)
+    .textStyle("white")
+    .text(function(d) d.gender + d.group);
+
+vis.render();
+
+    </script>
+  </body>
+</html>
diff --git a/tests/layout/rollup.html b/tests/layout/rollup.html
@@ -0,0 +1,48 @@
+<html>
+  <head>
+    <title>Social Rollup</title>
+    <script type="text/javascript" src="../../protovis-d3.2.js"></script>
+    <script type="text/javascript" src="../social.js"></script>
+  </head>
+  <body>
+    <script type="text/javascript+protovis">
+
+var w = 100,
+    h = 100,
+    fx = function(d) d.gender,
+    fy = function(d) d.group,
+    x = pv.Scale.ordinal(social.nodes, fx).splitFlush(0, w),
+    y = pv.Scale.ordinal(social.nodes, fy).splitFlush(0, h);
+
+var vis = new pv.Panel()
+    .width(w)
+    .height(h)
+    .margin(30);
+
+vis.add(pv.Layout.Rollup)
+    .nodes(social.nodes)
+    .links(social.links)
+    .left(x.by(fx))
+    .top(y.by(fy))
+  .link.add(pv.Line)
+  .node.add(pv.Dot);
+
+vis.add(pv.Label)
+    .data(x.domain())
+    .left(x)
+    .top(-10)
+    .textAlign("center")
+    .textBaseline("bottom");
+
+vis.add(pv.Label)
+    .data(y.domain())
+    .top(y)
+    .left(-10)
+    .textAlign("right")
+    .textBaseline("middle");
+
+vis.render();
+
+    </script>
+  </body>
+</html>
diff --git a/tests/social.js b/tests/social.js
@@ -0,0 +1,28 @@
+var social = {
+  nodes: [
+    {gender: "M", group: 1},
+    {gender: "F", group: 2},
+    {gender: "M", group: 1},
+    {gender: "M", group: 2},
+    {gender: "F", group: 2},
+    {gender: "M", group: 1},
+    {gender: "F", group: 1},
+    {gender: "M", group: 2},
+    {gender: "F", group: 2},
+    {gender: "F", group: 2}
+  ],
+  links: [
+    {source: 0, target: 1},
+    {source: 1, target: 2},
+    {source: 2, target: 3},
+    {source: 2, target: 4},
+    {source: 2, target: 5},
+    {source: 2, target: 6},
+    {source: 2, target: 7},
+    {source: 5, target: 6},
+    {source: 6, target: 7},
+    {source: 5, target: 8},
+    {source: 8, target: 6},
+    {source: 6, target: 9}
+  ]
+};