index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Loading CSV Data with D3</title>
<script type="text/javascript" src="//d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: #fff1e0;
font-family: Arial, sans-serif;
}
h1{
margin: 0;
width:750px;
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);
}
.y.axis line{
stroke-dasharray: 2,2;
}
#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;
}
.y.axis path {
display: none;
}
</style>
</head>
<body>
<script type="text/javascript">
var w = 750;
var h = 505;
var padding = [50, 10, 50, 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 yAxis = d3.svg.axis()
.scale(yScale)
.orient('left')
.tickSize(-w + padding[3] + padding[0] + 28);
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);
d3.csv("rwanda-life-expectancy.csv", function(rwandaData) {
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;
})
]);
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);
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", "-25.0em")
.attr("text-anchor", "start")
.style("fill", "#8AB7C3")
.text("Rwanda");
svg.append("text")
.attr("transform", "translate(675," + (h - padding[2]) + ")")
.attr("dy", "-21.5em")
.attr("text-anchor", "start")
.style("fill", "rgb(231, 114, 101)")
.text("Congo");
});
});
</script>
<p class="source">Source: <a href="//www.worldbank.org/">The World Bank</a></p>
</body>
</html>
congo-life-expectancy.csv
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
rwanda-life-expectancy.csv
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