Exercise W5

<!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>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js