[ Launch: d3 tree VIBE ] 6480166 by enjalot
[ Launch: d3 tree by @prcweb ] 6472877 by enjalot
-
-
Save enjalot/6480166 to your computer and use it in GitHub Desktop.
d3 tree VIBE
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":"d3 tree VIBE","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":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"inline-console":false,"thumbnail":"http://i.imgur.com/rShCk6P.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 */ | |
var svg = d3.select('svg'); | |
svg.append("rect").attr({width: tributary.sw, height:tributary.sh}) | |
.style("fill", "#181A3D"); | |
// Tree configuration | |
var branches = []; | |
var seed = {i: 0, x: 420, y: 600, a: 0, l: 130, d:0}; // a = angle, l = length, d = depth | |
var da = 0.5; // Angle delta | |
var dl = 0.8; // Length delta (factor) | |
var ar = tributary.anim(-0.15, 0.25, {ease: d3.ease("back")}); // angle | |
var maxDepth = 8; //lower this for faster rendering | |
tributary.loop_type = "pingpong"; | |
tributary.duration = 2000; | |
var stroke = "#C4CCC7"; | |
// Tree creation functions | |
function branch(b) { | |
var end = endPt(b), daR, newB; | |
branches.push(b); | |
if (b.d === maxDepth) | |
return; | |
// Left branch | |
daR = ar; | |
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; | |
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); | |
initialise ? create() : update(); | |
} | |
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() { | |
svg | |
.selectAll('line') | |
.data(branches) | |
.enter() | |
.append('line') | |
.attr('x1', x1) | |
.attr('y1', y1) | |
.attr('x2', x2) | |
.attr('y2', y2) | |
.style("stroke", stroke) | |
.style('stroke-width', function(d) {return parseInt(maxDepth + 1 - d.d) + 'px';}) | |
.attr('id', function(d) {return 'id-'+d.i;}) | |
//.on('mouseover', highlightParents) | |
//.on('mouseout', highlightParents); | |
} | |
function update() { | |
d3.select('svg') | |
.selectAll('line') | |
.data(branches) | |
.transition() | |
.attr('x1', x1) | |
.attr('y1', y1) | |
.attr('x2', x2) | |
.attr('y2', y2) | |
.style("stroke", stroke) | |
} | |
d3.selectAll('.regenerate') | |
.on('click', regenerate); | |
regenerate(true); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment