sdfsdf

_.md

[ Launch: sdfsdf ] 8549746 by gelicia

config.json

{"description":"sdfsdf","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},"data.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data2.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.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,"thumbnail":"http://i.imgur.com/tV4C8l3.png","inline-console":false}

data.json

[{"firstName":"Bob","lastName":"George","location":"Yakima, Washington Area","network":"facebook","work":["Acme Industrial"],"school":["Something","Generic State University"]},{"firstName":"Diane","lastName":"Zeeby","location":"Generic, Minnesota","network":"facebook"},{"firstName":"Jim","lastName":"Bob","location":"Generic, Minnesota","network":"facebook","work":["WarCraft"],"school":["Somewhere HS","Generic State University"]},{"firstName":"Ken","lastName":"Ned","location":"Generic, Minnesota","network":"facebook","work":["Acme Industrial","Ninja"],"school":["Hollywood HS","Generic State University"]},{"firstName":"Sally","lastName":"Smithers","location":"Greater Minneapolis-St. Paul Area","distance":1,"network":"linkedin","work":["Teachery"]},{"firstName":"John","lastName":"Johnson","location":"Greater Minneapolis-St. Paul Area","distance":1,"network":"linkedin","work":["Something Inc."]},{"firstName":"Jane","lastName":"Smith","location":"Greater Minneapolis-St. Paul Area","distance":1,"network":"linkedin","work":["Teachery University"]},{"firstName":"My","lastName":"Name","location":"Greater Minneapolis-St. Paul Area","distance":0,"network":"linkedin","work":["Hippie"]},{"firstName":"Bro","lastName":"Brosson","location":"Fort Collins, Colorado Area","distance":1,"network":"linkedin","work":["TypeTypeType"]},{"firstName":"Sam","lastName":"Jonsson","location":"Greater Chicago Area","distance":1,"network":"linkedin","work":["Politics Something"]},{"firstName":"Lars","lastName":"Olsson","location":"Greater Minneapolis-St. Paul Area","distance":1,"network":"linkedin","work":["Maps Inc"]},{"firstName":"James","lastName":"Kirk","location":"Rochester, Minnesota Area","distance":1,"network":"linkedin","work":["Enterprise"]},{"firstName":"Samuel","lastName":"Jackson","location":"Greater Denver Area","distance":1,"network":"linkedin","work":["Super-ologies"]},{"firstName":"Jack","lastName":"Bauer","location":"Greater Minneapolis-St. Paul Area","distance":1,"network":"linkedin","work":["I dont watch TV"]},{"firstName":"Flynn","lastName":"Neils","location":"Greater Minneapolis-St. Paul Area","distance":1,"network":"linkedin","work":["Laws LOL"]},{"firstName":"Matt","lastName":"Jack","location":"La Crosse, Wisconsin Area","distance":1,"network":"linkedin","work":["Generic Name"]},{"firstName":"Lori","lastName":"Dames","location":"Greater Chicago Area","distance":1,"network":"linkedin","work":["Cat Lady"]},{"firstName":"Reis","lastName":"GeneralName","location":"Yakima, Washington Area","distance":2,"network":"linkedin","work":["Hospital"]}] 

inlet.js

var data = tributary.data
var svgSize = {width:494, height:269, margin: 89} 
var svg = d3.select('svg');
var colorScale = d3.scale.linear().range(['#8FD68C', '#DDBE6F']).domain([0,data.length])

var g = svg.append("g").attr(
  {width:svgSize.width+svgSize.margin, 
   height:svgSize.height+svgSize.margin,
   "transform": "translate(" + svgSize.margin + "," + svgSize.margin + ")"
  })

svg.append("rect").attr({
  x: 12,
  y: 22,
  height: 21,
  width: 67
})
.on("click", function(){ changeMethod('network');});

svg.append("rect").attr({
  x: 109,
  y: 22,
  height: 21,
  width: 67
})
.on("click", function(){ changeMethod('location');});
  
svg.append("rect").attr({
  x: 207,
  y: 22,
  height: 21,
  width: 67
})
.on("click", function(){ changeMethod('all');
                       });

var columns = Math.ceil(Math.sqrt(data.length))
var rows = Math.ceil(data.length / columns)
var circleRad = 10;
 
console.log(data); 
 
g.selectAll('circle.info').data(data).enter()
.append('circle')
.attr({
  cx: function(d,i){return circleRad + ((i % columns) * ((svgSize.width-svgSize.margin)/columns));},
  cy: function(d,i){return circleRad + (Math.floor(i/columns) * ((svgSize.height-svgSize.margin)/columns));},
  r: circleRad,
  "title": function(d,i){return d.firstName + " " + d.lastName;},
  fill: function(d,i){return colorScale(i);},
  'stroke':'#000'
})
.classed("info", true) 
 

function changeMethod(method){
   
  //todo: company, all
 var nest, columns, rows;
  
  if (method!=='all'){
  nest = d3.nest()
    .key(function(d) { return d[method]; })
  	.entries(data);
    
    nest.sort(function(a,b){
      if (a.key < b.key) {return -1;}
      else if (a.key > b.key) {return 1;}
      else { return 0;}
    });
    
    columns = Math.ceil(Math.sqrt(nest.length));
    rows = Math.ceil(nest.length/columns);
  }
  else {
   	nest = data; 
    columns = 1;
    rows = 1;
  }  
  
  console.log(nest);
  var margin = 2;
  console.log(columns + " " + rows)
  
  g.selectAll("rect.category").remove()
   
  g.selectAll("rect.category").data(d3.range(columns*rows)).enter().append('rect').attr({
     x: function(d,i){return ((i % columns) * ((svgSize.width)/columns));},
     y: function(d,i){return (Math.floor(i/columns) * ((svgSize.height)/columns));},
     height: svgSize.height/rows,
     width: svgSize.width/columns,
     "fill": "none",
     "stroke":"blue",
    "opacity":0.1,
     id: function(d,i){return "cat_id"+i;}
   }).classed("category",true)
  
  g.selectAll("text.categoryLbl").remove()
   
  g.selectAll("text.categoryLbl").data(nest).enter()
  .append('text')
  .attr({
    x: function(d,i){return ((i % columns) * ((svgSize.width)/columns));},
    y: function(d,i){return (Math.floor(i/columns) * ((svgSize.height)/columns));},
    id: function(d,i){return "gID_" + i;}
  })
  .classed("categoryLbl", true)
  .text(function(d){return d.key;});
  
  for (var i = 0; i < nest.length; i++) {
	console.log(nest[i]) 
     
    d3.selectAll('circle.info').filter(function(d, i2){
       return d[method] == nest[i].key;
    })
    .transition().duration(1000)
    .attr({
      cx: function(d,i2){return ((i2 % columns) * ((svgSize.width)/columns));},
      cy: function(d,i2){return (Math.floor(i2/columns) * ((svgSize.height)/columns));}
    });
  } 
          
}   
  


 

style.css

.categoryLbl {
 font-size: 13px;
 fill: #727272;
  alignment-baseline: text-before-edge;
}