Inspired by a physical exhibit at the Exploratorium that used sliders to add sine waves, I built an online version here. I liked the physicality of the bars in the original exhibit because it emphasized that the heights were being summed. So, I chose to use rectangles instead of area in the online one as well. I also liked how the colored tips of the bars showed the sum of the two waves.
I also added a feature for clicking on bars to color them, so you can track them as you scroll.
Looking forward to adding more features that you can’t do in the physical world, like changing the amplitude and period of one or both of the waves. Or changing the functions themselves. Also, a friend who is a math teacher suggested showing some values of how far you’ve scrolled, so you could discover at what relative periods the peaks become highest and when they flatten completely.
From a code point of view, I used the d3.svg.area function for the first time as well as “toggle” function on an element’s classList. It was also a nice application of the d3 brush feature. Conceptually it was good practice grouping related elements together to create and update the slider. This included adding an invisible wider path element behind the visible white path element so you didn’t have to be pixel perfect right on the line to select it.