Ship accidents vs pollution in the Baltic Sea

<!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>
		<script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
		<style type="text/css">
			body {
				background-color: rgb(208, 208, 208);
				margin-left: 50px;
				margin-right: 50px;
				margin-bottom: 10px;
				margin-top:10px;
				
			}

#header {
				font-size: 40px;
				font-family: Rockwell, Helvetica;
				text-align: left;
			}

#subheader {
				font-size: 20px;
				font-family: Rockwell, Helvetica;
				text-align: left;
			}

.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}

.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}

/* Creates a small triangle extender for the tooltip */
			.d3-tip {
			  line-height: 1;
			  font-weight: bold;
			  padding: 12px;
			  background: rgba(0, 0, 0, 0.8);
			  color: #fff;
			  border-radius: 2px;
			}
			  
			.d3-tip:after {
			  box-sizing: border-box;
			  display: inline;
			  font-size: 10px;
			  width: 100%;
			  line-height: 1;
			  color: rgba(0, 0, 0, 0.8);
			  content: "\25BC";
			  position: absolute;
			  text-align: bottom;
			}

/*.y.axis path,
			.y.axis line {
				opacity: 0;
			}*/

circle:hover {
				fill: orange;
			}

</style>
	</head>

<body>
	
	<div id="header">
	There are many ship accidents in the Baltic Sea every year...
	</div>

<div id="subheader">
	...but not all cause pollution to the sea. Fortunately for the environment, there is no correlation between number of accidents and pollution.
	</div>

var w = 600;
		var h = 400;
		var padding = [20, 50, 50, 100]; //Top, right, bottom, left

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

var yScale = d3.scale.linear()
							.range([ padding[0], h - padding[2] ]);

var xAxis = d3.svg.axis()
					.scale(xScale)
					.orient("bottom")
					.ticks(5);

var yAxis = d3.svg.axis()
					.scale(yScale)
					.orient("left")
					.ticks(5);

var tipBar = d3.tip()
                .attr('class', 'd3-tip')
                // .offset([xScale, yScale])
                .html(function(d) {
                  return "<strong>In " + d.Years + "</strong> <span style='color:red'>" + d.Accidents + "</span> accidents polluted <span style='color:red'>" + d.Pollu_m3 + " m3</span>";
                  // return "<strong>Accidents:</strong> <span style='color:red'>" + d.Accidents + "</span>";
                  })

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

//Load in contents of CSV file
		d3.csv("AccidentsVSPollution.csv", function(data) {

data.sort(function(a, b) {
				return d3.ascending(+a.Accidents, +b.Accidents);
			});

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

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

var circles = svg.selectAll("circle")
						.data(data)
						.enter()
						.append("circle");

circles.attr("cx", function(d){
				return xScale(d.Accidents);
			})
				.attr("cy", function(d) {
					return yScale(d.Pollu_m3);
				})
				.attr("r", 0)
				.transition()
				.duration(2000)
				.attr("r", 5);

circles.attr("fill", "blue")
				.on('mouseover', tipBar.show)
				.on('mouseout', tipBar.hide);

svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0 " + (h - padding[2]) + ")")
					// .attr("transform", "translate(0," + (h - padding[2] + 10) + ")")
					.call(xAxis);

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

svg.append("text")
				    .attr("class", "label")
				    .attr("text-anchor", "left")
				    .attr("x",w/2)
				    .attr("y", h)
				    .text("Number of accidents");

svg.append("text")
				    .attr("class", "label")
				    .attr("text-anchor", "end")
				    // .attr("y", 0)
				    .attr("dy", "2.75em")
				    .attr("dx", "-8.75em")
				    .attr("transform", "rotate(-90)")
				    .text("Pollution in m3");

});

</script>

</body>
</html>

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

Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js to a secure url

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

https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js