majomo/index.html

## 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>
	<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>