[ Launch: hi ] 6473151 by enjalot
[ Launch: d3 tree by @prcweb ] 6473054 by enjalot
[ Launch: d3 tree by @prcweb ] 6473013 by enjalot
[ Launch: d3 tree by @prcweb ] 6472961 by enjalot
[ Launch: d3 tree by @prcweb ] 6472890 by enjalot
[ Launch: d3 tree by @prcweb ] 6472877 by enjalot
-
-
Save enjalot/6473151 to your computer and use it in GitHub Desktop.
hi
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"description":"hi","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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,"inline-console":false,"thumbnail":"http://i.imgur.com/Z5z9aXQ.gif"} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* D3 Tree http://prcweb.co.uk/lab/d3-tree/ */ | |
/* Copyright 2013 Peter Cook (@prcweb); Licensed MIT */ | |
//reproduce this http://i.imgur.com/ZdIqfcH.gif | |
//by modifying the angle between 0 and 3.14 | |
var da = tributary.anim(1.5, -2.9); | |
// Tree configuration | |
var branches = []; | |
var seed = {i: 0, x: 420, y: 540, a: 0, l: 94, d:0}; // a = angle, l = length, d = depth | |
var dl = tributary.anim(-0.07, -1.23); // Length delta (factor) | |
var ar = 0.02; // Randomness | |
var maxDepth = 6; | |
var stroke = "#F3F3F3"; | |
var fill = "#373781"; | |
var fillOpacity = 1.5; | |
var strokeWidth = tributary.anim(0.5, 3); | |
tributary.loop_type = "pingpong"; | |
// Tree creation functions | |
function branch(b) { | |
var end = endPt(b), daR, newB; | |
branches.push(b); | |
if (b.d === maxDepth) | |
return; | |
// Left branch | |
daR = ar * Math.random() - ar * 0.5; | |
newB = { | |
i: branches.length, | |
x: end.x, | |
y: end.y, | |
a: b.a - da + daR, | |
l: b.l * dl, | |
d: b.d + 1, | |
parent: b.i | |
}; | |
branch(newB); | |
// Right branch | |
daR = ar * Math.random() - ar * 0.5; | |
newB = { | |
i: branches.length, | |
x: end.x, | |
y: end.y, | |
a: b.a + da + daR, | |
l: b.l * dl, | |
d: b.d + 1, | |
parent: b.i | |
}; | |
branch(newB); | |
} | |
function regenerate(initialise) { | |
branches = []; | |
branch(seed); | |
create() | |
} | |
function endPt(b) { | |
// Return endpoint of branch | |
var x = b.x + b.l * Math.sin( b.a ); | |
var y = b.y - b.l * Math.cos( b.a ); | |
return {x: x, y: y}; | |
} | |
// D3 functions | |
function x1(d) {return d.x;} | |
function y1(d) {return d.y;} | |
function x2(d) {return endPt(d).x;} | |
function y2(d) {return endPt(d).y;} | |
function highlightParents(d) { | |
var colour = d3.event.type === 'mouseover' ? 'green' : '#777'; | |
var depth = d.d; | |
for(var i = 0; i <= depth; i++) { | |
d3.select('#id-'+parseInt(d.i)).style('stroke', colour); | |
d = branches[d.parent]; | |
} | |
} | |
function create() { | |
var svg = d3.select('svg'); | |
svg | |
.selectAll('line') | |
.data(branches) | |
.enter() | |
.append('line') | |
.attr('x1', x1) | |
.attr('y1', y1) | |
.attr('x2', x2) | |
.attr('y2', y2) | |
.style('stroke-width', function(d) {return parseInt(maxDepth + 1 - d.d) + 'px';}) | |
.style("stroke", stroke) | |
.attr('id', function(d) {return 'id-'+d.i;}) | |
.on('mouseover', highlightParents) | |
.on('mouseout', highlightParents); | |
var vertices = branches.map(function(b) { | |
return [endPt(b).x, endPt(b).y]; | |
}); | |
svg.selectAll("path.voronoi") | |
.data(d3.geom.voronoi(vertices)) | |
.enter() | |
.append("path").classed("voronoi", true) | |
.attr("d", function(d) { return "M" + d.join("L") + "Z"; }) | |
.style({ | |
"fill": fill, | |
"fill-opacity": fillOpacity, | |
"stroke": stroke, | |
"stroke-width": strokeWidth | |
}) | |
} | |
regenerate(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
path, line { | |
stroke: #777; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment