In diesem Beispiel werden mehrere Länder dargestellt sowie zwei verschiedene Datensätze. Diese Beispiel könnt Ihr beliebig weiterentwickeln mit mehr Ländern oder Datensätzen
Created
January 20, 2016 08:19
-
-
Save baderone/7cbb7eba3347d39cfd1b to your computer and use it in GitHub Desktop.
04 Kursbeispiel - Multiple Lines and series - WEBMAP 2016
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
indicator | indicatorCode | year | yearCode | Afghanistan | Bangladesh | Bolivia | Botswana | Cambodia | Colombia | Ethiopia | |
---|---|---|---|---|---|---|---|---|---|---|---|
mlatdebt | 1 | 1970 | Y1970 | 0 | 0 | 5450000 | 27000 | 0 | 52279000 | 5890000 | |
mlatdebt | 1 | 1971 | Y1971 | 0 | 0 | 6277000 | 42000 | 0 | 62594000 | 6007000 | |
mlatdebt | 1 | 1972 | Y1972 | 0 | 0 | 8635000 | 665000 | 0 | 72949000 | 6482000 | |
mlatdebt | 1 | 1973 | Y1973 | 0 | 440000 | 9815000 | 1553000 | 0 | 90547000 | 7964000 | |
mlatdebt | 1 | 1974 | Y1974 | 0 | 917000 | 11391000 | 2253000 | 0 | 105479000 | 8761000 | |
mlatdebt | 1 | 1975 | Y1975 | 0 | 2104000 | 10304000 | 3058000 | 0 | 110615000 | 9578000 | |
mlatdebt | 1 | 1976 | Y1976 | 0 | 7130000 | 15562000 | 3639000 | 0 | 119258000 | 9855000 | |
mlatdebt | 1 | 1977 | Y1977 | 0 | 8225000 | 17134000 | 4094000 | 0 | 139025000 | 10621000 | |
mlatdebt | 1 | 1978 | Y1978 | 0 | 9923000 | 22635000 | 7081000 | 0 | 166093000 | 10431000 | |
mlatdebt | 1 | 1979 | Y1979 | 0 | 13377000 | 26684000 | 7830000 | 0 | 179104000 | 11083000 | |
mlatdebt | 1 | 1980 | Y1980 | 0 | 12106000 | 33202000 | 10381000 | 0 | 201807000 | 12514000 | |
mlatdebt | 1 | 1981 | Y1981 | 0 | 14950000 | 41312000 | 6697000 | 0 | 225288000 | 10851000 | |
mlatdebt | 1 | 1982 | Y1982 | 0 | 27367000 | 50328000 | 9647000 | 0 | 274724000 | 12556000 | |
mlatdebt | 1 | 1983 | Y1983 | 0 | 37677000 | 51316000 | 11576000 | 0 | 319555000 | 13263000 | |
mlatdebt | 1 | 1984 | Y1984 | 0 | 51994000 | 83250000 | 13563000 | 0 | 362386000 | 14522000 | |
mlatdebt | 1 | 1985 | Y1985 | 0 | 53984000 | 113833000 | 20094000 | 0 | 445645000 | 17260000 | |
mlatdebt | 1 | 1986 | Y1986 | 0 | 78090000 | 119913000 | 31625000 | 0 | 646037000 | 23160000 | |
mlatdebt | 1 | 1987 | Y1987 | 0 | 94984000 | 117884000 | 51730000 | 0 | 813520000 | 28523000 | |
mlatdebt | 1 | 1988 | Y1988 | 0 | 82734000 | 138700000 | 51017000 | 0 | 920737000 | 31686000 | |
mlatdebt | 1 | 1989 | Y1989 | 0 | 88563000 | 184243000 | 48255000 | 0 | 895480000 | 33706000 | |
mlatdebt | 1 | 1990 | Y1990 | 0 | 112948000 | 192563000 | 64392000 | 0 | 1024461000 | 29301000 | |
mlatdebt | 1 | 1991 | Y1991 | 0 | 127979000 | 162120000 | 61828000 | 0 | 1112866000 | 42000000 | |
mlatdebt | 1 | 1992 | Y1992 | 0 | 132738000 | 171487000 | 74403000 | 738000 | 1284898000 | 41902000 | |
mlatdebt | 1 | 1993 | Y1993 | 0 | 140278000 | 193977000 | 69982000 | 12000 | 1388553000 | 42560000 | |
mlatdebt | 1 | 1994 | Y1994 | 0 | 154827000 | 206433000 | 74611000 | 308000 | 1738944000 | 53059000 | |
mlatdebt | 1 | 1995 | Y1995 | 0 | 190737000 | 225649000 | 69345000 | 696000 | 1048679000 | 64111000 | |
mlatdebt | 1 | 1996 | Y1996 | 0 | 195644000 | 244340000 | 112317000 | 1017000 | 991642000 | 72338000 | |
mlatdebt | 1 | 1997 | Y1997 | 0 | 206817000 | 254852000 | 67495000 | 1821000 | 1161776000 | 75372000 | |
mlatdebt | 1 | 1998 | Y1998 | 0 | 216276000 | 284287000 | 58398000 | 1905000 | 738032000 | 78867000 | |
mlatdebt | 1 | 1999 | Y1999 | 0 | 248240000 | 192704000 | 57093000 | 2435000 | 864616000 | 91926000 | |
mlatdebt | 1 | 2000 | Y2000 | 0 | 260835000 | 203557000 | 44266000 | 2788000 | 864870000 | 89315000 | |
mlatdebt | 1 | 2001 | Y2001 | 0 | 275200000 | 191821000 | 35941000 | 3225000 | 843949000 | 91955000 | |
mlatdebt | 1 | 2002 | Y2002 | 0 | 303099000 | 194120000 | 41511000 | 4433000 | 1258422000 | 45580000 | |
mlatdebt | 1 | 2003 | Y2003 | 0 | 345482000 | 238756000 | 33885000 | 7782000 | 1555391000 | 52533000 | |
mlatdebt | 1 | 2004 | Y2004 | 0 | 418928000 | 237421000 | 33231000 | 11688000 | 1342043000 | 67855000 | |
mlatdebt | 1 | 2005 | Y2005 | 0 | 422951000 | 254235000 | 36111000 | 15045000 | 2462516000 | 43438000 | |
mlatdebt | 1 | 2006 | Y2006 | 9260000 | 464751000 | 273370000 | 36967000 | 19152000 | 1417398000 | 58738000 | |
mlatdebt | 1 | 2007 | Y2007 | 4514000 | 527048000 | 226758000 | 30646000 | 21820000 | 1772446000 | 51367000 | |
mlatdebt | 1 | 2008 | Y2008 | 7292000 | 595492000 | 430489000 | 30519000 | 30288000 | 1265666000 | 49578000 | |
mlatdebt | 1 | 2009 | Y2009 | 7411000 | 633379000 | 214685000 | 26634000 | 36402000 | 1281333000 | 46769000 | |
mlatdebt | 1 | 2010 | Y2010 | 7979000 | 658012000 | 172840000 | 53120000 | 43371000 | 1472197000 | 54128000 | |
mlatdebt | 1 | 2011 | Y2011 | 9749000 | 730930000 | 184355000 | 32575000 | 54135000 | 1494390000 | 66730000 | |
mlatdebt | 1 | 2012 | Y2012 | 9159000 | 794648000 | 194946000 | 34386000 | 56842000 | 1530646000 | 73532000 | |
mlatdebt | 1 | 2013 | Y2013 | 11674000 | 1040882000 | 213650000 | 161633000 | 64685000 | 1547538000 | 82679000 | |
iwfdebt | 2 | 1970 | Y1970 | 0 | 0 | 0 | 0 | 72650000 | 0 | ||
iwfdebt | 2 | 1971 | Y1971 | 0 | 4012000 | 0 | 0 | 31801000 | 0 | ||
iwfdebt | 2 | 1972 | Y1972 | 0 | 0 | 3257000 | 0 | 0 | 57814000 | 0 | |
iwfdebt | 2 | 1973 | Y1973 | 0 | 0 | 9539000 | 0 | 0 | 47351000 | 0 | |
iwfdebt | 2 | 1974 | Y1974 | 0 | 2008000 | 4966000 | 0 | 0 | 0 | 0 | |
iwfdebt | 2 | 1975 | Y1975 | 0 | 33002000 | 6768000 | 0 | 0 | 0 | 0 | |
iwfdebt | 2 | 1976 | Y1976 | 0 | 72844000 | 23737000 | 0 | 0 | 0 | 0 | |
iwfdebt | 2 | 1977 | Y1977 | 0 | 63293000 | 1109000 | 0 | 0 | 0 | 0 | |
iwfdebt | 2 | 1978 | Y1978 | 0 | 37104000 | 2632000 | 0 | 0 | 0 | 30000 | |
iwfdebt | 2 | 1979 | Y1979 | 0 | 95695000 | 979000 | 0 | 0 | 0 | 66000 | |
iwfdebt | 2 | 1980 | Y1980 | 0 | 146592000 | 2500000 | 0 | 0 | 0 | 2068000 | |
iwfdebt | 2 | 1981 | Y1981 | 0 | 66552000 | 8666000 | 0 | 0 | 0 | 3763000 | |
iwfdebt | 2 | 1982 | Y1982 | 0 | 70740000 | 15609000 | 0 | 0 | 0 | 11195000 | |
iwfdebt | 2 | 1983 | Y1983 | 0 | 59982000 | 19252000 | 0 | 0 | 0 | 29111000 | |
iwfdebt | 2 | 1984 | Y1984 | 0 | 105067000 | 31035000 | 0 | 0 | 0 | 36121000 | |
iwfdebt | 2 | 1985 | Y1985 | 0 | 123840000 | 28897000 | 0 | 0 | 0 | 42179000 | |
iwfdebt | 2 | 1986 | Y1986 | 0 | 184786000 | 42490000 | 0 | 22000 | 0 | 42385000 | |
iwfdebt | 2 | 1987 | Y1987 | 0 | 206268000 | 43292000 | 0 | 13000 | 0 | 24932000 | |
iwfdebt | 2 | 1988 | Y1988 | 0 | 141404000 | 67022000 | 0 | 47000 | 0 | 20847000 | |
iwfdebt | 2 | 1989 | Y1989 | 0 | 167756000 | 23860000 | 0 | 24000 | 0 | 26723000 | |
iwfdebt | 2 | 1990 | Y1990 | 0 | 244546000 | 58587000 | 0 | 26000 | 0 | 27187000 | |
iwfdebt | 2 | 1991 | Y1991 | 0 | 163966000 | 53456000 | 0 | 27000 | 0 | 6371000 | |
iwfdebt | 2 | 1992 | Y1992 | 0 | 96965000 | 41335000 | 0 | 11290000 | 0 | 17000 | |
iwfdebt | 2 | 1993 | Y1993 | 0 | 95860000 | 30630000 | 0 | 33361000 | 0 | 156000 | |
iwfdebt | 2 | 1994 | Y1994 | 0 | 58465000 | 15515000 | 0 | 524000 | 0 | 126000 | |
iwfdebt | 2 | 1995 | Y1995 | 0 | 64421000 | 27453000 | 0 | 728000 | 0 | 335000 | |
iwfdebt | 2 | 1996 | Y1996 | 0 | 88398000 | 33553000 | 0 | 709000 | 0 | 359000 | |
iwfdebt | 2 | 1997 | Y1997 | 0 | 116801000 | 35598000 | 0 | 684000 | 0 | 407000 | |
iwfdebt | 2 | 1998 | Y1998 | 0 | 102961000 | 36403000 | 0 | 2075000 | 0 | 4497000 | |
iwfdebt | 2 | 1999 | Y1999 | 1415000 | 101936000 | 25418000 | 231000 | 4715000 | 6064000 | 10739000 | |
iwfdebt | 2 | 2000 | Y2000 | 1529000 | 95514000 | 22605000 | 250000 | 8381000 | 6438000 | 14099000 | |
iwfdebt | 2 | 2001 | Y2001 | 758000 | 67494000 | 22465000 | 124000 | 13010000 | 3237000 | 12676000 | |
iwfdebt | 2 | 2002 | Y2002 | 693000 | 92307000 | 18772000 | 113000 | 13133000 | 3039000 | 12264000 | |
iwfdebt | 2 | 2003 | Y2003 | 586000 | 75756000 | 20934000 | 96000 | 14077000 | 2539000 | 9389000 | |
iwfdebt | 2 | 2004 | Y2004 | 879000 | 2411000 | 26271000 | 143000 | 11369000 | 3776000 | 10226000 | |
iwfdebt | 2 | 2005 | Y2005 | 1156000 | 3296000 | 47158000 | 189000 | 9780000 | 4850000 | 5144000 | |
iwfdebt | 2 | 2006 | Y2006 | 1635000 | 4971000 | 3392000 | 267000 | 950000 | 7067000 | 695000 | |
iwfdebt | 2 | 2007 | Y2007 | 1640000 | 5038000 | 16759000 | 236000 | 833000 | 6268000 | 603000 | |
iwfdebt | 2 | 2008 | Y2008 | 739000 | 15284000 | 337000 | 55000 | 195000 | 1413000 | 141000 | |
iwfdebt | 2 | 2009 | Y2009 | 1069000 | 30994000 | 592000 | 207000 | 303000 | 2722000 | 865000 | |
iwfdebt | 2 | 2010 | Y2010 | 777000 | 50814000 | 809000 | 283000 | 414000 | 3663000 | 648000 | |
iwfdebt | 2 | 2011 | Y2011 | 262000 | 134940000 | 277000 | 97000 | 142000 | 1245000 | 216000 | |
iwfdebt | 2 | 2012 | Y2012 | 3814000 | 200050000 | 75000 | 26000 | 38000 | 338000 | 59000 | |
iwfdebt | 2 | 2013 | Y2013 | 12954000 | 141107000 | 325000 | 114000 | 166000 | 1464000 | 254000 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<!-- Many thanks to the Object constancy with multiple sets of time-series example, please see here: http://bl.ocks.org/nsonnad/4175202 --> | |
<head> | |
<title> Type title here </title> | |
<script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script> | |
<style> | |
@import url(stylechart.css); | |
body { | |
font: 14px sans-serif; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.x.axis path { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.line { | |
fill: none; | |
stroke-width: 5px; | |
} | |
#SideText { | |
position: absolute; | |
display: block; | |
font-size: 12px; | |
color: #474747; | |
top: 500px; | |
left: 10px; | |
width: 550px; | |
} | |
.country {opacity: 0.2;} | |
.country:hover {opacity:1;} | |
</style> | |
</head> | |
<body> | |
<div> | |
<input type="checkbox" id="South America" onclick="samericalight()">South America</input> | |
<input type="checkbox" id="Africa" onclick="africalight()">Africa</input> | |
<input type="checkbox" id="Asia" onclick="asialight()">Asia</input> | |
</div> | |
<script language="JavaScript"> | |
myarr=new Array () | |
myarr[1]="Schulden an Weltbank usw" | |
myarr[2]="Schulden an IWF" | |
function doIt(objval) | |
{ | |
document.getElementById("msg").innerHTML=myarr[objval] | |
} | |
</script> | |
<p id="menu"><br>Select series: <select OnChange="doIt(this.options[this.selectedIndex].value)"> | |
<option value="1">Weltbank</option> | |
<option value="2">IWF</option></select> | |
<br><br> | |
<div id="SideText"> | |
<p id="p0" class="Side" style="opacity: 1;"><b>How to read</b></p> | |
<span id="msg">Schulden an Weltbank usw</span> | |
<br><br> | |
<p>We used <a href="http://d3js.org/" target="_blank">D3.js</a> and modified the <a href="http://bl.ocks.org/nsonnad/4175202" target="_blank">Object constancy with multiple sets of time-series example</a> from nsonnad's block #4175202</p> | |
</div> | |
<script type="text/javascript"> | |
// set the stage for the visualization | |
var margin = {top: 20, right: 90, bottom: 30, left: 100}, | |
w = 700 - margin.left - margin.right, | |
h = 400 - margin.top - margin.bottom, | |
x = d3.time.scale().range([0, w]), | |
y = d3.scale.linear().range([h, 0]); | |
parseDate = d3.time.format("%Y").parse; | |
//var color = d3.scale.category20b(); // to generate a different color for each line | |
var color = d3.scale.ordinal() | |
.domain(["Afghanistan","Bangladesh","Bhutan","Bolivia","Botswana","Cambodia","Colombia","Ethiopia"]) | |
.range(["#a63603","#c6dbef","#6baed6","#2171b5","#084594","#fd8d3c","#d94801", "#bae4b3"]); | |
// to be used later | |
var countries, | |
filtered, | |
transpose; | |
// where the line gets its properties, how it will be interpolated | |
var line = d3.svg.line() | |
.interpolate("basis") | |
.x(function(d) { return x(d.year); }) | |
.y(function(d) { return y(d.stat); }); | |
// add svg box where viz will go | |
var svg = d3.select("body").append("svg") | |
.attr("width", w + margin.left + margin.right) | |
.attr("height", h + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
// define the x axis and its class, append it to svg | |
var xAxis = d3.svg.axis() | |
.scale(x) | |
.orient("bottom") | |
svg.append("svg:g") | |
.attr("class", "x axis"); | |
// define the y axis and its class, append it to svg | |
var yAxis = d3.svg.axis() | |
.scale(y) | |
.orient("left") | |
svg.append("svg:g") | |
.attr("class", "y axis"); | |
// force data to update when menu is changed | |
var menu = d3.select("#menu select") | |
.on("change", change); | |
// put data from csv into countries variable | |
//run redraw function that will refresh whenever a new data series is selected | |
d3.csv("debts_series.csv", function(csv) { | |
countries = csv; | |
redraw(); | |
}); | |
d3.select(window) | |
.on("keydown", function() { altKey = d3.event.altKey; }) | |
.on("keyup", function() { altKey = false; }); | |
var altKey; | |
var sel = document.getElementById('menu'); | |
console.log(sel.options[sel.selectedIndex].value) | |
// set terms of transition that will take place | |
// when a new economic indicator is chosen | |
function change() { | |
clearTimeout(timeout); | |
d3.transition() | |
.duration(altKey ? 7500 : 1500) | |
.each(redraw); | |
} | |
// all the meat goes in the redraw function | |
function redraw() { | |
// create data nests based on economic indicator (series) | |
var nested = d3.nest() | |
.key(function(d) { return d.indicatorCode; }) | |
.map(countries) | |
// get value from menu selection | |
// the option values are set in HTML and correspond | |
//to the [indicatorCode] value we used to nest the data | |
var series = menu.property("value"); | |
// only retrieve data from the selected series, using the nest we just created | |
var data = nested[series]; | |
// for object constancy we will need to set "keys", one for each country. | |
// the keyring variable contains only the names of the countries | |
var keyring = d3.keys(data[0]).filter(function(key) { | |
return (key !== "indicator" && key !== "yearCode" && key !== "indicatorCode" && key !== "year"); | |
}); | |
// get the year and related statistics, map them to each country separately | |
var transpose = keyring.map(function(name) { | |
return { | |
name: name, | |
values: data.map(function(d) { | |
return {year: parseDate(d.year), stat: +d[name]}; | |
}) | |
}; | |
}); | |
// set the x and y domains as the max and min | |
// of the related year and statistics, respectively | |
x.domain([ | |
d3.min(transpose, function(c) { return d3.min(c.values, function(v) { return v.year; }); }), | |
d3.max(transpose, function(c) { return d3.max(c.values, function(v) { return v.year; }); }) | |
]); | |
y.domain([ | |
d3.min(transpose, function(c) { return d3.min(c.values, function(v) { return v.stat; }); }), | |
d3.max(transpose, function(c) { return d3.max(c.values, function(v) { return v.stat; }); }) | |
]); | |
// announce to d3 that we will be using something called | |
// "country" that makes use of the transposed data | |
var country = svg.selectAll(".country") | |
.data(transpose); | |
// create separate groups for each country | |
// assign them a class and individual IDs (for styling) | |
var countryEnter = country.enter().append("g") | |
.attr("class", "country") | |
.attr("id", function(d) { return d.name; }); | |
// draw the lines and color them according to their names | |
countryEnter.append("path") | |
.attr("class", "line") | |
.attr("d", function(d) { return line(d.values); }) | |
.style("stroke", function(d) { return color(d.name); }); | |
// create lables for each country | |
// set their position to that of the last year and stat | |
countryEnter.append("text") | |
.attr("class", "names") | |
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; }) | |
.attr("transform", function(d) { return "translate(" + x(d.value.year) + "," + y(d.value.stat) + ")"; }) | |
.attr("x", 5) | |
.attr("dy", ".30em") | |
.text(function(d) { return d.name; }); | |
// set variable for updating visualization | |
var countryUpdate = d3.transition(country); | |
// change values of path to those of the new series | |
countryUpdate.select("path") | |
.attr("d", function(d) { return line(d.values); }); | |
// change position of text alongside the moving path | |
countryUpdate.select("text") | |
.attr("transform", function(d) { return "translate(" + x(d.values[d.values.length - 1].year) + "," + y(d.values[d.values.length - 1].stat) + ")"; }); | |
// update the axes, though only the y axis will change | |
d3.transition(svg).select(".y.axis") | |
.call(yAxis); | |
d3.transition(svg).select(".x.axis") | |
.attr("transform", "translate(0," + h + ")") | |
.call(xAxis); | |
// that concludes redraw() | |
} | |
// automatically change value after a few seconds | |
var timeout = setTimeout(function() { | |
menu.property("value", "1").node().focus(); | |
change(); | |
}, 7000); | |
// ugly javascript for highlighting the two groups of countries | |
function asialight() { | |
var chkbox = document.getElementById("Asia"); | |
if (chkbox.checked) { | |
document.getElementById("Cambodia").style.cssText = "opacity:1;", | |
document.getElementById("Bangladesh").style.cssText = "opacity:1;", | |
document.getElementById("Afghanistan").style.cssText = "opacity:1;" | |
} else { | |
document.getElementById("Botswana").style.cssText = "", | |
document.getElementById("Colombia").style.cssText = "", | |
document.getElementById("Bolivia").style.cssText = "", | |
document.getElementById("Ethiopia").style.cssText = ""; | |
}}; | |
function samericalight() { | |
var chkbox = document.getElementById("South America") | |
if (chkbox.checked) { | |
document.getElementById("Colombia").style.cssText = "opacity:1;", | |
document.getElementById("Bolivia").style.cssText = "opacity:1;" | |
} else { | |
document.getElementById("Cambodia").style.cssText = "", | |
document.getElementById("Bangladesh").style.cssText = "", | |
document.getElementById("Afghanistan").style.cssText = "", | |
document.getElementById("Botswana").style.cssText = "", | |
document.getElementById("Ethiopia").style.cssText = ""; | |
}}; | |
function africalight() { | |
var chkbox = document.getElementById("Africa") | |
if (chkbox.checked) { | |
document.getElementById("Botswana").style.cssText = "opacity:1;", | |
document.getElementById("Ethiopia").style.cssText = "opacity:1;" | |
} else { | |
document.getElementById("Cambodia").style.cssText = "", | |
document.getElementById("Bangladesh").style.cssText = "", | |
document.getElementById("Afghanistan").style.cssText = "", | |
document.getElementById("Colombia").style.cssText = "", | |
document.getElementById("Bolivia").style.cssText = ""; | |
}}; | |
// done! | |
</script> | |
</body> | |
</html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment