Skip to content

Instantly share code, notes, and snippets.

@baderone

baderone/README.md

Last active January 21, 2016 20:03
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/03b12bff8779d3b9724c to your computer and use it in GitHub Desktop.
Save baderone/03b12bff8779d3b9724c to your computer and use it in GitHub Desktop.
Download ZIP
Kursbeispiel - Livia - WEBMAP 2016
Raw
README.md

Ein Beispiel von Mittwoch Nachmittag

Raw
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
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Livia's 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;
}
circle:not(.circles1){
fill: lightsalmon;
}
circle:not(.circles2){
fill: lightsteelblue;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
svg {
background-color: white;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
div.tooltip {
position: absolute;
text-align: center;
width: 200px;
height: 28px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 7px;
border-radius: 8px;
pointer-events: none;
}
</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 = 900;
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 div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
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("bolivia.csv", function(bolivia) {
d3.csv("peru.csv", function(peru){
var mergedData=bolivia.concat(peru);
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
]);
/*var circles = svg.selectAll("circleBolivia")
.data(mergedData)
.enter()
.append("circleBolivia");*/
var circles = svg.selectAll("circle")
.data(mergedData)
.enter()
.append("circle");
var circlesB = svg.selectAll("circle")
.data(bolivia)
.attr("class", "circles1")
.enter()
.append("circle");
var circlesP = svg.selectAll("circle:not(.circles1)")
.data(peru)
.attr("class", "circles2")
.enter()
.append("circle");
//Linien (Farbe etc)
svg.data([ bolivia ])
.append("path")
.attr("class", "line bolivia")
.attr("d", line)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 2);
svg.data([ peru ])
.append("path")
.attr("class", "line peru")
.attr("d", line)
.attr("fill", "none")
.attr("stroke", "salmon")
.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);
//Punkte
svg.data([ mergedData ])
.append("circle")
circles.attr("cx", function(d) {
return xScale(dateFormat.parse(d.year));
})
.attr("cy", function(d) {
return yScale(d.debt);
})
.attr("r", 5)
.attr("fill", "lightsteelblue")
.on("mouseover", function(d) {
d3.select(this).attr("r",8);
div.transition()
.duration(200)
.style("opacity", .9);
div.html("Jahr: " + d.year + "<br/>" + "Schulden: "+ d.debt + " US$")
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
d3.select(this).attr("r",5)
});
}); //End peru
}); //End bolivia
</script>
</body>
Raw
peru.csv
year debt
1970 23303000
1971 26167000
1972 29190000
1973 33266000
1974 35174000
1975 34334000
1976 36031000
1977 40511000
1978 49461000
1979 56669000
1980 72710000
1981 90261000
1982 102455000
1983 125282000
1984 147846000
1985 174534000
1986 234380000
1987 168969000
1988 73809000
1989 66799000
1990 52017000
1991 712297000
1992 416531000
1993 1248203000
1994 417901000
1995 455723000
1996 455248000
1997 507760000
1998 519631000
1999 586449000
2000 886217000
2001 709336000
2002 732233000
2003 784862000
2004 830495000
2005 912057000
2006 1039621000
2007 1435231000
2008 1367978000
2009 968147000
2010 2123870000
2011 779626000
2012 971611000
2013 2372707000
2014 489840000
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment