D3 Examples - d3 | how old will we be

d3 | how old will we be

My youngest is always asking me, 'how old will you be when I'm x years? and by brother/sister is x years

So this sketch is for him! but it was weird doing it, actually made me pause.

Used moment.js to calculate the dates; no real need though, as they were just subtractions—but handy if I do anything more detailed with the sketch.

The nav/options are an array (caled dates in the code) that can just be added to and changed, and the rest get's worked out and displayed.

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>d3 | family ages</title> 
  <meta name="author" content="Sundar Singh | eesur.com">
  
  <link rel="stylesheet" href="main.css">
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js" charset="utf-8"></script> 
</head>
<body>
​
<header>
  <h1>How old will I be?</h1>
  <p>Our family ages, at different points</p>
  <nav></nav>
</header>
<section id="vis"></section>
​
<script src="d3_code_ages.js" charset="utf-8"></script>
​
</body>
</html>
​
    