majomo/index.html

## index.html
<html lang='en'>
<head>

<meta charset='utf-8'>
<title>GISTS</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

<style>
   path {  stroke:#fff  ;
           stroke-width: .9px;
           fill: #BDD684;
   }
   path:hover{
           fill: #5e6b42;
   }
   svg {
           background: #FFF
   }
</style>
</head>
<body>
<script type="text/javascript">
	//set the width and height

var  width = 800, //5000
     height =800,
     centered; //2500
//Define the map projection, scale etc
var projection = d3.geo.albers()

	.scale([2800] ) //2800
    .translate([width / 1.7, height / 1.3])
    .rotate([121,-11]);

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

var svg = d3.select("body")
			.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)

					   });

        });

 </script>
</body>
</html>
	<html lang='en'>
	<head>

	<meta charset='utf-8'>
	<title>GISTS</title>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
	<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

	<style>
	path { stroke:#fff ;
	stroke-width: .9px;
	fill: #BDD684;
	}
	path:hover{
	fill: #5e6b42;
	}
	svg {
	background: #FFF
	}
	</style>
	</head>
	<body>
	<script type="text/javascript">
	//set the width and height

	var width = 800, //5000
	height =800,
	centered; //2500
	//Define the map projection, scale etc
	var projection = d3.geo.albers()

	.scale([2800] ) //2800
	.translate([width / 1.7, height / 1.3])
	.rotate([121,-11]);

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

	var svg = d3.select("body")
	.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)

	});

	});

	</script>
	</body>
	</html>