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:#2B3C40  ;
  stroke-width: .6px;
}
  svg {
    background: #ffffff
  }
  </style>
</head>
<body>
<script type="text/javascript">

var   width = 800, //5000
     height =700,
    centered; //2500

var projection = d3.geo.mercator()
		.center([-126,55]) //-124,57
		.scale([2900] /1.8) //2800
      .translate([width / 2, height / 2])
		;

var path = d3.geo.path()
				.projection(projection);

var color = d3.scale.quantize()
					.range(["rgb(237,248,233)","rgb(186,228,179)","rgb(116,196,118)","rgb(49,163,84)","rgb(0,109,44)"]);

var svg = d3.select("body")
			.append("svg")
			.attr("width", width)
			.attr("height", height);


d3.csv(src="https://gist.githubusercontent.com/majomo/65e7a9367c1edef6f573/raw/a4e64e2c2527c6db797ae85b1f3d90f277f7be4e/regDistBc.csv", function(data){

				//Set input domain for color scale
				color.domain([
					d3.min(data, function(d) { return d.value; }),
					d3.max(data, function(d) { return d.value; })
				]);


d3.json(src="https://gist.githubusercontent.com/majomo/1beba4e212d12f3d6e29/raw/1bd280591bc4959449505395c90f7ffdd2e2ddbd/bcGeo.json", function(json)
	{
  for(var i = 0; i < data.length; i++){
    var dataCDNAME = data[i].CDNAME;

    var dataValue = parseFloat(data[i].value);

  for(var j = 0; j <json.features.length; j++)
      {
    var jsonCDNAME = json.features[j].properties.CDNAME;
        if(dataCDNAME == jsonCDNAME){

          json.features[j].properties.value = dataValue;

          break;
        }

      }
  }


//Bind data and create one path per GeoJSON feature
      svg.selectAll("path")
	     .data(json.features)
	      .enter()
		  .append("path")
		  .attr("d", path)
		  .style("fill", function(d) {
	//Get data value
		var value = d.properties.value;

		if (value) {
	//If value exists…
		return color(value);
	  		} else {
	//If value is undefined…
			return "#ccc";
			}
		});

	});

});


</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:#2B3C40 ;
	stroke-width: .6px;
	}
	svg {
	background: #ffffff
	}
	</style>
	</head>
	<body>
	<script type="text/javascript">

	var width = 800, //5000
	height =700,
	centered; //2500

	var projection = d3.geo.mercator()
	.center([-126,55]) //-124,57
	.scale([2900] /1.8) //2800
	.translate([width / 2, height / 2])
	;

	var path = d3.geo.path()
	.projection(projection);

	var color = d3.scale.quantize()
	.range(["rgb(237,248,233)","rgb(186,228,179)","rgb(116,196,118)","rgb(49,163,84)","rgb(0,109,44)"]);

	var svg = d3.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height);



	d3.csv(src="https://gist.githubusercontent.com/majomo/65e7a9367c1edef6f573/raw/a4e64e2c2527c6db797ae85b1f3d90f277f7be4e/regDistBc.csv", function(data){

	//Set input domain for color scale
	color.domain([
	d3.min(data, function(d) { return d.value; }),
	d3.max(data, function(d) { return d.value; })
	]);


	d3.json(src="https://gist.githubusercontent.com/majomo/1beba4e212d12f3d6e29/raw/1bd280591bc4959449505395c90f7ffdd2e2ddbd/bcGeo.json", function(json)
	{
	for(var i = 0; i < data.length; i++){
	var dataCDNAME = data[i].CDNAME;

	var dataValue = parseFloat(data[i].value);

	for(var j = 0; j <json.features.length; j++)
	{
	var jsonCDNAME = json.features[j].properties.CDNAME;
	if(dataCDNAME == jsonCDNAME){

	json.features[j].properties.value = dataValue;

	break;
	}

	}
	}


	//Bind data and create one path per GeoJSON feature
	svg.selectAll("path")
	.data(json.features)
	.enter()
	.append("path")
	.attr("d", path)
	.style("fill", function(d) {
	//Get data value
	var value = d.properties.value;

	if (value) {
	//If value exists…
	return color(value);
	} else {
	//If value is undefined…
	return "#ccc";
	}
	});

	});

	});


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