D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
smokbel
Full window
Github gist
scrollerpractice
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> .heading { text-align: center; margin-top: 20vh; margin-bottom: 20vh; position: relative; height: 200px; } body { font-family: Helvetica, Arial; } #container { position: relative; z-index: 100; } #viz { position: absolute; top: 50vh; right: 10%; width: 35%; height: 50vh; z-index: 50; background-color: DarkGrey; } .text { width: 50%; padding-left: 200px; padding-top: 25vh; padding-bottom: 25vh; } .text:first-child { padding-top: 45vh; } .text:last-child { padding-bottom: 45vh; } </style> </head> <body> <div id="viz"> </div> <div id="container" style="height: 100vh; overflow: scroll"> <div id="sections"> <div class="heading"> <h2> Data Story Title Placed Here</h2> <h4> Short intriguing paragraph summarizing the below data will be described here.</h4> </div> <div class="text"> <p>This will describe the first piece of data</p> </div> <div class="text"> <p>This will describe the second piece of data</p> </div> <div class="text"> <p>This will describe the third piece of data</p> </div> <div class="text"> <p>This will describe the fourth piece of data</p> </div> <div class="text"> <p>This will describe the fifth piece of data</p> </div> <div class="text"> <p>This will describe the sixth piece of data</p> </div> </div> </div> </div> <script> </script> </body>
https://d3js.org/d3.v4.min.js