The Baltic Sea

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>The Baltic Sea</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style type="text/css">

body {
				background-color: rgb(234, 231, 231);
				margin-left: 150px;
				margin-right: 50px;
				margin-bottom: 10px;
				margin-top:10px;
			}

h1 {
				font-size: 34px;
				margin: 0;
			}

p {
				font-size: 18px;
				margin: 10px 10px 50px 0px;
			}

path {  
				stroke: #fff  ;
				stroke-width: .9px;
				fill: #AFA9A8; 
			}
			path:hover{
				fill: #6B7C6B;
			}

.container {
				display: block;
			    margin: auto;
			    width: 75%;
			    vertical-align: top;
			}

#map {
			    float: left;
			    width: 0;
			    height: 100%;
			    margin: 1px;
			}

#tooltip {
				z-index: 1;
				position: absolute;
				width: auto;
				height: auto;
				padding: 6px;
				background-color: white;
				opacity: 1;
				-webkit-border-radius: 10px;
				-moz-border-radius: 10px;
				border-radius: 10px;
				-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
				-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
				box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
				pointer-events: none;
			}
			
			#tooltip.hidden {
				display: none;
			}

#tooltip p {
				margin: 0;
				font-family: 'Helvetica', sans-serif;
				font-size: 1em;
				line-height: 1;
				}

</style>
	</head>
	<body>
		<div class="container">
			<h1>The Baltic Sea</h1>
			<p>This is the Baltic Sea, one of the most polluted and trafficked seas in the world. Source: <a href="https://helcom.fi">HELCOM</a></p>
		<div id="map"></div>
		<div id="tooltip" class="hidden">
			<p>
				<span id="NAME">name</span>
			</p>
		</div>
		<script type="text/javascript">

//Width and height
			var w = 800;
			var h = 500;

//Define map projection
			var projection = d3.geo.mercator()
								   .center([ 0, 60 ])
								   .translate([ w/5, h/2 ])
								   .scale([ w/0.8]);

//Define path generator
			var path = d3.geo.path()
							 .projection(projection);

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

//Load in GeoJSON data
			d3.json("BalticCountriesMapShaper.json", function(json) {
				
				//Bind data and create one path per GeoJSON feature
				svg.selectAll("path")
				   .data(json.features)
				   .enter()
				   .append("path")
				   .attr("d", path)
				   //.style("fill", "#AFA9A8")
				   //.on('click', function(d) { console.log(d.properties.soverignt)}
				   .on("mousemove", function(d) {
					    var xPosition = parseFloat(d3.select(this).attr("cx"));
						var yPosition = parseFloat(d3.select(this).attr("cy"));
						var currentCountry = this;
	                	d3.select(this).style('fill-opacity', 1);
				 
				       //Update the tooltip position and value
				       d3.select("#tooltip")
				        .style("left", (d3.event.pageX+20) + "px")			 
						.style("top", (d3.event.pageY ) + "px")
				       	.select("#NAME")
						.text(d.properties.sovereignt);

// //Show the tooltip
				       d3.select("#tooltip").classed("hidden", false);
				       })

.on("mouseout", function() {
				       	 d3.selectAll('path')
                            .style({ 'fill-opacity':10});
				       //Hide the tooltip
				       d3.select("#tooltip").classed("hidden", true);
					   });
		
			});
		
		</script>
	</body>
</html>

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

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