Supply chain circles - cluster example

_.md

[ Launch: Supply chain circles ] 4586352 by cmutel
[ Launch: An inlet to Tributary ] 4567531 by cmutel

config.json

{"description":"Supply chain circles - cluster 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}},"tab":"edit","display_percent":0.7,"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,"hidepanel":false}

inlet.js

// Shouldn't use cluster because it puts leaf nodes at same level
// see https://github.com/mbostock/d3/wiki/Cluster-Layout
// need to use tree layout instead
// see https://github.com/mbostock/d3/wiki/Tree-Layout

// All the hard stuff stolen from 
// http://mbostock.github.com/d3/talk/20111018/cluster.html

// The idea is to eventually make this a function, so we
// can call cool_graph_layout(data, 

var circle_data = [25, 12, 47],
    data = {
      "name": "fu",
      "size": 10,
      "children": [{
        "name": "process 1",
        "size": 50,
        "children": [{
          "name": "subprocess 1",
          "size": 5
          }, {
          "name": "subprocess 1",
          "size": 15
          }, {
          "name": "subprocess 1",
          "size": 30,
          "children": [{
            "name": "subsubprocess 1",
            "size": 15
            }, {
            "name": "subsubprocess 1",
            "size": 15
            }]
          }]
        }, {
        "name": "process 2",
        "size": 50,
        "children": [{
          "name": "subprocess 2",
          "size": 20
          }, {
          "name": "subprocess 2",
          "size": 15
          }, {
          "name": "subprocess 2",
          "size": 5
          }, {
          "name": "subprocess 2",
          "size": 5
          }, {
          "name": "subprocess 2",
          "size": 5      
          }]
        }]
      },
    w = 1200,
    h = 800,
    spacing = 100;


var lca_circular_result = function (selector, width, height, spacing, circle_widths, data) {
  var svg = d3.select(selector);

  var circles = svg.selectAll("circle").data(circle_widths);

  circles.enter().append("circle")
    .style("stroke", "steelblue")
    .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 cluster = d3.layout.cluster()
    // 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);
  
  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 nodes = cluster.nodes(data);

  // cvis.append("svg:path")
  //    .attr("class", "arc")
  //    .attr("d", d3.svg.arc().innerRadius(ry - 120).outerRadius(ry).startAngle(0).endAngle(2 * Math.PI));

  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:circle")
    // Size shouldn't be in pixels (probably) - can compute ourselves
    // or use a linear scale 
    .attr("r", function (d) { console.log(d["size"]); return 15; } );
  
  var link = vis.selectAll("path.link")
    .data(cluster.links(nodes))
    .enter().append("svg:path")
    .attr("class", "link")
    .attr("fill", "none")
    // Use 10 - i to show the difference strokes
    // FIXME
    .attr("stroke-width", function (d, i) { return 15 - i; })
    // Scale for color?
    .attr("stroke", "red")
    .attr("d", diagonal);
  
}

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