Created
May 1, 2015 14:52
-
-
Save FrieseWoudloper/eff54dd4ebd5ca95a07a to your computer and use it in GitHub Desktop.
Exercise module 6
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
volgnr | jaar | aantal_verleend | aantal_geweigerd | aantal_totaal | gevraagd_bedrag_geweigerd | gevraagd_bedrag_verleend | gevraagd_bedrag_totaal | verleend_bedrag | |
---|---|---|---|---|---|---|---|---|---|
1 | 2011 | 37 | 25 | 62 | 694114 | 284960 | 979074 | 508982 | |
2 | 2012 | 25 | 27 | 52 | 627500 | 160273 | 787773 | 486000 | |
3 | 2013 | 34 | 31 | 65 | 689550 | 271225 | 960775 | 494000 | |
4 | 2014 | 26 | 14 | 40 | 552000 | 185720 | 737720 | 384500 |
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 lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Creating SVG Elements from Data</title> | |
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> | |
<style type="text/css"> | |
body { | |
background-color: white; | |
} | |
h1 { | |
font-size: 24px; | |
margin: 0; | |
} | |
p { | |
font-size: 14px; | |
margin: 10 px 0 0 0; | |
} | |
svg { | |
background-color: white; | |
} | |
circle:hover { | |
fill: orange; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: grey; | |
shape-rendering: crispEdges; | |
} | |
.axis text{ | |
fill: grey; | |
font-size: 11px; | |
font-family: sans-serif; | |
} | |
.swatch {margin-right:10px;} | |
.swatch:before {display: inline-block;width:16px;height:16px;content:"";margin-right:5px;position:relative;top:2px;} | |
.swatch_applied:before {background:#f21212;} | |
.swatch_granted:before {background:#4682b4;} | |
</style> | |
</head> | |
<body> | |
<H1>Grant amount per year</H1> | |
<p>This line plot displays the grant amount per year for sports and cultural events granted by the Province of Groningen. | |
<br /><br /> | |
<span class="swatch swatch_applied">Applied for</span> | |
<span class="swatch swatch_granted">Granted</span> | |
</p> | |
<script type="text/javascript"> | |
var w = 500; | |
var h = 400; | |
var padding = [20, 10, 50, 90]; // Top, right, bottom, left | |
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(4).tickFormat(function(d){ return dateFormat(d) }); | |
var yAxis = d3.svg.axis().scale(yScale).orient("left").tickFormat(d3.format("d")); | |
var line1 = d3.svg.line() | |
.x(function(d) { | |
return xScale(dateFormat.parse(d.jaar)); | |
}) | |
.y(function(d) { | |
return yScale(d.verleend_bedrag); | |
}); | |
var line2 = d3.svg.line() | |
.x(function(d) { | |
return xScale(dateFormat.parse(d.jaar)); | |
}) | |
.y(function(d) { | |
return yScale(d.gevraagd_bedrag_totaal); | |
}); | |
var svg = d3.select("body") | |
.append("svg") | |
.attr("width", w) | |
.attr("height", h); | |
d3.csv("evenementen_totalen.csv", function(data) { | |
xScale.domain([d3.min(data, function(d){ return dateFormat.parse(d.jaar) }), d3.max(data, function(d){ return dateFormat.parse(d.jaar) })]); | |
yScale.domain([d3.max(data, function(d){ return +d.gevraagd_bedrag_totaal}), 0]); | |
svg.data([ data ]) | |
.append("path") | |
.attr("class", "line verleend bedrag") | |
.attr("d", line1) | |
.attr("fill", "none") | |
.attr("stroke", "steelblue") | |
.attr("stroke-width", 2); | |
svg.data([ data ]) | |
.append("path") | |
.attr("class", "line gevraagd bedrag") | |
.attr("d", line2) | |
.attr("fill", "none") | |
.attr("stroke", "red") | |
.attr("stroke-width", 2); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0,"+ (h - padding[2] + 10) + ")") | |
.call(xAxis) | |
.append("text") | |
.attr("class", "label") | |
.attr("x", w/2) | |
.attr("y", 40) | |
.style("text-anchor", "middle") | |
.text("Year"); | |
svg.append("g") | |
.attr("class", "y axis") | |
.attr("transform", "translate(" + (padding[3] - 10) + ",0)") | |
.call(yAxis) | |
.append("text") | |
.attr("class", "label") | |
.attr("transform", "rotate(-90)") | |
.attr("x", -130) | |
.attr("y", -75) | |
.attr("dy", ".71em") | |
.style("text-anchor", "end") | |
.text("Grant amount (euro's)"); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment