xxxxxxxxxx
<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> </h2>
<p>This chart shows slope index of inequality (SII), a measure of how equally life expextancy 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>
<script type="text/javascript">
//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