Scrollable Visualization
The following example implements a scrollable d3.js visualization using ScrollMagic.js.
Create an index.html with the following content:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://fastcdn.org/ScrollMagic/2.0.5/minified/ScrollMagic.min.js"></script>
<style media="screen">
html, body {
height: 100%;
margin: 0;
}
.pane {
width: 100%;
height: 100%;
background-color: #eee;
}
.pane.a { background-color: tomato; }
.pane.b { background-color: #ddd; }
.pane.c { background-color: steelblue; }
</style>
</head>
<body>
<div class="pane a">
</div>
<div class="pane b">
<svg class="canvas">
</svg>
</div>
<div class="pane c">
</div>
<script type="text/javascript">
// set SVG to full width and height
var canvas = d3.select('.canvas')
.attr('width', window.innerWidth)
.attr('height', window.innerHeight);
// create the scales for the full width and height
var xScale = d3.scaleLinear()
.range([150, window.innerWidth - 150]);
var yScale = d3.scaleLinear()
.range([150, window.innerHeight - 150]);
// create the circle
var circle = d3.select('.canvas')
.append('circle')
.attr('r', 100);
// our custom function to position the circle
function setCircle(progress) {
circle.attr('cx', xScale(progress));
circle.attr('cy', yScale(progress));
}
// make initial positioning
setCircle(0);
// create a scroll magic controller
var controller = new ScrollMagic.Controller();
// create a scene
new ScrollMagic.Scene({
// the element to scroll inside
triggerElement: '.pane.b',
// how many pixels do we scroll
duration: window.innerHeight * 2,
// set trigger to top
triggerHook: 'onLeave'
})
// pins the element for the the scene's duration
.setPin('.pane.b')
// assign the scene to the controller
.addTo(controller)
// subscribe to progress events
.on('progress', function(e) {
// position the circle accordingly
setCircle(e.progress);
});
</script>
</body>
</html>