Fading paths in d3.js - d3.js

Question

Is there a way to create fading paths in d3.js, similar to the wind lines in the famous earth wind visualization:
http://earth.nullschool.net/
In principle, it seems like I could create a path with a lot of waypoints and transition each of the end segments toward transparency, but that seems hacky. Any better ideas?

Answer 1

To follow up on the example offered, here is a block on a reduced version. It is based on canvass as mentioned. The block illustrates the technique that I mentioned in my comments where the rendering engine is aggressively challenged which gives the blur effect for free. Click on the normal button to change to synchronous redraws and you can see that the blurring effect dissapears. This is achieved in the following code...
function run() {
paused = false;
then = Date.now();
now = then;
particles.forEach(function(p) {
p.t = now + (Math.random() - 1) * duration;
});
d3.timer(function(elapsed) {
var i = -1, n = particles.length;
var f = format(" >8.1f"), f3 = format(" >8.4f");
var normal = modeButton.text() == "normal", t;
if(normal) {
// clear the shadow context and copy the current context to it
offscreenContext.clearRect(0, 0, width, height);
offscreenContext.drawImage(canvas, 0, 0, width, height)
//clear the current context and try to jam the previous version
//back on top of the drawing activities
//lovely chaos ensues
context.clearRect(0, 0, width, height);
context.drawImage(offscreenCanvas, 0, 0, width, height);
}
else {
//allow the
context.clearRect(0, 0, width, height);
context.drawImage(offscreenCanvas, 0, 0, width, height);
offscreenContext.clearRect(0, 0, width, height);
}
now = elapsed + then;
//iterate the transition for each county
while(++i < n) {
var p = particles[i], t = (now - p.t) / duration;
if(t > 1) {
p.t += duration * Math.floor(t);
p.y = p.d.centroid[1] + (true ? (Math.random() - .5) * 2 : 0);
}
else if(t > 0) {
if(!normal){
offscreenContext.fillStyle = "rgba(" + p.r + "," + p.g + "," + p.b + "," + mirror(1 - t) + ")";
offscreenContext.fillRect(p.x + (t - .5) * p.v * 2 - .75, p.y - .75, 2.5, 2.5);
} else {
context.fillStyle = "rgba(" + p.r + "," + p.g + "," + p.b + "," + mirror(1 - t) + ")";
context.fillRect(p.x + (t - .5) * p.v * 2 - .75, p.y - .75, 1.5, 1.5);
}
}
}
return paused;
}, 0, now);
}
});

Answer 2

Here's a similar effect implemented in d3.js, though the code is compressed. You might find a way to reverse engineer it or find an uncompressed source.
It seems to me like each arcs is drawn only once it's the color that has a transition applied with a gradient that changes over time, and then is removed. I can't quite tell if all arcs share the same gradient and just start from different places, and appear at different times. That might be a great shortcut.
http://www.nytimes.com/interactive/2012/11/11/sunday-review/counties-moving.html
There's a presentation how this came to be, so perhaps they've talked about the tech elsewhere?
http://www.slideshare.net/openjournalism/amanda-cox-visualizing-data-at-the-new-york-times
(Quick note, I realize this isn't actually an answer, just needed more space than the comments section allows)