FrieseWoudloper/evenementen_totalen.csv

## evenementen_totalen.csv

          
            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

## index.html
<!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>
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
	<!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>