<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: .6 px
shape-rendering: crispEdges;
}
svg {
background: #ffffff
}
</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()
//.center([-2,-5]) //-126,55
.scale([2800] ) //2800
.translate([width / 1.7, height / 1.3])
.rotate([121,-11])
;
//define path generator
var path = d3.geo.path()
.projection(projection);
////UNCOMMENT THIS TO MAKE A CHOROPLETH
/*
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/a28c185ba29bda010c38944044f9096b820cacf7/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", "steelblue");
});
/*.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>
<script id="jsbin-source-html" type="text/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">
//set the width and height
var width = 800, //5000
height =800,
centered; //2500
//Define the map projection, scale etc
var projection = d3.geo.albers()
//.center([-2,-5]) //-126,55
.scale([2800] ) //2800
.translate([width / 1.7, height / 1.3])
.rotate([121,-11])
;
//define path generator
var path = d3.geo.path()
.projection(projection);
////UNCOMMENT THIS TO MAKE A CHOROPLETH
/*
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/a28c185ba29bda010c38944044f9096b820cacf7/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", "steelblue");
});
/*.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></script>
</body>
</html>