Skip to content

Instantly share code, notes, and snippets.

@cnev177
Created April 26, 2015 21:43
Show Gist options
  • Save cnev177/d9ff35713797830192bf to your computer and use it in GitHub Desktop.
Save cnev177/d9ff35713797830192bf to your computer and use it in GitHub Desktop.
Rwanda and The Congo's life expectancy 1960 - 2013
year lifeExpectancy
1960 48.58163415
1961 49.23004878
1962 49.84395122
1963 50.41885366
1964 50.95229268
1965 51.44136585
1966 51.88865854
1967 52.29821951
1968 52.67707317
1969 53.02919512
1970 53.35904878
1971 53.67053659
1972 53.96604878
1973 54.2484878
1974 54.52231707
1975 54.79297561
1976 55.0690000
1977 55.34741463
1978 55.6237561
1979 55.89053659
1980 56.13921951
1981 56.36178049
1982 56.54519512
1983 56.6760000
1984 56.7427561
1985 56.72302439
1986 56.59839024
1987 56.36843902
1988 56.04370732
1989 55.64026829
1990 55.17768293
1991 54.68197561
1992 54.18363415
1993 53.71407317
1994 53.29719512
1995 52.94941463
1996 52.67663415
1997 52.47173171
1998 52.33312195
1999 52.27121951
2000 52.30192683
2001 52.4412439
2002 52.69217073
2003 53.04880488
2004 53.49965854
2005 54.03329268
2006 54.63426829
2007 55.27617073
2008 55.93404878
2009 56.5844878
2010 57.20402439
2011 57.77521951
2012 58.29656098
2013 58.77
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Loading CSV Data with D3</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: #fff1e0;
font-family: Arial, sans-serif;
}
h1{
margin: 0;
font-size: 1.3em;
color: #43423E;
margin-bottom: 5px;
}
p{
font-size: 1em;
margin: 10px 0 0 0;
color: #777777;
line-height: 1.3em;
width: 660px;
}
circle{
fill: #8AB7C3;
}
circle:hover{
stroke-width: 8px;
stroke: rgba(231, 114, 101, .3);
fill:rgb(231, 114, 101);
}
.axis path,
.axis line {
fill: none;
stroke: #777777;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
fill: #777777;
}
a{
text-decoration: none;
}
.highlight-rwanda{
color:#649FAF;
}
.highlight-congo{
color:rgb(231, 114, 101);
}
#xAxis-title{
margin:0 auto;
padding: 10px;
text-align: center;
color: #777777;
}
.yText{
fill:#777777;
font-size: 1em;
}
.source{
margin: 0;
font-size: 12px;
color: #777777;
}
/*.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}*/
/*.x.axis path,*/
</style>
</head>
<body>
<h1>Rwanda and The Congo's life expectancy at birth, 1960-2013</h1>
<p>Total (years)</p>
<script type="text/javascript">
var w = 750;
var h = 505;
var padding = [50, 10, 70, 70];
var dateFormat = d3.time.format("%Y");
var xScale = d3.time.scale()
.range([ padding[3], w - padding[1] - padding[3] ]);
var yScale = d3.scale.linear()
.range([ padding[0], h - padding[2] ]);
var body = d3.select("body")
// var tip = d3.tip()
// .attr('class', 'd3-tip')
// .offset([-10, 0])
// .html(function(d) {
// return "<strong>Frequency:</strong> <span style='color:red'>" + d.lifeExpectancy + "</span>";
// })
var yAxis = d3.svg.axis()
.scale(yScale)
.orient('left');
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(18)
.tickFormat(function(d) {
return dateFormat(d);
});
var line=d3.svg.line()
.x(function(d){
return xScale(dateFormat.parse(d.year))
})
.y(function(d){
return yScale(d.lifeExpectancy);
})
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
// svg.call(tip);
//Load in contents of CSV file
//Load in contents of CSV file
d3.csv("rwanda-life-expectancy.csv", function(rwandaData) {
//Load congo data
d3.csv('congo-life-expectancy.csv', function(congoData) {
var mergeData=rwandaData.concat(congoData);
console.log(mergeData);
xScale.domain([
d3.min(mergeData, function(d){
return dateFormat.parse(d.year);
}),
d3.max(mergeData, function(d){
return dateFormat.parse(d.year);
})
]);
yScale.domain([
d3.max(mergeData, function(d){
return +d.lifeExpectancy;
}),
d3.min(mergeData, function(d){
return +d.lifeExpectancy;
})
]);
//.attr('height', data.length * 20 )
// var circles = svg.selectAll("circle")
// // .data(data)
// .enter()
// .append("circle")
// // .on('mouseover', tip.show)
// // .on('mouseout', tip.hide);
// circles.attr("cx", function(d){
// return xScale(dateFormat.parse(d.year)
// );
// })
// .attr("cy", function(d) {
// return yScale(d.lifeExpectancy);
// })
// .attr("r", 4)
// .attr('fill', 'steelblue' )
// .append("title")
// .text(function(d){
// return d.year +' has a life expectancy of ' + d.lifeExpectancy + ' years';
// });
svg.data([ rwandaData ])
.append("path")
.attr("class", "line rwanda")
.attr("d", line)
.attr("fill", "none")
.attr("stroke", "#8AB7C3")
.attr("stroke-width", 4)
.append("title")
.text(function(d) {
return "Rwanda life expectancy at birth";
});
svg.data([ congoData ])
.append("path")
.attr("class", "line congo")
.attr("d", line)
.attr("fill", "none")
.attr("stroke", "rgb(231, 114, 101)")
.attr("stroke-width", 4)
.append("title")
.text(function(d) {
return "Congo life expectancy at birth";
});
svg.append("text")
.attr("transform", "translate(675," + (h - padding[2]) + ")")
.attr("dy", "-23.5em")
.attr("text-anchor", "start")
.style("fill", "#8AB7C3")
.text("Rwanda");
svg.append("text")
.attr("transform", "translate(675," + (h - padding[2]) + ")")
.attr("dy", "-20.5em")
.attr("text-anchor", "start")
.style("fill", "rgb(231, 114, 101)")
.text("Congo");
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] -1) + ',0)')
.call(yAxis);
});
});
</script>
<p class="source">Source: <a href="http://www.worldbank.org/">The World Bank</a></p>
</body>
</html>
year lifeExpectancy
1960 42.24929268
1961 42.5487561
1962 42.83770732
1963 43.11312195
1964 43.37053659
1965 43.60141463
1966 43.79726829
1967 43.95960976
1968 44.09146341
1969 44.19982927
1970 44.29178049
1971 44.37234146
1972 44.45404878
1973 44.55739024
1974 44.69882927
1975 44.92778049
1976 45.29814634
1977 45.81536585
1978 46.45285366
1979 47.16263415
1980 47.91170732
1981 48.66863415
1982 49.3394878
1983 49.79685366
1984 49.90778049
1985 49.33426829
1986 47.6997561
1987 44.9517561
1988 41.25429268
1989 36.92197561
1990 32.61156098
1991 29.12631707
1992 27.06441463
1993 26.76378049
1994 28.25529268
1995 31.23919512
1996 35.13907317
1997 39.17553659
1998 42.73629268
1999 45.57268293
2000 47.64265854
2001 49.13078049
2002 50.43785366
2003 51.86207317
2004 53.45509756
2005 55.1924878
2006 56.9757561
2007 58.64790244
2008 60.09246341
2009 61.28002439
2010 62.21214634
2011 62.92241463
2012 63.49285366
2013 63.99397561
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment