Connect text and graphics graph-scroll takes a selection of explanatory text sections and dispatches active events as different sections are scrolled into to view. These active events are used to update a graph's state. d3.graphScroll() .sections(d3.selectAll('#sections > div')) .on('active', function(i){ console.log(i + 'th section active') }) takes a selection of explanatory text sections and dispatchesevents as different sections are scrolled into to view. These active events are used to update a graph's state.

Highlight active text The top most text section scrolled into view is classed graph-scroll-active . This makes it easy to highlight the active section with css: #sections > div{ opacity: .3 } #sections div.graph-scroll-active{ opacity: 1; } The top most text section scrolled into view is classed. This makes it easy to highlight the active section with css:

Headers and footers To support headers and intro images/text, the explanatory text and graphic are wrapped with a container element: <h1>Page Title</div> <div id='container'> <div id='graph'></div> <div id='sections'> <div>Section 0</div> <div>Section 1</div> <div>Section 2</div> </div> </div> <h1>Footer</h1> and passed to graphScroll d3.graphScroll() .graph(d3.select('#graph')) .container(d3.select('#container')) To support headers and intro images/text, the explanatory text and graphic are wrapped with a container element:and passed to