Adding Waves!

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.

from SF's Exploratorium

from SF’s Exploratorium

IMG_20140923_144236547(1) IMG_20140923_144245390

I also added a feature for clicking on bars to color them, so you can track them as you scroll.

Screen Shot 2014-09-29 at 12.59.08 PM Screen Shot 2014-09-29 at 12.59.19 PMScreen Shot 2014-09-29 at 12.59.30 PM

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.

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s