experiments using scrolling instead of steppers
HTML JavaScript
Latest commit ebcfcdf Feb 24, 2017 @1wheel 0.0.7
Failed to load latest commit information.
.gitignore v4 upgrade Oct 25, 2016
LICENSE rename license Oct 25, 2016
README.md adds docs and default val of 200 for #14 Jan 24, 2017
d3v4+jetpack.js v4 upgrade Oct 25, 2016
graph-scroll.js fixes #18 - gs.offset() returns val Feb 10, 2017
index.html v4 upgrade Oct 25, 2016
index.js fixes #18 - gs.offset() returns val Feb 10, 2017
package.json 0.0.7 Feb 24, 2017



Simple scrolling events for d3 graphs. Based on stack


graph-scroll takes a selection of explanatory text sections and dispatches active events as different sections are scrolled into to view. These active events can be used to update a chart's state.

    .sections(d3.selectAll('#sections > div'))
    .on('active', function(i){ console.log(i + 'th section active') })

The top most element scrolled fully 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;

To support headers and intro images/text, we use a container element containing the explanatory text and graph.

<h1>Page Title</div>
<div id='container'>
    <div id='sections'>
        <div>Section 0</div>
        <div>Section 1</div>
        <div>Section 2</div>

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

If these elements are passed to graphScroll as selections with container and graph, every element in the graph selection will be classed graph-scroll-graph if the top of the container is out of view.

  .sections(d3.selectAll('#sections > div'))
  .on('active', function(i){ console.log(i + 'th section active') })

With a little bit of css, the graph element snaps to the top of the page while the text scrolls by.

  position: relative;
  overflow: auto;

  width: 200px;
  float: left;

  width: 600px;
  float: left;
  margin-left: 40px;

  position: fixed;
  top: 0px;
  margin-left: 240px;

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:

  position: absolute;
  bottom: 0px;
  margin-left: 240px;

To adjust the amount of pixels before a new section is triggered, update offset :


Defaults to 200 pixels.