1wheel / graph-scroll

scrollers > steppers

graph-scroll.js

Simple scrolling events for d3 graphs. Based on stack

Demo/Documentation

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.

d3.graphScroll()
    .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='graph'></div>
  <div id='sections'>
    <div>Section 0</div>
    <div>Section 1</div>
    <div>Section 2</div>
  </div>
</div>
<h1>Footer</h1>

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.

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

When the graph starts to scroll out of view, position: 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;
}

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%;
    margin-left: 0px;
    float: none;
  }

  #sections{
    position: relative;
    margin: 0px auto;
    padding-top: 400px;
  }
}

Adjust the amount of pixels before a new section is triggered is also helpful on mobile (Defaults to 200 pixels):

graphScroll.offset(300)

To update or replace a graphScroll instance, pass a string to eventId to remove the old event listeners:

graphScroll.eventId('uniqueId1')

graph-scroll's Issues

Make example index.htm

• Use update lib
• Publish to gh-pages

Expose scrollTo functionality

Clean up references to container height

Calling offset() with no args doesn't return offset

Other functions follow the getter/setter pattern, but offset doesn't return the offset number if called with no args. Might just be a typo: https://github.com/1wheel/graph-scroll/blob/gh-pages/index.js#L141

I can do a quick PR if it helps.

Documentation

import with babelify doesn't work

import * as d3 from 'd3';
import 'd3-selection-multi';
import 'graph-scroll';

gives d3.graphScroll undefined when building with babelify.

rollup does work:

export * from "d3"
export * from "graph-scroll"

Demo?

Would be nice if a link to a demo was added to the readme.

How do I include this library into my d3 script?

How do I include this library into my d3 script? Assuming I have installed to my project via NPM and am using webpack. I have:

import * as d3 from "d3";
import "graph-scroll";

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

and get in the console log:

bundle.js:10069 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0_d3__.graphScroll is not a function
    at Object.name (bundle.js:10069)
    at __webpack_require__ (bundle.js:20)
    at __webpack_exports__.b (bundle.js:63)
    at bundle.js:66

Thanks.

upgrade to v4

Publish to bower

And thanks for such awesome work.

pageYOffset not defined?

I'm trying to figure out where pageYOffset gets its value from and where it's defined

Return function that is called on selection of elements

See d3.svg.axis

Configure selections and settings w/ module pattern, don't start scroll events until sections are added

    graphScroll()
        .container(d3.select('#container'))
        .fixed(d3.selectAll('#overlay, #overlay-space'))
        .on('active', function(){})
        .sections(d3.selectAll('section'))

v.

    graphScroll()
        .container(d3.select('#container'))
        .fixed(d3.selectAll('#overlay, #overlay-space'))
        .on('active', function(){})
        (d3.selectAll('section'))

graph.node() is null

When using the default example, I get an error that graph.node(...) is null. It seems that the graph method is required?

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

Does this not work in safari

I'm trying to figure out if this library is compatible with Safari. I couldn't figure out how to get the library working in Safari

Support scrolling out of view

http://mbtaviz.github.io/