Skip to content

Instantly share code, notes, and snippets.

@baderone

baderone/README.md

Created January 20, 2016 08:19
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/7cbb7eba3347d39cfd1b to your computer and use it in GitHub Desktop.
Save baderone/7cbb7eba3347d39cfd1b to your computer and use it in GitHub Desktop.
Download ZIP
04 Kursbeispiel - Multiple Lines and series - WEBMAP 2016
Raw
README.md

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

Raw
debts_series.csv
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
Raw
index.html
<!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