D3 Examples - Toronto's Green Spaces

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Toronto's Greenspaces</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
        <style type="text/css">
            body {background-color: white;}
            h4,h3{font-family: Arial, Helvetica, sans-serif;}
            p {font-family: Arial, Helvetica, sans-serif; font-size: 70%}
            svg {background-color: white;}
        </style>
    </head>
    <body>
​
<h3> Greens Spaces Index in Toronto's Neighbourhoods </h3>
<p>Total land area (in square kilometres) designated as parkland or green space, Toronto Wellbeing (C) 2014</p>
        <script type="text/javascript">     
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", 800)
                        .attr("height", 2000);
​
        // loading the data 
​
            d3.csv("data.csv", function(data) {
        // sort in descending order         
            data.sort(function(a, b) {
                    return d3.descending(a.GREENSP, b.GREENSP);
                });
​
        // create rectangles for each neighbourhood
​
                var rects = svg.selectAll("rect")
                                .data(data)
                                .enter()
                                .append("rect");
​
        // set the bar size
​
                rects.attr("x", 200)
                    .attr("y", function(d, i) {
                        return i * 10;
                    })
​
        // multiply the data by 100 to make more visible
​
                    .attr("width", function(d) {
                        return d.GREENSP * 200;
                    })
​
        // charactersitics for each title
                .attr("fill", "darkgreen")
                    .attr("height", 5)
                    .append("title")
                    .text(function(d) {
                        return d.neighbourhood + "'s life satisfaction score is " + d.GREENSP;
                    });
​
​
​
        // add axis labels on left, 10px apart, starting at 8px down and 190px across
                    svg.selectAll("text")
                    .data(data)
                    .enter()
                    .append("text")
                    .text(function(d){
                        return d.Neighbourhood;
                    })
                    .attr("x", 190)
                    .attr("y", function(d, i){
                        return i * 10 + 8;
                    })
        // set the type attributes for the labels                   
                    .attr({
                        "fill": "black",
                        "font-family": "sans-serif",
                        "font-size": "10px",
                        "text-anchor": "end"
                    })
​
​
​
            });
​
​
        </script>
​
    </body>
</html>
    