Regional Districts of BC

<html lang='en'>
<head>
 	
<meta charset='utf-8'>
<title>Regional Districts of British Columbia</title>

#container {
                background-color: white;
                border: 2px solid lightGray;
                margin: auto;
                max-width: 700;
                cursor: pointer;

}

#chartContainer {
                background-color: white;
                margin: auto;
                max-width: 700px;
            }
                     
#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: 'Open Sans Condensed', sans-serif;
		font-size: 1.3em;
		line-height: 1;
        
		}

</style>
</head>
<body>
<div id="container">
<div class="header">
		<h1>The Regional Districts of British Columbia</h1>
	</div>
<div class="info">
	<p>The Canadian province of British Columbia is partitioned into 29 regional districts, as a means to better enable municipalities and rural areas to work together at a regional level.</p>
</div>
<div id="tooltip" class="hidden">
<p><span id="NAME">name</span></p>
</div>
<div id="chartContainer">
</div>

var svg = d3.select("#chartContainer")
			.append("svg")
			.attr("width", width)
			.attr("height", height);
  
d3.json(src="https://gist.githubusercontent.com/majomo/1beba4e212d12f3d6e29/raw/1bd280591bc4959449505395c90f7ffdd2e2ddbd/bcGeo.json", function(json)
	{  
  
  //Bind data and create one path per GeoJSON feature
svg.selectAll("path")
   .data(json.features)
   .enter()
   .append("path")
   .attr("d", path)
  // .on('click', function(d) { console.log(d.properties.CDNAME) })

.on("mousemove", function(d) {
var xPosition = parseFloat(d3.select(this).attr("cx"));
var yPosition = parseFloat(d3.select(this).attr("cy"));
  				 var currentState = 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.CDNAME);

//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);

});

d3.csv(src="https://gist.githubusercontent.com/majomo/71bea3a673397ebdbabc/raw/5ba270c19e6be61c3a162ae4f17e676083eea8fd/bccities.csv", function(data) {

svg.selectAll("circle")
   .data(data)
   .enter()
   .append("circle")
   .attr("cx", function(d) {
return projection([d.lon, d.lat])[0];
					   })
   .attr("cy", function(d) {
return projection([d.lon, d.lat])[1];
					   })
 
.attr("r", 2)
.transition()
.delay(function(d, i) {
            return i * 90;
          })
.duration(2000)
.attr("r", 9)
.attr("fill", "#9DFEFF");
						
			});

});
					   
       
  
 </script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js