Regional Districts of British Columbia by majomo

index.html

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
 <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic' rel='stylesheet' type='text/css'>
  
<style>
   path {  stroke:#fff  ;
           stroke-width: .9px;
           fill: #BDD684; 
   }
   path:hover{
           fill: #5e6b42;
   }
   svg {
           background: #FFF
   }

   h1 {
       background-color: white;
       color: #5e6b42;
       font-family: 'Open Sans Condensed', sans-serif;
       font-size: 30px;
       font-weight: normal;
       margin: 10px 25px;
      
            }
    p {
       font-family: 'Open Sans Condensed', sans-serif;
       font-size: 20px;
       margin: 10px 25px;
    }

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

            }
#chartContainer {
                background-color: white;
                margin: auto;
                max-width: 800px;
            }
                        
            .header,
            .info,
            {
                margin: auto;
                max-width: 800px;
            }

#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: 1em;
		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>

<script type="text/javascript">
	//set the width and height
  
var  width = 800, //5000
     height =700,
     centered; //2500	
//Define the map projection, scale etc
var projection = d3.geo.albers()
		
	.scale([2900] ) //2800
    .translate([width / 1.6, height / 1.2])
    .rotate([121,-11]);
		
  //define path generator
var path = d3.geo.path()
	.projection(projection);

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



					   });
				     });
					   
       
  
 </script>
</body>
</html>