|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>Line Chart</title> |
|
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> |
|
<style type="text/css"> |
|
|
|
/* |
|
Hier werden alle visuellen Einstellungen vorgenommen. Alternativ kann auch ein style.css verlinkt werden |
|
*/ |
|
|
|
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 seine Schulden an Entwicklungsbanken</h1> |
|
|
|
<p>Boliviens Schulden bei 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"> |
|
|
|
|
|
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"); |
|
|
|
|
|
|
|
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 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"); |
|
|
|
|
|
|
|
var line = d3.svg.line() |
|
.x(function(d) { |
|
return xScale(dateFormat.parse(d.year)); |
|
}) |
|
.y(function(d) { |
|
return yScale(d.debt); |
|
}); |
|
|
|
|
|
|
|
var svg = d3.select("body") |
|
.append("svg") |
|
.attr("width", w) |
|
.attr("height", h); |
|
|
|
|
|
|
|
d3.csv("debt_bolivia.csv", function(data) { |
|
|
|
xScale.domain([ |
|
d3.min(data, function(d) { |
|
return dateFormat.parse(d.year); |
|
}), |
|
d3.max(data, function(d) { |
|
return dateFormat.parse(d.year); |
|
}) |
|
]); |
|
|
|
yScale.domain([ |
|
d3.max(data, function(d) { |
|
return +d.debt; |
|
}), |
|
0 |
|
]); |
|
|
|
// var circles = svg.selectAll("circle") |
|
// .data(data) |
|
// .enter() |
|
// .append("circle"); |
|
|
|
// circles.attr("cx", function(d) { |
|
// return xScale(dateFormat.parse(d.year)); |
|
// }) |
|
// .attr("cy", function(d) { |
|
// return yScale(d.debt); |
|
// }) |
|
// .attr("r", 4) |
|
// .attr("fill", "steelblue") |
|
// .append("title") |
|
// .text(function(d) { |
|
// return d.year + " debt: " + d.debt + " kt"; |
|
// }); |
|
|
|
//Line |
|
// |
|
// Note data is wrapped in another array, so all its |
|
// values are bound to a single element (the line!) |
|
// |
|
|
|
var circles = svg.selectAll("circle") |
|
.data(data) |
|
.enter() |
|
.append("circle"); |
|
|
|
svg.data([ data ]) |
|
.append("path") |
|
.attr("class", "line bolivia") |
|
.attr("d", line) |
|
.attr("fill", "none") |
|
.attr("stroke", "steelblue") |
|
.attr("stroke-width", 2); |
|
|
|
svg.data([ data ]) |
|
.append("circle") |
|
circles.attr("cx", function(d) { |
|
return xScale(dateFormat.parse(d.year)); |
|
}) |
|
.attr("cy", function(d) { |
|
return yScale(d.debt); |
|
}) |
|
.attr("r", 4) |
|
.attr("fill", "steelblue") |
|
.append("title") |
|
.text(function(d) { |
|
return d.year + " debt: " + d.debt + " $"; |
|
}); |
|
|
|
svg.append("g") |
|
.attr("class", "x axis") |
|
.attr("transform", "translate(0," + (h - padding[2] + 10) + ")") |
|
.call(xAxis); |
|
|
|
svg.append("g") |
|
.attr("class", "y axis") |
|
.attr("transform", "translate(" + (padding[3] - 10) + ",0)") |
|
.call(yAxis); |
|
|
|
}); |
|
|
|
|
|
</script> |
|
|
|
</body> |
|
</html> |
