D3 Examples - W3 exercise

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Module 2 exercise - Mikel Madina</title>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
    svg {float:left;}
    rect:hover {fill:green;}
</style>
</head>
<body>
​
<script type="text/javascript">
//Load in contents of CSV file
d3.csv("pobrezia2012.csv", function(data) {
var svg = d3.select("body")
            .append("svg")
            .attr("width", 300)
            .attr("height", 900)
            .attr("id","svg1");
​
// first graph, poverty relative values to population
    
    var rects = svg.selectAll("rect")
                .data(data)
                .enter()
                .append("rect");
                
    rects.attr("x", 0)
        .attr("y", function(d, i) {
            return i * 10;
            })
        .attr("width", function(d) {
            return ((d.EMAKUMEAKagi + d.LAGUNAKagi ) * 100 / d.BIZTANLEAK) * 10 ;
            })
        .attr("height", 8)
        .append("title")
        .text(function(d) {
            return d.UDALA + "(" + (((d.EMAKUMEAKagi + d.LAGUNAKagi) * 100 / d.BIZTANLEAK)).toFixed(2) + "%)";
        });
    
​
​
​
    });
​
</script>
</body>
</html>
​
    