D3 js based example for line chart used for students course on webvisualizations - WEBMAP 2016
Die Daten findet Ihr hier: http://data.worldbank.org/indicator/DT.TDS.MLAT.CD
| 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 |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <!-- Example based on D3 online course from Knight Center see journalismcourses.org/D3.html, thanks to Scott Murray --> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Line Chart - WEBMAP Kurs 2016</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 (Weltbank)</h1> | |
| <p>Boliviens Schulden bei Entwicklungsbanken, 1970-2013. Source: <a target="_blank" href="http://data.worldbank.org/indicator/DT.TDS.MLAT.CD">World Bank</a>, 2014</p> | |
| <script type="text/javascript"> | |
| var w = 500; | |
| var h = 400; | |
| 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 | |
| ]); | |
| svg.data([ data ]) | |
| .append("path") | |
| .attr("class", "line bolivia") | |
| .attr("d", line) | |
| .attr("fill", "none") | |
| .attr("stroke", "steelblue") | |
| .attr("stroke-width", 2); | |
| 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> |