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='graph'></div>
  <div id='sections'>
    <div>Section 0</div>
    <div>Section 1</div>
    <div>Section 2</div>
and passed to graphScroll

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.
  position: relative;

  width: 340px;

  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;


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

    position: relative;
    margin: 0px auto;
    padding-top: 400px;


Auto Sales


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


- Simple examples

- Self explanatory graphics

- Swiper

contribute/view on github