graph-scroll.js

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.
d3.graphScroll()
  .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='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'))
    

Sticky graph

When the graph starts to scroll out of view, the container 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.
#container{
  position: relative;
}

#sections{
  width: 340px;
}

#graph{
  width: 500px;
  margin-left: 380px;
  position: absolute;
  top: 0px;
}

.graph-scroll-fixed #graph{
  position: fixed;
}

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:
.graph-scroll-below #graph{
  position: absolute;
  bottom: 0px;
}

Mobile

On mobile centering the graph and sections while adding a some padding for the first slide is a good option:
@media (max-width: 925px)  {
  #graph{
    width: 100%;
    transform: translate(-50%, 0);
    margin-left: 50%;
  }

  #sections{
    position: relative;
    margin: 0px auto;
    padding-top: 400px;
  }
}

Examples

Auto Sales

Measles

Coloring Maps

Global Warming

Hillary Clinton’s Debt to Feminism

The Year Ahead

Pace of Social Change

Red Meat

More reading

How To Scroll

So You Want to Build A Scroller

Making “Fewer Helmets, More Deaths”

Greenland Is Melting Away

Homan Square

Todos

- Simple examples

- Self explanatory graphics

- Swiper

contribute/view on github