Update d3 force through ScrollMagic

Use ScrollMagic.js to update the internal properties of the network's force as the user keep scrolling down through the page. Click the "open" on the right corner to scroll the visualization.

referencing the blocks from mike bostock,harry stevens

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <title>Update force</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
​
​
    
    <div class="canvas"></div>
    
    <div class="scroller">
          
          <div class="allDots"><span>.alldots</span></div>
        
          <div class="forceLink"><span>.forceLink</span></div>
​
          <div class="forceX"><span>.forceX</span></div>
 
        
    </div>
​
​
 
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/scrollmagic/2.0.5/scrollmagic.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/scrollmagic/2.0.5/plugins/debug.addindicators.min.js"></script>
  <script src="updateForce.js"></script>
​
</body>
    

Modified http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js to a secure url

https://code.jquery.com/jquery-1.12.4.js

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js