rename processes -> nodes, flows -> links

package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "graphlib": "~2.1.0",
     "d3": "~3.5.16",
-    "sankey-layout": "~0.1.0"
+    "sankey-layout": "~0.2.1"
   },
   "devDependencies": {
     "almost-equal": "~1.0.0",
@@ -27,7 +27,7 @@
   "scripts": {
     "prepublish": "npm run build && npm run bundle",
     "build": "babel src -d lib",
-    "bundle": "browserify -t babelify -t [ browserify-global-shim --d3 d3 ] src/*.js > d3-sankey-diagram.js",
+    "bundle": "npm run build && browserify --standalone sankeyDiagram -t babelify -t [ browserify-global-shim --d3 d3 ] index.js > d3-sankey-diagram.js",
     "test": "browserify -t babelify test/test-*.js | tape-run",
     "jsdoc": "jsdoc --package package.json -r lib/ -d docs"
   },

src/diagram.js

@@ -35,7 +35,7 @@ export default function sankeyDiagram() {
 
   /* Main chart */
 
-  var dispatch = d3.dispatch('selectNode', 'selectGroup', 'selectEdge');
+  var dispatch = d3.dispatch('selectNode', 'selectGroup', 'selectLink');
   function exports(_selection) {
     _selection.each(function(datum) {
 
@@ -54,7 +54,7 @@ export default function sankeyDiagram() {
       if (!datum) return;
       layout.size([width - margin.left - margin.right,
                    height - margin.top - margin.bottom]);
-      layout(datum.flows || [], datum.processes || [], {
+      layout(datum.links || [], datum.nodes || [], {
         rankSets: datum.rankSets || [],
         order: datum.order || null,
         alignMaterials: datum.alignMaterials || false,
@@ -74,7 +74,7 @@ export default function sankeyDiagram() {
       // Events
       svg.on('click', function() {
         dispatch.selectNode.call(this, null);
-        dispatch.selectEdge.call(this, null);
+        dispatch.selectLink.call(this, null);
       });
 
     });
@@ -87,12 +87,12 @@ export default function sankeyDiagram() {
     nodeSel.enter()
       .append('g')
       .classed('node', true)
+      .call(node)
     // .classed('offstage', getNodeOffstage)
       .on('click', selectNode);
 
-    nodeSel
-      .call(node)
-      .attr('class', d => `node node-type-${(d.data || {}).style || 'default'}`
+    nodeSel.transition().ease('linear').call(node);
+    nodeSel.attr('class', d => `node node-type-${(d.data || {}).style || 'default'}`
             + (d.id === selectedNode ? ' selected' : ''));
 
     nodeSel.exit().remove();
@@ -107,7 +107,7 @@ export default function sankeyDiagram() {
       .attr('class', 'link')
       .style('fill', linkColor)
       .style('opacity', linkOpacity)
-      .on('click', selectEdge);
+      .on('click', selectLink);
 
     // Update
     linkSel.call(link);
@@ -156,8 +156,6 @@ export default function sankeyDiagram() {
     const group = svg.select('.groups').selectAll('.group')
       .data(groups);
 
-    console.log('groups', groups);
-
     const enter = group.enter().append('g')
             .attr('class', 'group')
             .on('click', selectGroup);
@@ -172,7 +170,7 @@ export default function sankeyDiagram() {
       .attr('y', -25);
 
     group
-      .style('visibility', d => d.title && d.processes.length > 1 ? 'visible' : 'hidden')
+      .style('visibility', d => d.title && d.nodes.length > 1 ? 'visible' : 'hidden')
       .attr('transform', d => `translate(${d.rect.left},${d.rect.top})`)
       .select('rect')
       .attr('x', -10)
@@ -209,10 +207,10 @@ export default function sankeyDiagram() {
     return parts.join('\n');
   }
 
-  function selectEdge(d) {
+  function selectLink(d) {
     d3.event.stopPropagation();
     var el = d3.select(this)[0][0];
-    dispatch.selectEdge.call(el, d);
+    dispatch.selectLink.call(el, d);
   }
 
   function selectNode(d) {
@@ -302,7 +300,7 @@ export default function sankeyDiagram() {
     return this;
   };
 
-  exports.selectEdge = function(_x) {
+  exports.selectLink = function(_x) {
     selectedEdge = _x;
     return this;
   };

src/node.js

@@ -2,12 +2,14 @@ import d3 from 'd3';
 
 
 export default function() {
-  let visibility = (d) => (d.data || {}).title ? 'visible' : 'hidden',
-      nodeTitle = (d) => d.id;
+  let nodeTitle = (d) => d.id,
+      visibility = (d) => nodeTitle(d) ? 'visible' : 'hidden';
 
-  function sankeyNode(selection) {
-    selection.each(function(d) {
-      const g = d3.select(this);
+  function sankeyNode(context) {
+    context.each(function(d) {
+      // transition is either the selection or the transition
+      const g = d3.select(this),
+            transition = d3.transition(g);
 
       const title = g.selectAll('title').data([0]),
             text = g.selectAll('text').data([0]),
@@ -26,8 +28,6 @@ export default function() {
         .style('pointer-events', 'all');
 
       // Update
-      const transition = g.transition().ease('linear');
-
       transition
         .attr('transform', nodeTransform)
         .style('visibility', function(d) {

src/positionGroup.js

@@ -6,7 +6,7 @@ export default function positionGroup(nodes, group) {
     right: 0
   };
 
-  group.processes.forEach(n => {
+  group.nodes.forEach(n => {
     const node = nodes.get(n);
     if (!node) return;
     if (node.x < rect.left) rect.left = node.x;

test/test-diagram.js

@@ -6,7 +6,7 @@ import test from 'tape';
 
 test('diagram: renders something and updates', t => {
   // prepare data
-  const {processes, flows} = exampleBlastFurnace();
+  const {nodes, links} = exampleBlastFurnace();
 
   // diagram
 
@@ -15,7 +15,7 @@ test('diagram: renders something and updates', t => {
   const el = d3.select('body').append('div');
 
   el
-    .datum({processes, flows})
+    .datum({nodes, links})
     .call(diagram);
   flushAnimationFrames();
 
@@ -28,7 +28,7 @@ test('diagram: renders something and updates', t => {
   // update
   const h0 = +el.select('.node').select('rect').attr('height');
 
-  flows.forEach(e => { e.value *= 1.1; });
+  links.forEach(e => { e.value *= 1.1; });
   el.call(diagram);
   flushAnimationFrames();
   const h1 = +el.select('.node rect').attr('height');
@@ -39,13 +39,13 @@ test('diagram: renders something and updates', t => {
 
 
 test('diagram: materials', t => {
-  const {processes, flows} = exampleMaterials();
+  const {nodes, links} = exampleMaterials();
 
   const color = d3.scale.category10();
   const diagram = sankeyDiagram()
           .linkColor(d => color(d.data.material));
 
-  const el = render({processes, flows}, diagram);
+  const el = render({nodes, links}, diagram);
 
   t.equal(el.selectAll('.node')[0].length, 4,
           'right number of nodes');
@@ -58,7 +58,7 @@ test('diagram: materials', t => {
 
 
 test('diagram: link attributes', t => {
-  const flows = [
+  const links = [
     {source: 'a', target: 'b', value: 2, material: 'x',
      color: 'red'},
   ];
@@ -69,7 +69,7 @@ test('diagram: link attributes', t => {
           .linkColor(d => d.data.color)
           .linkOpacity(d => 1 / d.data.value);
 
-  const el = render({flows}, diagram),
+  const el = render({links}, diagram),
         link = el.selectAll('.link');
 
   t.deepEqual(d3.rgb(link.style('fill')), d3.rgb('red'), 'link color');
@@ -83,7 +83,7 @@ test('diagram: link attributes', t => {
     .linkColor('blue')
     .linkOpacity(0.9);
 
-  const el2 = render({flows}, diagram),
+  const el2 = render({links}, diagram),
         link2 = el2.selectAll('.link');
 
   t.deepEqual(d3.rgb(link2.style('fill')), d3.rgb('blue'), 'link color (const)');
@@ -104,11 +104,11 @@ function render(datum, diagram) {
 
 
 function exampleBlastFurnace() {
-  // Simplified example of flows through coke oven and blast furnace
-  const processes = [
+  // Simplified example of links through coke oven and blast furnace
+  const nodes = [
   ];
 
-  const flows = [
+  const links = [
     // main flow
     {source: 'input', target: 'oven', value: 2.5},
     {source: 'oven', target: 'coke', value: 2.5},
@@ -118,7 +118,7 @@ function exampleBlastFurnace() {
     {source: 'bf', target: 'output', value: 1},
     {source: 'bf', target: 'export', value: 1},
 
-    // additional export flows, and input-sinter
+    // additional export links, and input-sinter
     {source: 'sinter', target: 'export', value: 0.2},
     {source: 'oven', target: 'export', value: 0.2},
     {source: 'input', target: 'sinter', value: 0.2},
@@ -128,23 +128,23 @@ function exampleBlastFurnace() {
     {source: 'bf', target: 'input', value: 0.5},
   ];
 
-  return {processes, flows};
+  return {nodes, links};
 }
 
 
 function exampleMaterials() {
-  const processes = [
+  const nodes = [
   ];
 
-  const flows = [
+  const links = [
     {source: 'a', target: 'b', value: 2, material: 'x'},
     {source: 'a', target: 'b', value: 2, material: 'y'},
     {source: 'b', target: 'c', value: 1, material: 'x'},
     {source: 'b', target: 'c', value: 2, material: 'y'},
     {source: 'b', target: 'd', value: 1, material: 'x'},
   ];
 
-  return {processes, flows};
+  return {nodes, links};
 }
 
 

test/test-groups.js

@@ -6,22 +6,22 @@ import test from 'tape';
 
 test('groups: draws box around nodes', t => {
   // prepare data
-  const processes = [
+  const nodes = [
   ];
 
-  const flows = [
+  const links = [
     {source: 'a1', target: 'b', value: 1},
     {source: 'a2', target: 'b', value: 1},
   ];
 
   const groups = [
-    {title: 'Group', processes: ['a1', 'a2']},
-    {title: 'B', processes: ['b']},
+    {title: 'Group', nodes: ['a1', 'a2']},
+    {title: 'B', nodes: ['b']},
   ];
 
   // diagram
   const diagram = sankeyDiagram();
-  const el = render({processes, flows, groups}, diagram);
+  const el = render({nodes, links, groups}, diagram);
 
   t.equal(el.selectAll('.node')[0].length, 3,
           'right number of nodes');

test/test-positionGroups.js

@@ -27,22 +27,22 @@ test('positionGroup()', t => {
 
   const group1 = {
     "title": "Group",
-    "processes": ["a1", "a2"]
+    "nodes": ["a1", "a2"]
   };
 
   const group2 = {
     "title": "B",
-    "processes": ["b"]
+    "nodes": ["b"]
   };
 
   const group3 = {
     "title": "All",
-    "processes": ["a1", "a2", "b"]
+    "nodes": ["a1", "a2", "b"]
   };
 
   t.deepEqual(positionGroup(nodes, group1), {
     title: "Group",
-    processes: ["a1", "a2"],
+    nodes: ["a1", "a2"],
     rect: {
       top: 30,
       left: 0,
@@ -53,7 +53,7 @@ test('positionGroup()', t => {
 
   t.deepEqual(positionGroup(nodes, group2), {
     title: "B",
-    processes: ["b"],
+    nodes: ["b"],
     rect: {
       top: 75,
       left: 300,
@@ -64,7 +64,7 @@ test('positionGroup()', t => {
 
   t.deepEqual(positionGroup(nodes, group3), {
     title: "All",
-    processes: ["a1", "a2", "b"],
+    nodes: ["a1", "a2", "b"],
     rect: {
       top: 30,
       left: 0,