d3.js guidance on interactive scrolling an svg element

Question

I have created this functionality using d3.js and mathjs that draws a curve and then draws the tangent of the curve on mouseover. The source code is here.

What I am interested in doing is allowing the user to scroll a cubic curve for example by dragging the x axis and then redrawing the graph.

Can anyone give me some high level guidance on how to achieve this?

Answer 1

I think you can use d3 brush for this implementation.

Documentation: SVG-Controls

Sample Reference : Focus+Context via Brushing