star-network

_.md

[ Launch: arc-tween ] 23b7aa99892659cb323e by jdutta
[ Launch: Tributary inlet ] 9d639d570c935dfc69e1 by jdutta

chart_data.json

{
  "name": "Elastica",
  "children": [
    {"name": "UI"},
    {"name": "QA"},
    {"name": "QA"},
    {"name": "QA"},
    {"name": "QA"},
    {"name": "Connectors"},
    {
      "name": "Webdev",
      "children": [
        {"name": "d1"},
        {"name": "d2"},
        {"name": "d2"},
        {"name": "d2"},
        {
          "name": "d3",
          "children": [
            {"name": "d1"},
            {"name": "d2"},
            {"name": "d2"},
            {"name": "d2"},
            {"name": "d3"}
          ]
        }
      ]
    },
    {"name": "HR"},
    {
      "name": "Sales",
      "children": [
        {"name": "Sri"},
        {"name": "Asad"},
        {
          "name": "Sami",
          "children": [
            {"name": "d1"},
            {"name": "d2"},
            {"name": "d2"},
            {"name": "d2"},
            {
              "name": "d3",
              "children": [
                {"name": "d1"},
                {"name": "d2"},
                {"name": "d2"},
                {"name": "d2"},
                {
                  "name": "d3",
                  "children": [
                    {"name": "d1"},
                    {"name": "d2"},
                    {"name": "d2"},
                    {"name": "d2"},
                    {"name": "d3"}
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

config.json

{"description":"star-network","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},"chart_data.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"chart_data.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"main.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/Sp72PJo.gif"}

inlet.js

// Arc tween trial
// From: http://bl.ocks.org/mbostock/5100636

// Configurable params
// Click on the number and see a magic slider appears to tweak it.
var config = {
  centerx: 50,
  centery: 50,
  armLen: 164,
  armLenVar: 160,
  rootR: 20,
  childRFactor: 0.6,
  transDuration: 500,
  color: d3.scale.category10()
};

var data = tributary.chart_data;
//console.log(data);


var svg = d3.select('svg');
var gRoot = svg.append('svg:g')
				.attr('transform', 'translate(360, 363)');

var getUniqueId = (function () {
  var idCounter = 0;
  return function() {
    return idCounter++;
  };
})();

drawStar(data, config.centerx, config.centery, config.rootR*config.childRFactor, config.armLen, 1);
drawRootNode();


function drawRootNode() {
  // center node
  gRoot.append('svg:circle')
  .attr({
    cx: config.centerx,
    cy: config.centery,
    r: config.rootR
  });
}

function drawStar(data, cx, cy, r, armLen, level) {
  
  if (!data.children) {
    return;
  }
  
  var thetaScale = d3.scale.linear()
          .domain([0, data.children.length])
		  .range([0, 2*Math.PI]);
  
  var childCenters = [];
  
  data.children.forEach(function (o, i) {
    //var armLen = config.armLen + Math.round(Math.random()*config.armLenVar);
    var armLenToUse = armLen;
    if (o.children) {
      armLenToUse *= 1.4;
    }
    var theta = thetaScale(i) * (0.8 + Math.random()*0.5);
    childCenters.push({
      cx: cx + Math.round(armLenToUse * Math.cos(theta)),
      cy: cy + Math.round(armLenToUse * Math.sin(theta))
    });
  });
  
  var klass = 'lolipop-' + getUniqueId(); 
  var gLolipop = gRoot.selectAll('.' + klass)
    .data(data.children)
    .enter()
	.append('svg:g')
	.classed(klass, true)

  gLolipop.append('svg:line')
  .attr({
    x1: cx,
    y1: cy,
    x2: cx,
    y2: cy
  })
  .style({
    stroke: config.color(level)
  })
  .transition()
  .duration(config.transDuration)
  .delay(config.transDuration * (level - 1))
  .attr({
    x2: function (d, i) { return childCenters[i].cx; },
    y2: function (d, i) { return childCenters[i].cy; }
  })

  gLolipop.append('svg:circle')
  .attr({
    cx: cx,
    cy: cy,
    r: 0
  })
  .transition()
  .duration(config.transDuration)
  .delay(config.transDuration * (level - 1))
  .attr({
    cx: function (d, i) { return childCenters[i].cx; },
    cy: function (d, i) { return childCenters[i].cy; },
    r: r
  })
  .style({
    fill: config.color(level)
  });
  
  // draw star for child nodes recursively
  data.children.forEach(function (o, i) {
    console.log('will draw child star', o.children);
    drawStar(o, childCenters[i].cx, childCenters[i].cy, r*config.childRFactor, armLen*config.childRFactor, level+1);
  });
}

main.css

svg {
  
}

circle {
  stroke: #fff;
  stroke-width: 2px
}