3 ms·

How would somebody do this w/ D3? Are there any similar bl.ocks that anybody knows about?

by erex78 12y ago

bengali3 12y ago
From d3js.org site I do get to this [1] (click the page number to to animate lines) not sure about the easing functionality however. [1] http://www.nytimes.com/interactive/2013/10/09/us/yellen-fed-chart.html http://www.nytimes.com/interactive/2013/10/09/us/yellen-fed-...
RBerenguel 12y ago
Since you can write more or less, arbitrary "tween" functions in D3 (I learnt more than I wanted to about these when I wrote the dynamic "semaphore pie" we used here [1] ) it's relatively viable to do it for paths created from within D3. For paths already present and wanting to be selected... I guess it would work pretty much the same, since d3 selectors are more or less good to go with embedded SVGs, IIRC. It's actually a very nice trick (and I love moving things around in graphs), and I'm intrigued by how I'd do it with D3. If I have any free time this weekend I'll look into it ;) [1] VanillaSEO: http://vanillaseo.com/report/20141030fdec7fda61eafac3b8dca58899defb9e http://vanillaseo.com/report/20141030fdec7fda61eafac3b8dca58... Ninja edit (or almost): Here's the relevant part of d3 docs about tweens: https://github.com/mbostock/d3/wiki/Transitions https://github.com/mbostock/d3/wiki/Transitions
mbostock 12y ago
You can transition the stroke-dasharray property and use element.getTotalLength to determine the total length of the path. Here’s a bl.ock: http://bl.ocks.org/mbostock/5649592 http://bl.ocks.org/mbostock/5649592 And here’s an older graphic that demonstrates the technique in use: http://www.nytimes.com/interactive/2013/02/20/movies/among-the-oscar-contenders-a-host-of-connections.html http://www.nytimes.com/interactive/2013/02/20/movies/among-t... We also used this technique to render the progress map in The Russia Left Behind: http://www.nytimes.com/newsgraphics/2013/10/13/russia/ http://www.nytimes.com/newsgraphics/2013/10/13/russia/

How would somebody do this w/ D3? Are there any similar bl.ocks that anybody knows about?

by erex78 12y ago

How would somebody do this w/ D3? Are there any similar bl.ocks that anybody knows about?

From d3js.org site I do get to this [1] (click the page number to to animate lines) not sure about the easing functionality however. [1] http://www.nytimes.com/interactive/2013/10/09/us/yellen-fed-chart.html http://www.nytimes.com/interactive/2013/10/09/us/yellen-fed-...

RBerenguel 12y ago

Since you can write more or less, arbitrary "tween" functions in D3 (I learnt more than I wanted to about these when I wrote the dynamic "semaphore pie" we used here [1] ) it's relatively viable to do it for paths created from within D3. For paths already present and wanting to be selected... I guess it would work pretty much the same, since d3 selectors are more or less good to go with embedded SVGs, IIRC. It's actually a very nice trick (and I love moving things around in graphs), and I'm intrigued by how I'd do it with D3. If I have any free time this weekend I'll look into it ;) [1] VanillaSEO: http://vanillaseo.com/report/20141030fdec7fda61eafac3b8dca58899defb9e http://vanillaseo.com/report/20141030fdec7fda61eafac3b8dca58... Ninja edit (or almost): Here's the relevant part of d3 docs about tweens: https://github.com/mbostock/d3/wiki/Transitions https://github.com/mbostock/d3/wiki/Transitions

mbostock 12y ago

You can transition the stroke-dasharray property and use element.getTotalLength to determine the total length of the path. Here’s a bl.ock: http://bl.ocks.org/mbostock/5649592 http://bl.ocks.org/mbostock/5649592 And here’s an older graphic that demonstrates the technique in use: http://www.nytimes.com/interactive/2013/02/20/movies/among-the-oscar-contenders-a-host-of-connections.html http://www.nytimes.com/interactive/2013/02/20/movies/among-t... We also used this technique to render the progress map in The Russia Left Behind: http://www.nytimes.com/newsgraphics/2013/10/13/russia/ http://www.nytimes.com/newsgraphics/2013/10/13/russia/