prototype - thanks

_.md

[ Launch: prototype - thanks ] 5475145 by enjalot

config.json

{"description":"prototype - thanks","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"thanks.json":{"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},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"twitter.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12},"tributary.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":true,"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,"thumbnail":"http://i.imgur.com/xTSSrpA.png"}

inlet.js

// http://ejfox.github.io/happybirthdaytributary/
// https://groups.google.com/forum/?fromgroups=#!forum/tributary

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

var m = {top: 34, right:20, bottom: 50, left: 160}; //margin
var width = tributary.sw - m.right - m.left;
var height = tributary.sh - m.bottom - m.top;
var nx = 3;

var duration = 1500;
var ease = "back";
var lspace = 19;

var color = d3.scale.category20();

//make the grid of ending locations
var xspace = width / nx;
var yspace = height / (thanks.length / nx)
function xpos(d,i) {
  return m.left + xspace * (i % nx)
}
function ypos(d,i) {
  var j = Math.floor(i/nx)
  return m.top + yspace * j + (i % 3) * 33
}

var positions = thanks.map(function(d,i) {
  var letters = d.name.split('');
  var x0 = xpos(d,i) - letters.length * lspace/2;
  var y0 = ypos(d,i);
  lpos = letters.map(function(l,j) {
    var sx = 43 + m.left + Math.random() * width - letters.length * lspace/2;
    var rx = x0 + Math.floor(Math.random() * letters.length) * lspace
    var sy = m.top + Math.random() * height;
    var ex = x0 + j * lspace;
    return {l:l, sx: sx, sy: sy, ex: ex, ey: y0, rx: rx}
  });
  return {name:d.name, letters: lpos};
})

var vertices = thanks.map(function(d,i) {
  return [xpos(d,i), ypos(d,i)]
});
var voronoi = d3.geom.voronoi(vertices)

var pathFn = function(d) { 
  return "M" + d.join("L") + "Z"; 
}
svg.selectAll("path.voronoi")
.data(voronoi)
.enter()
.append("path")
.classed("voronoi", true)
.attr("d", pathFn)
.classed("voronoi", true)
  .on("click", function(v,i) {
    var d = thanks[i];
    //put the letters in place
    svg.selectAll("text.name")
      .filter(function(n) { return n.name === d.name })
      .selectAll("tspan.letter")
      .transition()
      .duration(duration)
      .ease(ease)
      .attr({
        x: function(d) { return d.ex },
        y: function(d) { return d.ey }
      })
    //reveal the links
    svg.selectAll(".twitter")
    .filter(function(n) { return n.name === d.name })
    .style("display", "")
    .transition()
    .duration(duration)
    .ease(ease)
    .style("opacity", 1)
    svg.selectAll(".github")
    .filter(function(n) { return n.name === d.name })
    .style("display", "")
    .transition()
    .duration(duration)
    .ease(ease)
    .style("opacity", 1)
    
  })

//links
var twitterUrl = "http://twitter.com/";
var tribUrl = "http://tributary.io/inlet/5088240?user=";

var locs = svg.selectAll("g.location")
  .data(thanks)
var newlocs = locs.enter()
  .append("g")
  .classed("location", true)
  .attr("transform", function(d,i) {
    return "translate(" + [xpos(d,i), ypos(d,i)] + ")";
  })

newlocs.filter(function(d) { return d.twitter })
  .append("a")
  .attr("xlink:href", function(d) { return twitterUrl + d.twitter })
  .attr("target", "_blank")
.append("use").attr("xlink:href", "#twitter")
//.append("text").text("twitter")
.attr("y", 35).attr("x", function(d,i) {
  if(d.github) return -50
  return -20
 })
.classed("twitter", true)
.style("display", "none").style("opacity", 0)
newlocs.filter(function(d) { return d.github })
  .append("a")
  .attr("xlink:href", function(d) { return tribUrl + d.github })
  .attr("target", "_blank")
//.append("text").text("github")
.append("use").attr("xlink:href", "#tributary")
.attr("transform", "scale(0.5)")
.classed("github", true)
.attr("y", 20).attr("x", 20)
.style("display", "none").style("opacity", 0)

//names
var names = svg.selectAll("text.name")
  .data(positions)
  .enter()
  .append("text")
  .classed("name", true)
  .attr("fill", function(d,i) { return color(i) })
  .selectAll("tspan.letter")
    .data(function(d) { return d.letters })
    .enter()
    .append("tspan")
    .classed("letter", true)
    .text(function(d) { return d.l })
    .attr({
      x: function(d) { return d.sx },
      y: function(d) { return d.sy }
    })


svg.append("rect")
.attr({
  y: tributary.sh - 30,
  width: tributary.sw/2,
  height: 30,
  fill: "#727272"
}).on("click", function() {
  svg.selectAll("text.name")
    .selectAll("tspan.letter")
    .transition()
    .duration(duration)
    .ease(ease)
    .attr({
      x: function(d) { return d.rx },
      y: function(d) { return d.ey }
    })
})
svg.append("rect")
.attr({
  x: tributary.sw/2,
  y: tributary.sh - 30,
  width: tributary.sw/2,
  height: 30,
  fill: "#5C5C5C"
})
.on("click", function() {
  svg.selectAll("text.name")
    .selectAll("tspan.letter")
    .transition()
    .duration(duration)
    .ease(ease)
    .attr({
      x: function(d) { return d.sx },
      y: function(d) { return d.sy }
    })
})

style.css

body {
  background: #242323;
}
text.name {
  font-family: "Courier New", monospace;
  font-size: 34px;
  pointer-events: none;
}

.voronoi {
  fill: #363636;
  stroke: #363636;
  -moz-transition:fill 0.5s;
  -webkit-transition:fill 0.5s;
  -o-transition:fill 0.5s;
  transition:fill 0.5s;
}
.voronoi:hover {
  
  fill: #494949;
}

thanks.json

[
  {"name":"Mike Bostock", "twitter":"mbostock"},
  {"name":"Jason Davies", "twitter":"jasondavies"},
  {"name":"Gabriel Florit", "twitter":"gabrielflorit"},
  {"name":"EJ Fox", "twitter":"mrejfox", "github":"ejfox"},
  {"name":"Dealga", "twitter":"zeffii", "github":"zeffii"},
  {"name":"Paul van Slembrouck", "twitter":"ptvan", "github":"ptvans"},
  {"name":"Michael Porath", "twitter":"poezn", "github":"poezn"},
  {"name":"Halftone", "twitter":"hlftn"},
  {"name":"Lever", "twitter":"lever"},
  {"name":"Sarah Nahm", "twitter":"srhnhm"},
  {"name":"Erik Hazzard", "twitter":"enoex", "github":"enoex"},
  {"name":"Kiera Westphal", "twitter":"kierebelle"},
  {"name":"Kristina", "twitter":"gelicia", "github":"gelicia"},
  {"name":"Chris Viau", "twitter":"d3visualization", "github":"biovisualize"},
  {"name":"Kai Chang", "twitter":"syntagmatic", "github":"syntagmatic"},
  {"name":"Tom MacWright", "twitter":"tmcw", "github":"tmcw"},
  {"name":"Drew Skau", "twitter":"dwskau", "github":"dwskau"},
  {"name":"Geo Miller", "twitter":"georules", "github":"georules"},
  {"name":"Jeff Steward", "github":"lgstarn"},
  {"name":"Santiago Ortiz", "twitter":"moebio"},
  {"name":"Erik Cunningham", "twitter":"trinary", "github":"trinary"},
  {"name":"Leander Herzog", "twitter":"lennyjpg", "github":"lennyjpg"},
  {"name":"Spiros", "twitter":"seliopou", "github":"seliopou"},
  {"name":"JP Marin Diaz", "twitter":"jpmarindiaz", "github":"jpmarindiaz"},
  {"name":"Bruce Hubbard", "twitter":"brucehubbard"},
  {"name":"github", "twitter":"github"}
]

tributary.svg

twitter.svg