D3 Examples - D3 week 3

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
​
    <title>D3 Course week 3</title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
​
</head>
​
<body>
​
<h2>Population per municipality</h2>
​
    <script>
​
    var svg = d3.select("body")
        .append("svg")
        .attr("width", 800)
        .attr("height", 6000);
​
        d3.csv("bevolking.csv", function(data) {
​
            data.sort(function(a,b) {
                return d3.descending (+a.Population2015, +b.Population2015)
            });
​
            svg.selectAll("rect")
                .data(data)
                .enter()
                .append("rect")
                .attr("x", 10)
                .attr("y", function(d,i) {
                    return i * 15
                })
                .attr("width", function(d) {
                    return d.Population2015 / 1500
                })
                .attr("height", 10);
​
            svg.selectAll("text")
                .data(data)
                .enter()
                .append("text")
                .attr("x", function(d) {
                    return d.Population2015 / 1500 + 20  
                })
                .attr("y", function(d,i) {
                        return 8 + i * 15 
                    })
                .attr("font-size", "10px")
                .attr("font-family", "sans-serif")
                .text(function(d) {
                    return d.Community + " " + d.Population2015;
                   });
​
            
        });
​
    </script>
​
​
</body>
​
</html>
    