D3 Examples - Women's Share of Seats in Parliament

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Gender Inequality Indices</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
    </head>
    <body>
        
        <p><b>Gender Inequality Indices</b></p>
        <p>Share of Seats in Parliament (% held by women)</p>
        <p>Source: data.un.org
        <script type="text/javascript">
        var svg = d3.select("body")
            .append("svg")
            .attr("width", 500)
            .attr("height", 400)
​
        d3.csv("GenderInequalityIndicesWk3Hwk.csv",function(data) {
            data.sort(function(a, b) {
                    //return d3.descending(a.ShareSeatsParliament, b.ShareSeatsParliament);
                    return d3.descending(+a.ShareSeatsParliament, +b.ShareSeatsParliament);
            });
            
​
            svg.selectAll("rect")
                .data(data)
                .enter()
                .append("rect")
                .attr("x", 0)
                .attr("y", function(d, i) {
                    return i * 10;
                })
                .attr("width", function(d) {
                    return d.ShareSeatsParliament*10;
                })
                .attr("height", 8)
                .append("title")
                    .text(function(d) {
                        return d.Country + "'s women's share of seats in Parliament is " + d.ShareSeatsParliament;
                    })
            //svg.selectAll("text")
            //  .data(data)
            //  .enter()
            //  .append("text")
            //  .text(function(d) {
            //      return d;
            //  })
            //  .attr("x", function(d, i) {
            //      return i * (w / data.length);
            //  })
            //  .attr("y", function(d) {
                //  return h - (d * 4);
            //  })
                
        });
        </script>
    </body>
​
</html>
    