Built with blockbuilder.org
Created
July 27, 2017 15:25
-
-
Save baronwatts/2097a8c961822e9421e6ef1c3ff2dba0 to your computer and use it in GitHub Desktop.
meetup
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment