just another inlet to tributary

_.md

[ Launch Inlet ]
Gist #3200444

config.json

{"endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.5845558249344366,"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}

inlet.js

var svg = d3.select("svg");

var addImage = false;
var opacity = 1;

if ( addImage ){
svg.append("image")
  .attr({
    width: 574,
    height: 615,
    "xlink:href": "https://dl.dropbox.com/u/497895/southup-diagram.png",
    x: 0,
    y: 0
  })
}

var items = {
  startups: { label:"Startups", b:4},
  academia: { label:"Academia", b:4},
  developers: { label: "Developers", b:4},
  partners: { label:"Partners", b:4},
  enterprise: { label:"Enterprise", b:4},
  investors: {label:"Investors", b:4},
  lab: {label: "Lab", b:7},
  incubator: {label:"Incubator", b:2},
  innovation: {label:"Innovation", b:2},
  ux: {label:"UX", b:2},
  engineering: {label:"Engineering", b:2},
  research: {label:"Research", b:2},
  lean: {label:"Lean Startup", b:2},
  p1: {label:"", b:4},
  p2: {label:"", b:4},
  p3: {label:"", b:4},
  p4: {label:"", b:4},
  p5: {label:"", b:4}
}
    
function getItem(id){
  if( typeof items[id] != "object" ) throw "not found: " + id;
  return items[id]
}
function getLabel(id){ try { return getItem(id).label } catch (e){ return ""}}


var data2 = [
  {x:494, y:305, r:70, id:"startups", f:30},
  {x:456, y:475, r:70, id:"academia", f:26},
  {x:279, y:536, r:70, id:"developers", f:22},
  {x:103, y:477, r:70, id:"partners", f:28},
  {x:133, y:111, r:98, id:"enterprise", f:28},
  {x:449, y:141, r:70, id:"investors", f:26},
  {x:263, y:312, r:109, id:"lab", f:35},
  {x:294, y:222, r:65, id:"incubator", f:20},
  {x:181, y:254, r:39, id:"innovation", f:14},
  {x:167, y:343, r:39, id:"ux", f:16},
  {x:234, y:403, r:39, id:"engineering", f:12},
  {x:323, y:393, r:39, id:"research", f:14},
  {x:367, y:313, r:39, id:"lean", f:12},
  {x:274, y:125, r:28, id:"p1", f:16},
  {x:339, y:166, r:20, id:"p2", f:16},
  {x:291, y:185, r:15, id:"p3", f:15},
  {x:351, y:206, r:11, id:"p4", f:11},
  {x:318, y:213, r:10, id:"p5", f:9},
];
  
  
function update( data ) {
  // groups update
  var groups = svg.selectAll("g")
    .data(data2)
  	.attr("transform", function(d,i) {
      return "translate(" + [ d.x , d.y ] + ")";
    });
  
  groups.enter().append("g")
    .attr("transform", function(d,i) {
      return "translate(" + [ d.x , d.y ] + ")";
    })
    .attr("class", "circle-group")
  
  var circles = groups.append("circle")
    .attr({
      r: function(d){return d.r},
      fill: "#FFFFFF",
      "fill-opacity": opacity,
      stroke: "#C4C4C4",
      "stroke-width": function(d){return getItem(d.id).b}
    }).style("cursor","hand")
    .on("mouseover", function(){
      d3.select(this).transition()
        .attr("fill","#FF0000")
      // TODO: highlight somehow on mouseover
      // console.log( 'update again' )
      // data2[3].x += 10
      // update( data2 )
    }).on("mouseout", function(){
      d3.select(this).transition().attr("fill","#FFFFFF")
      // TODO: highlight somehow on mouseover
      // console.log( 'update again' )
      // data2[3].x += 10
      // update( data2 )
    })
    
  var label = groups.append("text")
    .text( function(d){return getLabel(d.id) })
    .attr({
      "alignment-baseline": "middle",
      "text-anchor": "middle",
      "fill" : "#666666",
      "font-size" : function(d){ return d.f },
      "pointer-events": "none"
    })
}

update( data2 )