D3 Examples - d3 | svg shapes with labels

xxxxxxxxxx
 
<!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>
        body {font-family: monospace; line-height: 160%; font-size: 16px; max-width: 90%; margin: 10px auto;}
​
        </style>
​
    </head>
    <body>
​
    <h3>Earth days to orbit our sun</h3>
​
    <script>
​
        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);
​
        var bars = theCanvas.selectAll("rect")
                    .data(dataset)
                    .enter()
                    .append("rect")
                        .attr("width", function(d) {
                            return x(d.age);
                        })
                        .attr("fill", function(d) {
                            if (d["age"] <= 366) { 
                                return "red"; 
                                } else {
                                return "black";
                                }
                        })
                        .attr("height", 16)
                        .attr("y", function (d, i) {
                            return i * 25;
                        });
​
//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>
    