meetup

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/noframework.waypoints.js"></script>
  <style>
    html,body{height:100%;}
    section{height:100%; width: 200px; float:right;}
    div{height: 100%; font-size: 100px;}
    svg{position: fixed; top:0; padding:20px;}
  </style>
</head>

<body>
  <section>
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>
  </section>
  
  
  <script>
    var arr = d3.range(20).map(i => 
({ 'Totals': Math.random() * 600, 
    'Neighborhood': Math.random() >= 0.50 ? 'San Diego' : 'Houston', 
    'Age': Math.round( Math.random() * 65 + 18 )

}));

//svg
    var svg = d3.select("body").append("svg")
      .attr("width", 500)
      .attr("height", 500)
    	.style("background", "#222")
    
    
    //groups holds all the data
    var group = svg.selectAll('g')
      .data(arr).enter().append('g');
    
    
    //rects
    var rects = group.append("rect")
    		.attr("width", 6)
      	.attr("height", 6)
    		.attr("fill", (d,i)=> i < 10 ? 'green' : 'red')
    		.attr('x', (d,i) => 20 * i)
    		.attr('y', 0)

//animate
    let animate = () =>
  		rects
   			.transition()
    		.delay( (d,i) => 100*i ) 
    		.duration(600)
    		.ease('elastic')
    		.attr('x', 20)
    		.attr('y', (d,i)=> 20 * i)
    		.attr("width", (d,i)=> d.Age)
      	.attr("height", 6)
    
    //back
    let back = () =>{
  		rects
   			.transition()
    		.delay( (d,i) => 100*i ) 
    		.duration(600)
    		.ease('elastic')
    		.attr("width", 6)
      	.attr("height", 6)
    		.attr('x', (d,i) => 20 * i)
    		.attr('y', 0)
      
    		d3.selectAll("text")
          .attr("fill", "none")
    }
    
     //text
     let labels = () =>
  		group
        .append("text")
        .text( (d) => d.Age)
     		.transition()
    		.delay( (d,i) => 100*i ) 
    		.duration(600)
    		.ease('elastic')
        .attr("fill", "white")
        .attr("dx", 0)
     		.attr("dy", (d,i)=> 20 * i + 5)

//waypoints constructor
    function scroll(el, offset, func1, func2){
      return new Waypoint({
        element: document.getElementById(el),
        handler: function(direction) {
           direction == 'down' ? func1() : func2();
        },
        //start 75% from the top of the div
        offset: offset
      });
    };

//create waypoint
    new scroll('div2', '75%', animate, back);
    new scroll('div3', '75%', labels, animate);

</script>
</body>

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

https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/noframework.waypoints.js