D3 Examples - Exercise W5

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Module 3 exercise - Mikel Madina</title>
<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
<style type="text/css">
    body {font-family:sans-serif;}
    svg {float:left;}
    rect:hover {fill:lightpink;}
    .axis path,
    .axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
    }
    .axis text {
        font-family: sans-serif;
        font-size: 8px;
    }
    
</style>
</head>
<body>
<h1>Percentages of people in risk of poverty per town in Gipuzkoa</h1>
<p>The X axis shows the percentage of people in risk of poverty.</p>
<p>The Y axis shows the number of inhabitants.</p>
<p>There seems to be no lineal relation between the number of inhabitants of a town and the percentage of people in risk of poverty.</p>
<script type="text/javascript">
    var w = 800;
    var h = 500;
    var padding = [ 20, 10, 30, 70 ];  //Top, right, bottom, left
    
    var xScale = d3.scale.linear()
        .range([ padding[3], w - padding[1] - padding[3] ]);
    
    var yScale = d3.scale.linear()
        .range([ padding[0], h - padding[2] ]);
​
    var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom")
        .tickFormat(function(d) {
            return d + "%";
        });
    
    var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left");
​
    var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);
​
//Load in contents of CSV file
d3.csv("pobrezia2012.csv", function(data) {
    
    
    xScale.domain([
        d3.min(data, function(d) {
            return (((d.EMAKUMEAKagi+d.LAGUNAKagi)/d.BIZTANLEAK)*100);
        }), 
        d3.max(data, function(d) {
            return (((d.EMAKUMEAKagi+d.LAGUNAKagi)/d.BIZTANLEAK)*100);
        })
    ]);
    yScale.domain([
        d3.max(data, function(d) {
            return +d.BIZTANLEAK;
        }),
        0
    ]);
​
// first graph, poverty relative values to population
    
    var circles = svg.selectAll("circle")
                .data(data)
                .enter()
                .append("circle");
​
    circles.attr("cx", function(d) {
            return xScale(((d.EMAKUMEAKagi+d.LAGUNAKagi)/d.BIZTANLEAK)*100);
        })
        .attr("cy", function(d) {
            return +yScale(d.BIZTANLEAK);
        })
        .attr("r", 5)
        .attr("fill", "rgba(139,0,0,0.5")
        .append("title")
        .text(function(d) {
            return d.UDALA + " (" + (((d.EMAKUMEAKagi + d.LAGUNAKagi) * 100 / d.BIZTANLEAK)).toFixed(2) + "% - " + d.BIZTANLEAK + ")";
        });
    
​
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + (h - padding[2]) + ")")
        .call(xAxis);
​
    svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(" + padding[3] + ",0)")
        .call(yAxis);
​
    });
​
</script>
</body>
</html>
​
    