https://github.com/1wheel/graph-scroll
scrollers > steppers
https://github.com/1wheel/graph-scroll
Last synced: 14 days ago
JSON representation
scrollers > steppers
- Host: GitHub
- URL: https://github.com/1wheel/graph-scroll
- Owner: 1wheel
- License: mit
- Created: 2014-12-27T08:58:31.000Z (over 10 years ago)
- Default Branch: gh-pages
- Last Pushed: 2020-03-21T23:38:05.000Z (about 5 years ago)
- Last Synced: 2025-03-29T17:13:45.493Z (21 days ago)
- Language: HTML
- Homepage:
- Size: 525 KB
- Stars: 514
- Watchers: 12
- Forks: 50
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-d3 - graph-scroll - Simple scrolling events (Miscellaneous)
- awesome-d3 - graph-scroll - Simple scrolling events (Miscellaneous)
- awesome-d3 - graph-scroll - Simple scrolling events (Miscellaneous)
README
# graph-scroll.js
Simple scrolling events for [d3](https://github.com/mbostock/d3) graphs. Based on [stack](https://github.com/mbostock/stack.git)
### [Demo/Documentation](http://1wheel.github.io/graph-scroll/)
*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.
```
Page Title
Section 0
Section 1
Section 2
Footer
```
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')
```