d3 Brownian Bridge

HTML

<script src="http://d3js.org/d3.v2.js"></script>

CSS

.circle {
    border-radius:"5px";
}

JavaScript

var width = 300;
var height = 300;

var x = d3.scale.linear()
    .domain([0, 10])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0, 10])
    .range([height, 0]);

var t = 0
var points = [];
xs = [1,2,3];
ys = [1,2,3];
nPoints = 3;
for (var i = 0; i < nPoints + 1; i++) points[i] = {
    x: xs[i],
    y: ys[i]
}

//Create SVG element
var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

svg.selectAll("circle")
    .data(points)
    .enter()
    .append("circle")
    .attr("cx", function (d) {
    return x(d.x);
})
    .attr("cy", function (d) {
    return y(d.y);
})
    .attr("r", 3);


svg.selectAll("circle")
    .transition().ease("linear").duration(4000)
    .attrTween("cy", function (d) {
    return brownianBridgeInterp(y(d.y), y(d.y), 100)
    // Here's how we could do this by referring the element's current attribute:    
//    return brownianBridgeInterp(d3.select(this).attr("cy"), y(0.5+0.5*Math.sin(2*Math.PI*d.y)), 100)
    })
    .attrTween("cx", function (d) {
    return (brownianBridgeInterp(x(d.x), x(d.x), 100))
})

var texts = svg.selectAll("text")
                .data(["a","b","c","d","e","f","g"])
                .enter();

texts.append("text")
     .text(function(d){
                    return d;
                })
    .attr("x", function(d,i){return x(i+1)})
    .attr("y", function(d,i){return x(i+1)})
    .transition().ease("linear").duration(4000)
    .attrTween("y", function (d,i) {
    return brownianBridgeInterp(y(2), y(1), 100)
    // Here's how we could do this by referring the element's current attribute:    
//    return brownianBridgeInterp(d3.select(this).attr("cy"), y(0.5+0.5*Math.sin(2*Math.PI*d.y)), 100)
    })
    .attrTween("x", function (d,i) {
    return (brownianBridgeInterp(x(2), x(i+1), 100))
})



///////////////////
brownianBridgeInterp = function (a, b, variance) {
    a = Number(a);
    b = Number(b);
    var W = Brownian(100, variance);
    return...