forked from learntocode611's block: fork: OHIO Census Tract Map
xxxxxxxxxx
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: Setting path fills</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<style type="text/css">
/* No style rules here yet */
</style>
</head>
<body>
<script type="text/javascript">
// Declare Width and height of SVG element
var w = 800;
var h = 900;
//declare bounding box - outer limits of shape
var latTop = 41.96920686;
var longLeft = -84.81945098;
var longRight = -80.518693;
//set scale so difference of longitude and latitude is exactly the width of the image
// anything greater than 1000 will expand image; less than 1000 will shrink it
//scale here thus is equal to 66953; we need to zoom the map in significantly to get it to show
var scale = 360*w/(longRight - longLeft);
//Define map projection
var projection = d3.geo.mercator()
.scale(scale) //references the correct zoom of the image
.translate([0,0]); //translate the origin of map to 0, 0 to start - this is where lat/lon 0, 0 will show up
//update 'translate' to fit svg
var trans = projection([longLeft, latTop]); //check where the top left part of the map projects to; lon lat inputs and returns their pixel locations
console.log(trans); //to check the values of the variable (-15775, -8616)
//repositions map to fit the image
projection.translate([-1*trans[0], -1*trans[1]]);
//Define path generator using the 'projection' we've built with the proper 'scale' and 'translate'
var path = d3.geo.path()
.projection(projection);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load in GeoJSON data
d3.json("us-states.json", function(err, json) {
console.log(err, json);
//Bind data and create one path element per GeoJSON feature
svg.selectAll("path")
.data(json.features)
.enter()
.append("path") //one path element per feature
.attr("d", path) //passes the data to our 'path' function
.style("fill", "steelblue");
});
</script>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js