Interaction Design WikiWeb Development

Scrollable Visualization

The following example implements a scrollable d3.js visualization using ScrollMagic.js.

Create an index.html with the following content:

<!DOCTYPE html>
    <meta charset="utf-8">
    <script src=""></script>
    <script src=""></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; }
    <div class="pane a">
    <div class="pane b">
      <svg class="canvas">
    <div class="pane c">

    <script type="text/javascript">
      // set SVG to full width and height
      var canvas ='.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 ='.canvas')
        .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

      // 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
        // assign the scene to the controller
        // subscribe to progress events
        .on('progress', function(e) {
          // position the circle accordingly