d2fn/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Dendrite growth using d3 quadchart nearest neighbor search. A point is chosen at random and joined to its nearest neighbor. Each node keeps track of the node to which it was adjoined via a parent reference. As each node is attached the child count of each parent in the chain is incremented. The child count is used directly to determine rendering width of lines between nodes.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
    background: rgb(0, 0, 0);
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500,
    maxRadius = 2;


var makePoint = pointBuilder(maxRadius, width, height);

var svg = d3.select("body")
    .append("svg")
    .attr({width: width, height: height});

var data = [
    {
        x: width/2,
        y: height/2,
        r: 3,
        children: 0
    }
];

var n = 9000;
var sample = findClosest(data, width, height, n);

var circles = svg.append("g");
var lines = svg.append("g");

var strokeWeightScale = d3.scale.sqrt()
    .domain([0, n])
    .range([0, 3]);

d3.timer(function() {
    for(var i = 0; i < 10; i++) {
        var randomPoint = makePoint();
        var p = sample(randomPoint);
        if(!p) return true;
        data.push(p);
    }
    var s = lines.selectAll("line").data(data);
    s.exit().remove();
    s.enter()
        .append("line")
        .data(data)
        .enter()
        .append("line")
        .attr("stroke", "rgba(255, 255, 255, 1)")
        .attr({
            x1: function(d, i) {
                if(d.parent) {
                    return d.parent.x;
                }
                else {
                    return d.x;
                }
            },
            y1: function(d, i) {
                if(d.parent) {
                    return d.parent.y;
                }
                else {
                    return d.y;
                }
            },
            x2: function(d, i) {
                return d.x;
            },
            y2: function(d, i) {
                return d.y;
            }
        })
        .attr("stroke-width", function(d, i) {
            return strokeWeightScale(d.children) + "px";
        });
});

function incrementChildCounts(node) {
    node.children++;
    if(node.parent) {
        incrementChildCounts(node.parent);
    }
    else {
        return;
    }
}

function findClosest(seedPoints, width, height, maxSamples) {

    var samples = 0;
    var quadtree = d3.geom.quadtree()
        .x(function(d, i) { return d.x; })
        .y(function(d, i) { return d.y; })
        .extent([[-1, -1], [width+1, height+1]])(seedPoints);
    var points = seedPoints;

    return function(input) {
        if(++samples > maxSamples) return;
        var nearest, minDistance = Math.sqrt(width*width + height*height);
        quadtree.visit(function(node, x1, y1, x2, y2) {
            var p = node.point;
            if(p) {
                var d = dist(p.x, p.y, input.x, input.y);
                if(d < minDistance) {
                    nearest = p;
                    minDistance = d;
                }
                else {
                    return true;
                }
            }
        });
        incrementChildCounts(nearest);
        var dx = input.x - nearest.x;
        var dy = input.y - nearest.y;
        var t = Math.atan2(dy, dx);
        var next = {
            x: nearest.x + (input.r + nearest.r) * Math.cos(t),
            y: nearest.y + (input.r + nearest.r) * Math.sin(t),
            r: input.r,
            children: 0,
            parent: nearest
        }
        quadtree.add(next);
        return next;
  };
}

function pointBuilder(maxRadius, width, height) {
    return function() {
        return {
            x: Math.random() * width,
            y: Math.random() * height,
            r: 1 + Math.random() * (maxRadius-1)
        }
    };
}

// calculate euclidean distance of two points with coordinates: a(ax, ay) and b(bx, by)
function dist(ax, ay, bx, by){
    return Math.sqrt(Math.pow(ax-bx, 2) + Math.pow(ay-by, 2));
}
</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	background: rgb(0, 0, 0);
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var width = 960,
	height = 500,
	maxRadius = 2;


	var makePoint = pointBuilder(maxRadius, width, height);

	var svg = d3.select("body")
	.append("svg")
	.attr({width: width, height: height});

	var data = [
	{
	x: width/2,
	y: height/2,
	r: 3,
	children: 0
	}
	];

	var n = 9000;
	var sample = findClosest(data, width, height, n);

	var circles = svg.append("g");
	var lines = svg.append("g");

	var strokeWeightScale = d3.scale.sqrt()
	.domain([0, n])
	.range([0, 3]);

	d3.timer(function() {
	for(var i = 0; i < 10; i++) {
	var randomPoint = makePoint();
	var p = sample(randomPoint);
	if(!p) return true;
	data.push(p);
	}
	var s = lines.selectAll("line").data(data);
	s.exit().remove();
	s.enter()
	.append("line")
	.data(data)
	.enter()
	.append("line")
	.attr("stroke", "rgba(255, 255, 255, 1)")
	.attr({
	x1: function(d, i) {
	if(d.parent) {
	return d.parent.x;
	}
	else {
	return d.x;
	}
	},
	y1: function(d, i) {
	if(d.parent) {
	return d.parent.y;
	}
	else {
	return d.y;
	}
	},
	x2: function(d, i) {
	return d.x;
	},
	y2: function(d, i) {
	return d.y;
	}
	})
	.attr("stroke-width", function(d, i) {
	return strokeWeightScale(d.children) + "px";
	});
	});

	function incrementChildCounts(node) {
	node.children++;
	if(node.parent) {
	incrementChildCounts(node.parent);
	}
	else {
	return;
	}
	}

	function findClosest(seedPoints, width, height, maxSamples) {

	var samples = 0;
	var quadtree = d3.geom.quadtree()
	.x(function(d, i) { return d.x; })
	.y(function(d, i) { return d.y; })
	.extent([[-1, -1], [width+1, height+1]])(seedPoints);
	var points = seedPoints;

	return function(input) {
	if(++samples > maxSamples) return;
	var nearest, minDistance = Math.sqrt(widthwidth + heightheight);
	quadtree.visit(function(node, x1, y1, x2, y2) {
	var p = node.point;
	if(p) {
	var d = dist(p.x, p.y, input.x, input.y);
	if(d < minDistance) {
	nearest = p;
	minDistance = d;
	}
	else {
	return true;
	}
	}
	});
	incrementChildCounts(nearest);
	var dx = input.x - nearest.x;
	var dy = input.y - nearest.y;
	var t = Math.atan2(dy, dx);
	var next = {
	x: nearest.x + (input.r + nearest.r) * Math.cos(t),
	y: nearest.y + (input.r + nearest.r) * Math.sin(t),
	r: input.r,
	children: 0,
	parent: nearest
	}
	quadtree.add(next);
	return next;
	};
	}

	function pointBuilder(maxRadius, width, height) {
	return function() {
	return {
	x: Math.random() * width,
	y: Math.random() * height,
	r: 1 + Math.random() * (maxRadius-1)
	}
	};
	}

	// calculate euclidean distance of two points with coordinates: a(ax, ay) and b(bx, by)
	function dist(ax, ay, bx, by){
	return Math.sqrt(Math.pow(ax-bx, 2) + Math.pow(ay-by, 2));
	}
	</script>