Last active
August 29, 2015 14:18
-
-
Save FrieseWoudloper/25883f301f8c675a5389 to your computer and use it in GitHub Desktop.
Exercise module 3: bar chart
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 svg1 = d3.select("body") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| var svg2 = d3.select("body") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| var svg3 = d3.select("body") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| var svg4 = d3.select("body") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| svg1.append("text") | |
| .text("Total") | |
| .attr("x","0") | |
| .attr("y","10") | |
| .attr("fill", "grey") | |
| .attr("font-size", "12") | |
| .attr("font-family","Helvetica"); | |
| svg2.append("text") | |
| .text("Approved") | |
| .attr("x","0") | |
| .attr("y","10") | |
| .attr("fill", "grey") | |
| .attr("font-size", "12") | |
| .attr("font-family","Helvetica"); | |
| svg3.append("text") | |
| .text("Rejected") | |
| .attr("x","0") | |
| .attr("y","10") | |
| .attr("fill", "grey") | |
| .attr("font-size", "12") | |
| .attr("font-family","Helvetica"); | |
| svg4.append("text") | |
| .text("% approved") | |
| .attr("x","0") | |
| .attr("y","10") | |
| .attr("fill", "grey") | |
| .attr("font-size", "12") | |
| .attr("font-family","Helvetica"); | |
| d3.csv("evenementen_totalen.csv", function(dataset) { | |
| svg1.selectAll("rect") | |
| .data(dataset) | |
| .enter() | |
| .append("rect") | |
| .attr({ | |
| x: 0, | |
| y: function(d, i){return offset + (i * ((h - offset) / dataset.length));}, | |
| width: function(d){return d.aantal_totaal * 2;}, | |
| height: function(d){return (h - offset) / dataset.length - barPadding}, | |
| fill: "darkblue" | |
| }) | |
| .append("title") | |
| .text(function(d) { | |
| return d.aantal_totaal + " grant applications in " + d.jaar; | |
| }); | |
| svg2.selectAll("rect") | |
| .data(dataset) | |
| .enter() | |
| .append("rect") | |
| .attr({ | |
| x: 0, | |
| y: function(d, i){return offset + (i * ((h - offset) / dataset.length));}, | |
| width: function(d){return d.aantal_verleend * 2;}, | |
| height: function(d){return (h - offset) / dataset.length - barPadding}, | |
| fill: "darkblue" | |
| }) | |
| .append("title") | |
| .text(function(d) { | |
| return d.aantal_verleend + " grant applications approved in " + d.jaar; | |
| }); | |
| svg3.selectAll("rect") | |
| .data(dataset) | |
| .enter() | |
| .append("rect") | |
| .attr({ | |
| x: 0, | |
| y: function(d, i){return offset + (i * ((h - offset) / dataset.length));}, | |
| width: function(d){return d.aantal_geweigerd * 2;}, | |
| height: function(d){return (h - offset) / dataset.length - barPadding}, | |
| fill: "darkblue" | |
| }) | |
| .append("title") | |
| .text(function(d) { | |
| return d.aantal_geweigerd + " grant applications rejected in " + d.jaar; | |
| }); | |
| svg4.selectAll("rect") | |
| .data(dataset) | |
| .enter() | |
| .append("rect") | |
| .attr({ | |
| x: 0, | |
| y: function(d, i){return offset + (i * ((h - offset) / dataset.length));}, | |
| width: function(d){return d.aantal_verleend/d.aantal_totaal * 100;}, | |
| height: function(d){return (h - offset) / dataset.length - barPadding}, | |
| fill: "darkblue" | |
| }) | |
| .append("title") | |
| .text(function(d) { | |
| return Math.round(d.aantal_verleend/d.aantal_totaal * 100) + " % grant applications approved in " + d.jaar; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment