Skip to content

Instantly share code, notes, and snippets.

@baderone

baderone/README.md

Last active January 19, 2016 08:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save baderone/85b1f532e5a43ba47f9a to your computer and use it in GitHub Desktop.
Save baderone/85b1f532e5a43ba47f9a to your computer and use it in GitHub Desktop.
Download ZIP
03 Kursbeispiel - Two Lines - WEBMAP 2016
Raw
README.md

Nun wollen wir eine zweite Datenlinie einfügen.

  1. Sucht Euch ein zweites Land aus der Datenbank aus
  2. Erstellt ein zweite .csv Datei
  3. Passt den Code so an, dass er für eure ausgesuchten Länder passt
Raw
debt_bolivia.csv
year debt
1970 5450000
1971 6277000
1972 8635000
1973 9815000
1974 11391000
1975 10304000
1976 15562000
1977 17134000
1978 22635000
1979 26684000
1980 33202000
1981 41312000
1982 50328000
1983 51316000
1984 83250000
1985 113833000
1986 119913000
1987 117884000
1988 138700000
1989 184243000
1990 192563000
1991 162120000
1992 171487000
1993 193977000
1994 206433000
1995 225649000
1996 244340000
1997 254852000
1998 284287000
1999 192704000
2000 203557000
2001 191821000
2002 194120000
2003 238756000
2004 237421000
2005 254235000
2006 273370000
2007 226758000
2008 430489000
2009 214685000
2010 172840000
2011 184355000
2012 194946000
2013 213650000
Raw
debt_colombia.csv
year debt
1970 52279000
1971 62594000
1972 72949000
1973 90547000
1974 105479000
1975 110615000
1976 119258000
1977 139025000
1978 166093000
1979 179104000
1980 201807000
1981 225288000
1982 274724000
1983 319555000
1984 362386000
1985 445645000
1986 646037000
1987 813520000
1988 920737000
1989 895480000
1990 1024461000
1991 1112866000
1992 1284898000
1993 1388553000
1994 1738944000
1995 1048679000
1996 991642000
1997 1161776000
1998 738032000
1999 864616000
2000 864870000
2001 843949000
2002 1258422000
2003 1555391000
2004 1342043000
2005 2462516000
2006 1417398000
2007 1772446000
2008 1265666000
2009 1281333000
2010 1472197000
2011 1494390000
2012 1530646000
2013 1547538000
Raw
index.html
<!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&rsquo;s</strong> and <strong style="color: red;">Kolumbien&rsquo;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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment