D3 week 4

<!DOCTYPE html>
<html>

<head>

<title>D3 Course week 4</title>
	<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
	<style type="text/css">
			
			body {
				background-color: #f2f2f2;
			}

h2 {
				font-family: helvetica;
				font-weight: bold;
				font-size: 24px;
				color: #1A1A1A;
				margin-bottom: 0px;
			}

body {
				background-color: #f2f2f2;
			}

rect:hover {
				fill: #CC0000;
			}

p {
				font-family: helvetica;
				font-size: 15px;
				color: #1A1A1A;
				margin-bottom: 0px;
			}

p2 {
				font-family: helvetica;
				font-size: 10px;
				color: #AAAAAA;
				margin-bottom: 0px;
				text-align: right;
			}

.yaxis,
			.xaxis text {
				font-family: helvetica;
				font-size: 10px;
				shape-rendering: crispEdges;
			}

.xaxis path,
			.xaxis line {
					fill: none;
					stroke: black;

}

.yaxis path,
			.yaxis line {
				fill: none;
				stroke: none;
			}

</style>

</head>

<body>

<h2>De grootste gemeentes van Nederland</h2>

<p>Top-30 gemeentes naar inwonertal</p>

var w = 500
	var h = 500
	var padding = [ 20, 10, 20, 100 ]; //Top, right, bottom, left

var widthScale = d3.scale.linear()
						.range([ 0, w - padding[1] - padding[3] ]);

var heightScale = d3.scale.ordinal()
						.rangeRoundBands ([ padding[0], h - padding[2] ] , 0.3);

var xAxis = d3.svg.axis()
					.scale(widthScale)
					.orient("bottom");

var yAxis = d3.svg.axis()
					.scale(heightScale)
					.orient("left");

var svg = d3.select("body")
		.append("svg")
		.attr("width", w)
		.attr("height", h);

d3.csv("bevolking.csv", function(data) {

data.sort(function(a,b) {
				return d3.descending (+a.Population2015, +b.Population2015)
			});

widthScale.domain([ 0, d3.max(data, function(d) {
				return +d.Population2015;
			}) ]);

heightScale.domain(data.map(function(d) { return d.Community; } ));

svg.selectAll("rect")
				.data(data)
				.enter()
				.append("rect")
				.attr("class", "rects")
				.attr("fill", "#AAAAAA")
				.attr("x", padding[3])					
				.attr("y", function(d,i) {
					return heightScale(d.Community);
				})
				.attr("width", function(d) {
					return widthScale(d.Population2015);
				})
				.attr("height", heightScale.rangeBand());

svg.append("g")
			.attr("class", "xaxis")
			.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
			.call(xAxis);

svg.append("g")
			.attr("class", "yaxis")
			.attr("transform", "translate(" + (padding[3] - 5) + ",0)")
			.call(yAxis);

});

</script>

</body>

</html>

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

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