Regional Districts of BC 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;
   }
circle {
        fill: #9DFEFF;
        opacity: 0.95;
      }
      
      circle:hover {
        fill: #2BCC14;
        opacity: 0.75;
      }
  
  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: 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>

<script type="text/javascript">
	//set the width and height
  
var  width = 700, 
     height = 600,
     centered; 
//Define the map projection, scale etc
var projection = d3.geo.albers()
	                   .scale([2500] ) 
                       .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);

   });

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>