Simple scrolling events for d3 graphics.

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.
  .sections(d3.selectAll('#sections > div'))
  .on('active', function(i){
    console.log(i + 'th section active') })

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;

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='sections'>
      <div>Section 0</div>
      <div>Section 1</div>
      <div>Section 2</div>

    <div id='graph'></div>
and passed to graphScroll

Sticky graph

When the graph scrolls out of view, it is classed with graph-scroll-fixed. With a little bit of css, the graph element snaps to the top of the page while the text scrolls by.
    position: relative;
    overflow: auto;

    width: 200px;
    float: left;

    width: 600px;
    float: left;
    margin-left: 40px;

    position: fixed;
    top: 0px;
    margin-left: 240px;

Multiple graphs

Scroll away

As the bottom of the container approaches the top of the page, the graph is classed with graph-scroll-below. A little more css allows the graph slide out of view gracefully:
    position: absolute;
    bottom: 0px;
    margin-left: 240px;


Auto Sales


Coloring Maps

More reading

How To Scroll

Making “Fewer Helmets, More Deaths”


- Simple examples

- Self explanatory graphics

- Expose scroll-to functionality

contribute/view on github