Fading repeating area charts with D3.js -- RUSH!!
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I need an answer for this right away.

Need D3 code that paints a smooth area graph over a one second time from an array. Then repeats by painting a new graph over the first but with the opacity of the earlier graph decaying over the one second. Think of this kind of like a a radar display where the image is bright where the radar is pointing but decays over time.

This is going to be used in a React-Native app so it needs to be D3 V4 able to be animated within React-Native along with React controlling the DOM.

area graphs like this: http://visualoop.com/media/2015/01/area-image_5.png ?
gabrielsimoes 1 month ago
Or just a small circle (like a radar)?
gabrielsimoes 1 month ago
sort of like this (solid curve part) but as it repaints, the previous scan fades (opacity goes to zero) over the same period of time. https://stackoverflow.com/questions/47986520/how-to-synchronize-animation-of-path-and-area or https://jsfiddle.net/alidingling/Lrffmzfc/
billsouthworth 1 month ago
Does it absolutely have to be D3?
jduplessis294 1 month ago
Yes. It also needs to run with React-Native V4.
billsouthworth 1 month ago
awarded to jduplessis294

Crowdsource coding tasks.

1 Solution

Winning solution

See my JSFiddle here:
https://jsfiddle.net/dzo36njt/5/
Let me know of any needed adjustments.

Looks good. I'd appreciate a couple slight modifications. Can you adjust the decay time so that it equals the time of the new curve being painted. It seems to be happening too fast currently. Also, can you create a smoothed curve from a set of array points. The next pass will start from the next point and so forth. For this code just a few sets will be fine so that it is more visible that, for example, a new data sweep is lower than the previous. The actual data is a power curve that basically looks like half a sine wave.
billsouthworth 1 month ago
I am struggling with the correct effect, sorry about that; But I made a few changes here: https://jsfiddle.net/dzo36njt/8/
jduplessis294 1 month ago
The last jsfiddle got a bit weird. The way it should appear is that a single hump is painted left to right. That hump stays there and fades while a second, generally different, hump is drawn. It doesn't look like curve one persists currently. Picture fixed axes with a succession of half sines with the peak lower in each one. When the new one is painted you should still see the higher one behind it fading.
billsouthworth 1 month ago
Ah that makes sense. I apologize it does not do that currently, but unfortunately I cannot work on it anymore right now. I can fix the bug tomorrow.
jduplessis294 1 month ago
New and improved version: https://jsfiddle.net/dzo36njt/10/
jduplessis294 1 month ago
That's it. Thanks.
billsouthworth 1 month ago