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.

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

  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

More reading

How To Scroll

Making “Fewer Helmets, More Deaths”

Todos

- Simple examples

- Self explanatory graphics

- Expose scroll-to functionality