example

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Creating SVG Elements from Data</title>
		<script type="text/javascript" src="https://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>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js