d3 | svg shapes with labels

Pulling in data to display svg shapes with labels

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>D3 Json</title>
        <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>

</style>

</head>
    <body>

<h3>Earth days to orbit our sun</h3>

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" : "yellow" },
            { "planet": "Uranus", "age" : 30707.4082, "colour" : "pink" },
            { "planet": "Neptune", "age" : 60198.5006, "colour" : "black" },
        ];

// 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 theCanvas = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);

//Add the SVG Text Element to the svgContainer
        var text = theCanvas.selectAll("text")
                    .data(dataset)
                    .enter()
                    .append("text");

//Add SVG Text Element Attributes
        var textLabels = text
                    .attr("x", function(d) { return x(d.age) + 10; })
                    .attr("y", function (d, i) {
                            return i * 25 + 14;
                        })
                    .text( function (d) { return d["planet"] + " takes " + d["age"]; })
                    .attr("font-family", "monospace")
                    .attr("font-size", "14px")
                    .attr("fill", "black");

</script>

</body>
</html>

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

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