CODEWITHSUNDEEP
d3.js
juniper-
juniper-

Reputation: 6572

Fading paths in d3.js

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?

Upvotes: 1

Views: 1221

Answers (2)

Cool Blue
Cool Blue

Reputation: 6476

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);
            }
          });

Upvotes: 4

prototype
prototype

Reputation: 7990

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)

Upvotes: 1

Related Questions