This block was inspired by Tim Urban's TED talk Inside the mind of a master procrastinator
Each square represents a week in your lifespan, the grid assumes your lifespan is 90 years, enter your age and you can see how much time you've already wasted!
A bit of a motivator to get out there and start doing!! Or ya know start tomorrow and just watch cat videos! :)
| <html> | |
| <body> | |
| <div class="input"> | |
| <label>Enter Age:</label> | |
| <input type="text" id="age"/> | |
| <button onclick="calc()">Submit</button> | |
| </div> | |
| <br> | |
| <div class="container"> | |
| </div> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var num_of_rects = 90 * 52, //weeks for 90 year life span | |
| width = 1000, | |
| height = 1000, | |
| square = 10, | |
| x = 0, | |
| y = 0; | |
| d3.select('div.container') | |
| .append('svg') | |
| .attr('height',1000) | |
| .attr('width', 1000); | |
| var ar = d3.range(num_of_rects); | |
| /** | |
| set up grid data | |
| **/ | |
| var grid = ar.map(function(d,i){ | |
| if(x >= (width - square)){ //minus square for padding | |
| x = 0; //reset x when get to end of row (edge of div) | |
| y = y + square; //update y when we move down to a new row | |
| } | |
| x = x + square; | |
| return { | |
| id: d, | |
| x: x, | |
| y:y | |
| }; | |
| }); | |
| d3.select('svg').selectAll('rect') | |
| .data(grid) | |
| .enter() | |
| .append('rect') | |
| .attr('class', function(d){ | |
| return 'cell-' + d.id; | |
| }) | |
| .attr('width', square) | |
| .attr('height',square) | |
| .attr('x', function(d){ | |
| return d.x; | |
| }) | |
| .attr('y', function(d){ | |
| return d.y; | |
| }) | |
| .attr('fill', 'steelblue') | |
| .attr('stroke', 'white'); | |
| function calc(){ | |
| var age = document.getElementById('age').value, | |
| weeks_in_year = 52, | |
| weeks_past = age * weeks_in_year; | |
| d3.selectAll('rect') | |
| .transition() | |
| .duration(1500) | |
| .ease(d3.easeQuadOut) | |
| .attr('opacity', function(d){ | |
| if(d.id <= weeks_past){ | |
| return 0.5; | |
| } | |
| }) | |
| } | |
| </script> | |
| </body> | |
| </html> |