-
-
Save FrieseWoudloper/9db9242cfeb13897fb88 to your computer and use it in GitHub Desktop.
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; | |
} | |
p { | |
color: black; | |
font-size: 14px; | |
font-family: "Helvetica"; | |
} | |
svg { | |
background-color: white; | |
} | |
</style> | |
</head> | |
<body> | |
<H1>The number of grant applications by year 2011-2014</H1> | |
<p>These horizontal bar charts display the number of grant applications for events organized in the Provence of Groningen in 2011, 2012, 2013 and 2014. There are four bar charts: the total number of grant applications, the number of applications approved, the number of application rejected and the percentage of applications approved. </p> | |
<script type="text/javascript"> | |
var w = 180; // Width of SVG | |
var h = 100; // Height of SVG | |
var barh = 15; // Height of bar | |
var barPadding = 3; // Padding | |
var offset = 14; // Offset for bar-chart | |
var titles = ["Total","Approved","Rejected","% approved"]; | |
var cat = ["aantal_totaal","aantal_verleend","aantal_geweigerd","% approved"]; | |
var text = ["grant applications","grant applications approved","grant applications rejected","% grant applications approved"]; | |
var svg = d3.select("body").append("svg").attr("width",w*4).attr("heigt",h); | |
svg.selectAll("text").data(titles).enter().append("text").text(function(d){return d;}) | |
.attr("x",function(d,i){return i*w;}) | |
.attr("y","10") | |
.attr("fill", "grey") | |
.attr("font-size", "12") | |
.attr("font-family","Helvetica"); | |
d3.csv("evenementen_totalen.csv", function(dataset) { | |
for (j=0;j<titles.length;j++) | |
{ | |
svg.selectAll(".bars").data(dataset).enter().append("rect").attr({ | |
x: j*w, | |
y: function(d, i){return offset + (i * ((h - offset) / dataset.length));}, | |
width: function(d){if (j<3) return d[cat[j]] * 2; else return d.aantal_verleend/d.aantal_totaal * 100;}, | |
height: function(d){return (h - offset) / dataset.length - barPadding}, | |
fill: "darkblue", | |
}) | |
.append("title") | |
.text(function(d) { | |
if (j<3) return d[cat[j]] + " " + text[j] +" in " + d.jaar; else return Math.round(d.aantal_verleend/d.aantal_totaal * 100) + " " + text[j] +" in " + d.jaar; | |
}); | |
} | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment