d3 stickers

_.md

[ Launch: data stickers ] 5754789 by enjalot
[ Launch: data stickers ] 5754776 by enjalot

config.json

{"description":"d3 stickers","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"icon.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},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"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/EjokR76.png"}

icon.svg

inlet.js

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

var sticker = d3.sticker("#d3")
console.log(sticker)

var data = d3.range(89);

var color1 = d3.scale.category20();
var color2 = d3.scale.category20b();

var stickers = svg.selectAll("g.datum")
.data(data)
.enter()
.append("g").classed("datum", true)
.select(sticker.node)
.attr("transform", function(d,i) {
  var x = 0 + 89 * (i % 9);
  var y = 0 + 86 * Math.floor(i/9);
  return "translate(" + [x,y] + ")"
})
stickers.select(".background")
.style("fill", function(d,i) {
  return color1(d)
})
stickers.select(".foreground")
.style("fill", function(d,i) {
  return color2(d)
})

sticker.js

(function() {
  d3.sticker = function(selector) {
    var string;
    var sticker = function(selector) {
      //Serialize the selected element into a string
      var el = d3.select(selector).node();
      string = new XMLSerializer().serializeToString(el);
      //check if our element is SVG
      if(el && d3_isSVG(el)) {
        sticker.isSVG = true;
        //this could be undefined if the el is an svg element:
        sticker.svgElement = el.ownerSVGElement; 
      }
      return sticker;
    }
    //use this with .select on a selection to append and select at the same time
    sticker.node = function() {
      var fragment;
      if(sticker.isSVG && sticker.svgElement) {
        fragment = d3_makeSVGFragment(string, sticker.svgElement);
      } else {
        fragment = d3_makeFragment(string);
      }
      if(!this.appendChild) return fragment;
      return this.appendChild(fragment);
    }
    //append a copy of the sticker to the selection
    sticker.append = function(selection) {
      if(!string) return selection;
      return selection.select(function() {
        var fragment;
        if(sticker.isSVG && sticker.svgElement) {
          fragment = d3_makeSVGFragment(string, sticker.svgElement);
        } else {
          fragment = d3_makeFragment(string);
        }
        return this.appendChild(fragment);
      });
    }
    //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() {
        var fragment;
        if(sticker.isSVG && sticker.svgElement) {
          fragment = d3_makeSVGFragment(string, sticker.svgElement);
        } else {
          fragment = d3_makeFragment(string);
        }
        return this.parentNode.insertBefore(fragment, this);
      });
    }
    
    sticker.string = function(_) {
      if(!arguments.length) return string;
      string = _;
      return sticker;
    }
    sticker.toString = function() {
      return string;
    }
    if(selector) {
      return sticker(selector);
    }
    return sticker;
  }
  

  function d3_isSVG(el) {
    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;
  }
}());

style.css

#display {
  background: black;
}