Skip to content

Instantly share code, notes, and snippets.

@enjalot
Created June 16, 2013 00:22
Show Gist options
  • Save enjalot/5790165 to your computer and use it in GitHub Desktop.
Save enjalot/5790165 to your computer and use it in GitHub Desktop.
papa day books
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.
{"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"}
/*
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] +")")
}
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;
}
}());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment