xxxxxxxxxx<meta charset="utf-8"><head> <title>Diaper Story Scroller</title> <link rel="stylesheet" type="text/css" href="style.css"></head><body><div class="container"> <div id = 'graphic'> <div id='sections'> <section class="step"> <div class="title">What I did on Paternity Leave</div> Between feedings, diapers, and barely sleeping ... I made dis! </section> <section class="step"> <div class="title">Plan to keep Brain working</div> Using <a href="https://d3js.org/">d3</a> (visualization coding language) and the most recent data at my disposal (Diaper Changes) ... I set out to craft a quick story about the horrors (aka diapers) we witnessed </section> <section class="step"> <div class="title">The Story Begins</div> Through a handy app, we know the exact number of poo packs we have endured over the last month </section> <section class="step"> <div class="title">Horrors at all Times</div> And we have embraced these monstrosities at all hours of the day </section> <section class="step"> <div class="title">Compettive Advantage?</div> but ... how can I use this data to my advantage? </section> <section class="step"> <div class="title">Must Negotiate Effectively</div> Lets convince the wife take these shifts to minimize my exposure! </section> <section class="step"> <div class="title">Now Lets Get Fancy</div> Lets look at all diapers as individual bubbles! Ok this one really isn't telling us much ... but it sure looks cool! (note: bubble sizes are random because we didn't go as far as logging relative volumes) </section> <section class="step"> <div class="title">But who is Changing More?</div> Orange bubbles are what I changed (Don't Tell!) </section> <section class="step"> <div class="title">Ok ... Clearly its Jen</div> Before you get all huffy at me ... we know the data is bad! Jen usually logs an entry into the app for me when I change da bebe </section> <section class="step"> <div class="title">And Thats all for now</div> It has been fun ... but I need sleep </section> </div> <div id ='vis'> </div> <div id="extra-space"> </div> </div></div><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><script src="https://d3js.org/d3.v3.min.js"></script><script src="scroller.js"></script><script src="bubblechart.js"></script><script src="sections.js"></script></body></html> Modified http://d3js.org/d3.v3.min.js to a secure url
https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js
https://d3js.org/d3.v3.min.js