Skip to content

Instantly share code, notes, and snippets.

@enjalot
Created December 16, 2013 21:10
Show Gist options
  • Save enjalot/7994492 to your computer and use it in GitHub Desktop.
Save enjalot/7994492 to your computer and use it in GitHub Desktop.
lever logo
{"description":"lever logo","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"lever.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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}},"fullscreen":false,"play":true,"loop":true,"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/t8oO6Hh.gif"}
//data driven stickers
var svg = d3.select("svg");
var colorSets = [
['#59676c', '#7C8F95'],
['#6c5c7e', '#9580AF'],
['#7e5756', '#AE7977'],
['#7e7156', '#AF9D77'],
['#6a7e5c', '#93AE80'],
['#6a6a6a', '#939393'],
['#7e7e7f', '#AFAFB0'],
['#91828d', '#C9B4C3'],
['#92847b', '#CAB7AA'],
['#91917b', '#C9C8AA'],
['#829188', '#B4C9BC'],
['#735c6c', '#9F8096'],
['#a29692', '#E0CFCA'],
['#a66e8c', '#E599C2'],
['#b3745a', '#F8A17D'],
['#8a8759', '#BFBB7B'],
['#755a49', '#A27D66'],
['#91534d', '#C8736B'],
['#4d8090', '#6BB1C7'],
['#49755f', '#66A283'],
['#4a4f75', '#676EA2'],
['#78819e', '#A6B2DB'],
['#641c5f', '#8B2783'],
['#283774', '#384CA0'],
['#458a5e', '#60BF82'],
['#a7481a', '#E76425'],
['#515151', '#707070'],
['#a31052', '#E11772'],
['#0c4e67', '#116C8F'],
['#312269', '#442F91'],
['#491b51', '#652671']
]
var ncolors = colorSets.length;
//this creates a sticker from an existing DOM element
sticker = d3.sticker(".lever");
//console.log("sticker:", sticker)
var n = 16;
var data = d3.range(n).map(function(d,i) {
return 6 + 3.12;// * Math.sin(tributary.anim(0, Math.PI));
//Math.sin(i/n * Math.PI * 4)
})
var selection = svg.selectAll("g.sticker")
.data(data)
.enter()
.append("g")
.attr("transform", function(d,i) {
var x = 52 + (i % 4) * 205;
var y = 49 + Math.floor(i / 4) * 202;
return "translate(" + [x,y] + ")";
})
var stickers = sticker(selection)
.attr("transform", function(d,i) {
return "scale(" + d + ")"
})
stickers.select(".fulcrum")
.attr("fill", function(d,i) { return colorSets[i % ncolors][1] })
stickers.select(".plane_top")
.attr("fill", function(d,i) { return colorSets[i % ncolors][1] })
stickers.select(".plane_shaddow")
.attr("fill", function(d,i) { return colorSets[i % ncolors][0] })
stickers.select(".plane")
.attr("transform", function(d,i) {//11, 13
return "rotate(" + [tributary.anim(0, 90), 12, 12] + ")"
})
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
(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;
}
}());
.lever_text {
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment