Chart Mod6

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>LE data</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;
				color: #1aa5ad;
			}

h2 {
				font-size: 18px;
				margin: 0;
				color: #1aa5ad;
			}

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

svg {
				background-color: white;
			}

circle:hover {
				fill: black;
			}

path {
				stroke: #d6dbe3;
				stroke-width: 2;
			}

g.highlight path {
				stroke: red;
				stroke-width: 2;
			}
			
			.axis path,
			.axis line {
				fill: none;
				stroke: #bebebe;
				stroke-width: 1;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}

</style>
	</head>
	<body>

<h1>Slope index of inequality for life expectancy</h1>

<h2>For men by English region between 2003 and 2012<br>&nbsp;</h2>

<p>This chart shows slope index of inequality (SII), a measure of how equally life expectancy is distributed within the region. A SII value of zero would represent all areas in the region having the same life expectancy.</p>

<p>The three regions making up the North of England have been highlighted in red. All three regions (North East, North West and Yorkshire and the Humber) have high SII values for life expectancy, showing they have greater within area inequality. Also for all regions within area inequality has been fairly steady over the time period, while life expectancy has been steadily increasing.</p>

<p>SII in years</p>

//Dimensions and padding
			var w = 700;
			var h = 350;
			var padding = [ 20, 10, 30, 50 ];  //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(10)
							.tickFormat(function(d) {
								return dateFormat(d);
							});

var yAxis = d3.svg.axis()
							.scale(yScale)
							.orient("left");

//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 USA data
			d3.csv("LE_year.csv", function(data) {

//New array with all the years, for referencing later
				var years = ["2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012"];

//Create a new, empty array to hold our restructured dataset
				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] = {
						region: data[i].region,
						LifeExp: []
					};

//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].LifeExp.push({
								year: years[j],
								amount: data[i][years[j]]
							});
						}

}

}
				
				//Uncomment to log the original data to the console
				console.log(data);

//Uncomment to log the newly restructured dataset to the console
				console.log(dataset);

//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.LifeExp, function(d) {
							return +d.amount;
						});
					})+1,
					d3.min(dataset, function(d) {
						return d3.max(d.LifeExp, function(d) {
							return +d.amount;
						});
					})-2
				]);

//Make a group for each country
				var groups = svg.selectAll("g")
					.data(dataset)
					.enter()
					.append("g")
					.classed("highlight", function(d) {

if (d.region == "Yorkshire and the Humber" ||
							d.region == "North West"||
							d.region == "North East") {
							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.region;
					});

//Within each group, create a new line/path,
				//binding just the data to each one
				groups.selectAll("path")
					.data(function(d) {
						return [ d.LifeExp];
					})
					.enter()
					.append("path")
					.attr("class", "line")
					.attr("d", line)
					.attr("fill", "none")
					.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);

});
			//End data load function

</script>

<p><b>Source:</b> <a href="https://www.phoutcomes.info/">Public Health Outcomes Framework</a></p>
	</body>
</html>

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

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