W6 exercise

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Module 6 exercise - Mikel Madina</title>
<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
<style type="text/css">
			
			body {
				background-color: white;
				font-family: Helvetica, Arial, sans-serif;
			}

h1 {
				font-size: 24px;
				margin: 0;
			}

p {
				font-size: 14px;
				margin: 10px 0 0 0;
			}

svg {
				background-color: white;
			}

circle:hover {
				fill: orange;
			}
			
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}

g.highlight path {
				stroke: rgba(255,0,0,0.35);
				stroke-width: 2;
			}

</style>
</head>
<body>
<h1>Evolution of percentages of people in risk of poverty per town in Gipuzkoa</h1>
<p>The Y axis shows the percentage of people in risk of poverty.</p>
<p>The towns where the percentage grew from 2012 to 2013 are highlighted in red.</p>
<script type="text/javascript">
	var w = 700;
	var h = 500;
	var padding = [ 20, 70, 30, 70 ];  //Top, right, bottom, left
	
	//Set up date formatting and years
	var dateFormat = d3.time.format("%Y");
	//Set up scales
	var xScale = d3.time.scale()
		.range([ padding[3], w - padding[1] - padding[3] ]);
	
	var yScale = d3.scale.linear()
		.range([ padding[0], h - padding[2] ]);

//Configure axis generators
	var xAxis = d3.svg.axis()
		.scale(xScale)
		.orient("bottom")
		.ticks(2)
		.tickFormat(function(d) {
			return dateFormat(d);
		});
	
	var yAxis = d3.svg.axis()
		.scale(yScale)
		.orient("left")
		.tickFormat(function(d) {
			return d + "%";
		});

var yRightAxis = d3.svg.axis()
		.scale(yScale)
		.orient("right")
		.tickFormat(function(d) {
			return d + "%";
		});

//Configure line generator
	var line = d3.svg.line()
		.x(function(d) {
			return xScale(dateFormat.parse(d.year));
		})
		.y(function(d) {
			return yScale(+d.amount);
		});

//Create the empty SVG image
	var svg = d3.select("body")
		.append("svg")
		.attr("width", w)
		.attr("height", h);

//Load in contents of CSV file
d3.csv("pobreziaetabazterketaarriskukopertsonak2012-2013.csv", function(data) {
	
	var years = ["2012", "2013"]

var dataset = []

//Loop once for each row in data
	for (var i = 0; i < data.length; i++) {
		//Create new object with this country's name and empty array
		dataset[i] = {
			udala: data[i].UDALA,
			biztanleak: data[i].BIZTANLEAK,
			indikadoreak: []
		};

//Loop through all the years
		for (var j = 0; j < years.length; j++) {
			// If value is not empty
			if (data[i][years[j]]) {
			//Add a new object to the emissions data array
			//for this country
				dataset[i].indikadoreak.push({
					year: years[j],
					amount: data[i][years[j]]
				});
			}
		}
	}

//Set scale domains
				xScale.domain([ 
					d3.min(years, function(d) {
						return dateFormat.parse(d);
					}),
					d3.max(years, function(d) {
						return dateFormat.parse(d);
					})
				]);

yScale.domain([ 
					d3.max(dataset, function(d) {
						return d3.max(d.indikadoreak, function(d) {
							return +d.amount;
						});
					}),
					0
				]);

// first graph, poverty relative values to population

//Make a group for each country
				var groups = svg.selectAll("g")
					.data(dataset)
					.enter()
					.append("g")
					.classed("highlight", function(d) {
						for (var i = 0; i < data.length; i++) {
							if (d.indikadoreak[0].amount < d.indikadoreak[1].amount ) {
								return true;
							} else {
								return false;
							}
						}
					});

//Append a title with the country name (so we get easy tooltips)
				groups.append("title")
					.text(function(d) {
						return d.udala + " (" + d.biztanleak +")";
					});
//Within each group, create a new line/path,
				//binding just the emissions data to each one
				groups.selectAll("path")
					.data(function(d) {
						return [ d.indikadoreak ];
					})
					.enter()
					.append("path")
					.attr("class", "line")
					.attr("d", line)
					.attr("fill", "none")
					.attr("stroke", "rgba(100,100,100,0.5)")
					.attr("stroke-width", 2);

//Axes
				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);

svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (w - 2*(padding[1])) + ",0)")
					.call(yRightAxis);

});
			//End USA data load function
</script>
</body>
</html>

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

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