Supply chain circles - tree example

_.md

[ Launch: Supply chain circles - tree example ] 4646770 by roundrobin
[ Launch: An inlet to Tributary ] 4567531 by cmutel

config.json

{"description":"Supply chain circles - tree example","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.7,"hidepanel":false,"fullscreen":false,"thumbnail":"http://i.imgur.com/4WtoJHn.png"}

inlet.js

// LCA supply chain circular visualization using D3.js
// TODO:
// Decide on input data format
// Color of paths?
// Button to toggle individual / cumulative weights

var circle_data = [25, 12, 47],
    data = {
      "name": "fu",
      "category": ["water"],
      "size": 1000,
      "children": [{
        "name": "process 1",
        "category": ["water"],
        "size": 500,
        "children": [{
          "name": "subprocess 1\nTest linebreaks!",
          "category": ["water"],
          "size": 50
          }, {
          "name": "subprocess 1",
          "category": ["resources"],
          "size": 150
          }, {
          "name": "subprocess 1",
          "category": ["mining"],
          "size": 300,
          "children": [{
            "name": "subsubprocess 1",
            "category": ["machinery"],
            "size": 150
            }, {
            "name": "subsubprocess 1",
            "category": ["machinery"],
            "size": 150
            }, {
            "name": "subsubprocess 1",
            "category": ["machinery"],
            "size": 150
            }, {
            "name": "subsubprocess 1",
            "category": ["mining"],
            "size": 150
            }]
          }]
        }, {
        "name": "process 2",
        "category": ["electricity"],
        "size": 500,
        "children": [{
          "name": "subprocess 2",
          "category": ["hydro"],
          "size": 200
          }, {
          "name": "subprocess 2",
          "category": ["hydro"],
          "size": 150
          }, {
          "name": "subprocess 2",
          "category": ["infrastructure"],
          "size": 50
          }, {
          "name": "subprocess 2",
          "category": ["infrastructure"],
          "size": 50
          }, {
          "name": "subprocess 2",
          "category": ["transmission"],
          "size": 50      
          }]
        }]
      },
    w = 1200,
    h = 800,
    spacing = 100;


var lca_circular_result = function (selector, width, height, spacing, circle_widths, data) {
  var svg = d3.select(selector),
      circles = svg.selectAll("circle").data(circle_widths),
	  // Default color scheme
      category_scale = d3.scale.category20();

  circles.enter().append("circle")
    .style("stroke", "darkgrey")
    .attr("cy", height / 2)
    .attr("cx", width / 2)
    .attr("fill", "none")
    .attr("r", function (d, i) { return (i + 1) * spacing; })
    .attr("stroke-width", function (d) { return d; });

  var tree = d3.layout.tree()
    // 360 degrees, number of levels * 100 
    /// Should probably use a linear scale instead 
    // (or even non-linear scale - outer circles closer?)
    .size([360, circle_widths.length * spacing])
    .sort(null)
    .separation(function separation(a, b) {
      return (a.parent == b.parent ? 1 : 2) / a.depth;
}),
  	nodes = tree.nodes(data);
  
  var diagonal = d3.svg.diagonal.radial()
    .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });

  var vis = svg.append("svg:g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

  var node = vis.selectAll("g.node")
    .data(nodes)
    .enter().append("svg:g")
    .attr("class", "node")
    .attr("transform", function(d) { 
      return "rotate(" + (d.x - 90) + ") translate(" + d.y + ")"; 
    });

  node.append("svg:title")
     .text(function (d) { return d.name;});
  
  node.append("svg:circle")
    // Size shouldn't be in pixels (probably) - can compute ourselves
    // or use a linear scale 
    .attr("r", function (d) { return 3 * Math.sqrt(d.size / Math.PI); } )
    .attr("fill", function (d) { return category_scale(d.category.valueOf(1)); });

  var link = vis.selectAll("path.link")
    .data(tree.links(nodes))
    .enter().append("svg:path")
    .attr("class", "link")
    .attr("fill", "none")
    // Use 15 - i to show the difference strokes
    // FIXME
    .attr("stroke-width", function (d, i) { return 15 - i; })
    // Scale for color?
    .attr("stroke", "black")
    .attr("d", diagonal);
  
}

lca_circular_result("svg", w, h, spacing, circle_data, data);