D3 Examples - Forested Land Area by Country

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <title>Knight D3 Module 3</title>
    </head>
    <body>
        <svg width=960 height=500>
        </svg>
        <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script>
            d3.csv("no-ceilings-data.csv", function(row){
                //accessor to convert to numbers
                var obj = {}
                Object.keys(row).forEach(function(k){
                    var v = row[k]
                    obj[k] = +v || v;
                })
                return obj
            }, function(err, data){
                if (err) return console.error(err);
                var marginTop = 20, marginLeft = 150;
                var barHeight = 15, barMargin = 2;
​
                data = data.filter(function(d){return d.population > 5});
                data.sort(function(a,b){return d3.descending(a.forests, b.forests)})
​
                var svg = d3.select("svg");
                var rects = svg.selectAll("rect")
                              .data(data)
                              .enter()
                              .append("g")
                              .attr("transform", function(d,i){return "translate(0,"+(i*(barHeight+barMargin)+marginTop)+")"});
​
                rects.append("text").text(function(d){return d.country})
                    .style("text-anchor", "end")
                    .style("font-family", "sans-serif")
                    .style("font-size", "12px")
                    .attr("x", marginLeft)
​
                rects.append("text").text(function(d){return d.forests+'%'})
                    .style("font-family", "sans-serif")
                    .style("font-size", "12px")
                    .attr("x", marginLeft+5)
​
                rects.append("rect")
                    .attr("x", marginLeft+40)
                    .attr("y", -barHeight + 3)
                    .attr("height", barHeight)
                    .attr("width", function(d){return 4*d.forests})
                    .style("fill", "green")
​
​
            })
        </script>
    </body>
</html>
​
    