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

    <div id='graph'></div>
  </div>
  <h1>Footer</h1>

and passed to graphScroll

  d3.graphScroll()
    .graph(d3.selectAll('#graph'))
    .container(d3.select('#container'))
    

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.

  #container{
    position: relative;
    overflow: auto;
  }

  #sections{
    width: 200px;
    float: left;
  }

  #graph{
    width: 600px;
    float: left;
    margin-left: 40px;
  }

  #graph.graph-scroll-fixed{
    position: fixed;
    top: 0px;
    margin-left: 240px;
  }

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

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

- Expose scroll-to functionality