Shipping accidents in the Baltic Sea (1989-2013)

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Loading CSV Data with D3</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
	</head>
	<body>
		<svg width="600", height="300">
			<rect x="100" y="100" width="20" height="30" style="fill:grey;"></rect>
			<rect x="100" y="130" width="150" height="70" style="fill:orange"></rect>
			
			<polygon points="400,110 340,300 490,178 310,178 460,298" style="fill: red"></polygon>
			
			<polygon points="100,200 150,300 400,300 450,200" style="fill: orange"></polygon>
			
			<path d="M100,100 Q40,5 100,30 T150,3" fill="none" stroke="grey" stroke-width="1"></path>
		</svg>

<p>When I learn to put labels we'll discover who has polluted the most :-)</p>

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

//Load in contents of CSV file
			d3.csv("ShippingAccidents_BalticSea_1989_2013.csv", function(data) {
				data.sort(function(a, b) {
					return d3.descending(+a.Pollu_m3, +b.Pollu_m3);
				});

var rects = svg.selectAll("rect")
							.data(data)
							.enter()
							.append("rect");

rects.attr("x", 0)
					.attr("y", function(d, i) {
						return i * 10;
					})
					.attr("width", function(d) {
						return d.Pollu_m3/10;
					})
					.attr("height", 20);

});

</script>

</body>
</html>

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

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