D3| Data from embedded json

Pulling in data in a simple list and svg shapes.

Data is of varying planetary years in earth days.

The planets revolve around the sun in different amounts of time, so a "year" on each planet is a different amount of time. The farther a planet is from the sun, the longer its year. source

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Planets</title>
        <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>

</head>
    <body>
        <script type="text/javascript">

var dataset = // embedded json , data from https://www.enchantedlearning.com/subjects/astronomy/age.shtml
        [
            { "planet": "Mercury", "age" : 87.96, "colour" : "grey" },
            { "planet": "Venus", "age" : 224.68, "colour" : "purple" },
            { "planet": "Earth", "age" : 365.26, "colour" : "blue" },
            { "planet": "Mars", "age" : 686.98, "colour" : "red" },
            { "planet": "Jupiter", "age" : 4332.7141, "colour" : "green" },
            { "planet": "Saturn", "age" : 10759.0986, "colour" : "red" },
            { "planet": "Uranus", "age" : 30707.4082, "colour" : "white" },
            { "planet": "Neptune", "age" : 60198.5006, "colour" : "yellow" },
        ];

var list = d3.select("body").append("ul").selectAll("ul")
                     .data(dataset)
                     .enter()
                     .append("li")
                     .text(function (d) {
                        return d["planet"] + " is :" + d["age"];
                     });

// width and height
            var w = 900;
            var h = 500;

var x = d3.scale.linear()
                            .domain([0, d3.max(dataset, function(d) { return d.age; })])
                            .range([0, h]);

var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h)

var circles = svg.selectAll("circle")
                            .data(dataset)
                            .enter()
                            .append("circle");

// ************ just to move the circles on mouse over ************

// d3.selection.prototype.moveToFront = function() {
            //   return this.each(function(){
            //   this.parentNode.appendChild(this);
            //   });
            // };

d3.selection.prototype.moveToBack = function() { 
                return this.each(function() { 
                    var firstChild = this.parentNode.firstChild; 
                    if (firstChild) { this.parentNode.insertBefore(this, firstChild); } }); 
            };

// ************ end circles on mouse over ************

circles.attr("cx", function(d, i) {
                        return (i * 88) + 10;
                    })
                   .attr("cy", h/2 +10)
                   .attr('fill-opacity', 0.8)
                   .attr("r", function(d, i) {
                        return x(d.age) /2.2;
                   })
                   .style("fill", function(d) { 
                        return d.colour; 
                   });

circles.on("mouseover",function(){ // trigger mouse circles
                          var sel = d3.select(this)
                          sel.moveToBack();
                        });

</script>

</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

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