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, postiion: sticky keeps the graph element stuck to the top of the page while the text scrolls by.

#container{
  position: relative;
}

#sections{
  width: 340px;
}

#graph{
  margin-left: 40px;
  width: 500px;
  position: sticky;
  top: 0px;
  float: right;
}

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