Draggable line graph / wave form - looking for best way to animate

[are_dub]

Hello, 

 

I need to render a line graph, using data points, and allow the user to scroll left or right through the graph. I was thinking to use drawSVG in some fashion, but I am having an issue translating the data points to an SVG line. 

 

I'm not sure that is the way to go - I need to have the graph display about 10 seconds of a 30 minute long wave, but the user needs to be able to scroll back and forth at will. 

 

What would you use to achieve this effect? 

 

My current thinking is that I either

 

1. Render an svg for each frame of the animation, somehow translating x and y into an svg line.
2. Render one long wave and scroll it within a container. (Again somehow translating x and y into an svg line)
3. Look at graphing libraries and use greensock to manipulate the data point properties.

I obviously at the concept stage here, so sorry for the lack of details. Any thoughts are appreciated!

[OSUblake]

Play around with drawing waves with this.

See the Pen dYVNYd by osublake (@osublake) on CodePen

 

This is how I convert the points that are drawn into a path. 

See the Pen BowJed by osublake (@osublake) on CodePen

 

Not sure how long 30 minutes of a wave is, but you could just display a range.

[are_dub]

Wow, thanks!

 

I am going to try to digest this, but it seems like a lot of the abilities I am looking for are in there. Awesome. 

 

I'll let you know how it turns out!