D3 Examples - Your age across the Milkyway

Your age across the Milkyway

Our age on Earth is based on ‘Earth years’. Our age is the number of times the Earth has orbited the Sun since the day we were born. If we were to live on another planet in the Solar System our age would be different because each planet takes a different amount of time to orbit the Sun. In other words, each planet has a different year length. source

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 orbit on planets</title>
        <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
​
        <style>
        body {font-family: monospace; line-height: 160%; font-size: 16px; max-width: 90%; margin: 10px auto;}
        input {border: 1px dotted #ccc; background: white; font-family: monospace; padding: 10px 20px; font-size: 18px; margin: 20px 10px 20px 0; color: red;}
        input:focus { background-color:yellow; outline: none;}
        /*form {display: block; position: fixed; left: 10px; top: 10px; background: transparent; ;}*/
​
        </style>
​
    </head>
    <body>
​
    <h3>Your age across the Milkyway</h3>
​
​
        <form name="myform" onSubmit="return handleClick()">
            <input type="text" id="myVal" placeholder="Add your Earth age">
            <input name="Submit"  type="submit" value="My orbit accross the Milkyway" >
        </form>
​
​
    <script>
​
        var dataset = // ow long it takes each planet to orbit the Sun
        [
            { "planet": "Mercury", "orbit" : 0.241 },
            { "planet": "Venus", "orbit" : 0.615},
            { "planet": "Earth", "orbit" : 1},
            { "planet": "Mars", "orbit" : 1.881},
            { "planet": "Jupiter", "orbit" : 11.86},
            { "planet": "Saturn", "orbit" : 29.46},
            { "planet": "Uranus", "orbit" : 84.01},
            { "planet": "Neptune", "orbit" : 164.8}
        ];
 
 
        function handleClick(event){
            console.log(document.getElementById("myVal").value)
            orbit(document.getElementById("myVal").value)
            return false;
        }
​
        myUl = d3.select("body")
                .append("ul")
                .selectAll("ul");
                
​
        myList = myUl
                .data(dataset)
                .enter()
                .append("li")
                .text(function (d) { 
                    return "need ya age to know" + " years on " + d["planet"];
                });
​
        function orbit(val){
            myList
            .text(function (d) { 
                return (val/d["orbit"]).toFixed(2) + " years on " + d["planet"]; //divide your age in Earth years by the length of the planet's year in Earth years to get you age in that planets years
            });
        };
 
​
    </script>
​
​
    </body>
</html>
    