|
<!DOCTYPE html> |
|
<html lang="en"> |
|
|
|
<!-- Example based on D3 online course from Knight Center see journalismcourses.org/D3.html --> |
|
|
|
<head> |
|
<meta charset="utf-8"> |
|
<title>Line Chart with Two Lines</title> |
|
<script type="text/javascript" src="http://d3js.org/d3.v3.min.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; |
|
} |
|
|
|
</style> |
|
</head> |
|
<body> |
|
|
|
<h1>Bolivien und Kolumbien - Schulden an Entwicklungsbanken</h1> |
|
|
|
<p>The <strong style="color: steelblue;">Bolivien’s</strong> and <strong style="color: red;">Kolumbien’s</strong> Schulden an Entwicklungsbanken, 1970-2013. Source: <a href="http://data.worldbank.org/indicator/EN.ATM.CO2E.KT?page=6">World Bank</a>, 2014</p> |
|
|
|
<script type="text/javascript"> |
|
|
|
|
|
//Dimensions and padding |
|
var w = 700; |
|
var h = 600; |
|
var padding = [ 20, 10, 50, 100 ]; //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(15) |
|
.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.debt); |
|
}); |
|
|
|
|
|
|
|
//Create the empty SVG image |
|
var svg = d3.select("body") |
|
.append("svg") |
|
.attr("width", w) |
|
.attr("height", h); |
|
|
|
|
|
|
|
//Load Bolivia data |
|
d3.csv("debt_bolivia.csv", function(boliviaData) { |
|
|
|
//Load Colombia data |
|
d3.csv("debt_colombia.csv", function(colombiaData) { |
|
|
|
//Create a new array that contains both the |
|
//Bolivia and Colombia data, merged into one |
|
var mergedData = boliviaData.concat(colombiaData); |
|
//console.log(mergedData); |
|
|
|
//Use the newly merged data to determine the |
|
//min and max values, for setting scale domains |
|
xScale.domain([ |
|
d3.min(mergedData, function(d) { |
|
return dateFormat.parse(d.year); |
|
}), |
|
d3.max(mergedData, function(d) { |
|
return dateFormat.parse(d.year); |
|
}) |
|
]); |
|
|
|
yScale.domain([ |
|
d3.max(mergedData, function(d) { |
|
return +d.debt; |
|
}), |
|
0 |
|
]); |
|
|
|
|
|
|
|
//Lines |
|
// |
|
// Note data is wrapped in another array, so all its |
|
// values are bound to a single element (the line!) |
|
// |
|
svg.data([ boliviaData ]) |
|
.append("path") |
|
.attr("class", "line bolivia") |
|
.attr("d", line) |
|
.attr("fill", "none") |
|
.attr("stroke", "steelblue") |
|
.attr("stroke-width", 2); |
|
|
|
svg.data([ colombiaData ]) |
|
.append("path") |
|
.attr("class", "line colombia") |
|
.attr("d", line) |
|
.attr("fill", "none") |
|
.attr("stroke", "red") |
|
.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 Colombia data load function |
|
|
|
}); |
|
//End Bolivia data load function |
|
|
|
|
|
</script> |
|
|
|
</body> |
|
</html> |