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.
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, 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;
}
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:
graphScroll.offset(300)
Defaults to 200 pixels.
To update or replace a graphScroll instance, pass a string to eventId
to remove the old event listeners:
graphScroll.eventId('uniqueId1')