dragonfly

_.md

[ 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

config.json

{"description":"dragonfly","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/d5Upb53.gif"}

inlet.js

/* 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 = 0.5;

// Tree configuration
var branches = [];
var seed = {i: 0, x: 420, y: 440, 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 = "#554242";
var fill = "#21B96A";
var fillOpacity = 1.5;
var strokeWidth = 1;
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();

style.css

path, line {
	stroke: #777;
}