papa day books

_.md

[ Launch: papa day books ] 5790165 by enjalot

books.svg

config.json

{"description":"papa day books","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"books.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12},"sticker.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},"ladder.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":true,"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/ptw9oZR.png"}

inlet.js

/*
books1: 
  http://thenounproject.com/noun/book/#icon-No7930
  Derrick Snider, from The Noun Project
*/
var svg = d3.select("svg");
var bg = svg.append("rect")
.attr({
  width: "100%",
  height: "100%",
  fill: "#000"
})

tributary.loop_type = "pingpong";
tributary.duration = 2000;


var books = d3.sticker("#book1");
var colors = d3.scale.ordinal()
.range([
  "#810909",
  "#661F1F",
  "#0C6813",
  "#1A118A",
  "#C58A0D",
  "#F82424",
  "#09919C",
  "#6B0B6B",
  "#04924E"
])

var shelfData = d3.range(5).map(function(d) {
  return Math.random() * 4 + 5;
})

var shelves = svg.selectAll("g.shelf")
.data(shelfData)
.enter()
.append("g").classed("shelf", true)
.attr("transform", function(d,i) {
  return "translate(" + [10, i * 114] + ")"
})

var gbooks = shelves.selectAll("g.book")
.data(function(d) { return d3.range(d) })
.enter()
.append("g").classed("book", true)
.attr("transform", function(d,i) {
  var x = Math.random() * 42 + i * 124;
  return "translate(" + [x, 0] + ")"
})
books(gbooks)
.selectAll("g").style("fill", function(d,i) {
  return colors(Math.random()*100)
})
.on("mouseover", function() {
  d3.select(this)
  .style("stroke", "#fff")
  .style("stroke-width", 4)
})

var ladder = d3.select("#ladder")
.attr("width", tributary.sw)
.attr("height", tributary.sh)
.each(function() { this.parentNode.appendChild(this) })
.select("g")
.attr("fill", "#968141")



tributary.run = function(g,t) {
  ladder.attr("transform", "translate(" + [-75 + t * 300, - 62 + t * 300] +")")
}

ladder.svg

sticker.js

(function() {
  d3.sticker = function(selector) {
    var string;
    var node;
    var svgElement; //for deserializing svg elements
    
    var sticker = function(selection) {
      return sticker.append(selection);
    }
    
    sticker.copy = function(selector) {
      node = d3.select(selector).node();
      if(!node) return sticker;
      //we keep track of svg element 
      if(d3_isSVG(node)) {
        sticker.isSVG = true;
        svgElement = node.ownerSVGElement;
      }
      node = node.cloneNode(true);
      node.removeAttribute("id");
      return sticker;
    }

    sticker.paste = function() {
      if(!node) return;
      return node.cloneNode(true);
    }
    
    sticker.node = function(_) {
      if(!arguments.length) return node;
      node = _;
      if(d3_isSVG(node)) {
        sticker.isSVG = true;
        svgElement = node.ownerSVGElement;
      }
      return sticker;
    }
    
    //append a copy of the sticker to the selection
    sticker.append = function(selection) {
      return selection.select(function() {
        return this.appendChild(sticker.paste());
      });
    }
    
    //insert a copy of the sticker into a selection similar to the d3 insert API 
    sticker.insert = function(selection, before) {
      if(!string) return selection;
      return selection.select(before).select(function() {
        return this.parentNode.insertBefore(sticker.paste(), this);
      });
    }
    
    sticker.string = function(_) {
      if(!arguments.length) return string;
      string = _;
      return sticker;
    }
    
    sticker.serialize = function() {
      //Serialize the selected element into a string
      string = new XMLSerializer().serializeToString(node);
    }
    sticker.deserialize = function () {
      //check if our element is SVG
      if(sticker.isSVG) {
        node = d3_makeSVGFragment(string, svgElement);
      } else {
        node = d3_makeFragment(string);
      }
      return node;
    }
    
    sticker.toString = function() {
      sticker.serialize();
      return string;
    }

    if(selector) {
      return sticker.copy(selector);
    }
    return sticker;
  }

  function d3_isSVG(el) {
    if(!el) return false
    return !!el.ownerSVGElement;// || el.tagName === "svg";
  }
  function d3_makeFragment(fragment) {
    var range = document.createRange()
    return range.createContextualFragment(fragment);
  }
  function d3_makeSVGFragment(fragment, svgElement) {
    //we need to wrap our element in a temporarary intermediate svg element
    //so that the browser knows to instanciate the Node properly.
    //for some reason having the range select an svg element isn't enough.
    // TODO: Allow optional namespace declarations
    var pre = '<svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink>';
    var post = '</svg>';
    var range = document.createRange();
    range.selectNode(svgElement);
    var contextFragment = range.createContextualFragment(pre + fragment + post)
    var intermediateSvg = contextFragment.childNodes[0]
    var node = intermediateSvg.childNodes[0]
    return node;
  }
}());