D3 Examples - Georgia counties

Georgia counties

Adapting the state grid for use as an overview/minimap. When you zoom in on a state the counties for that state are rendered. This technique could be used to render subsets of larget datasets at the appropriate zoom level.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/queue.v1.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<link rel="stylesheet" href="style.css"></link>
<style>
</style>
<svg id="map"></svg>
<svg id="state-grid" width=400 height=200></svg>
<script id="grid" type="text/plain">
                              ME
               WI          VT NH
WA ID MT ND MN IL MI    NY MA
OR NV WY SD IA IN OH PA NJ CT RI
CA UT CO NE MO KY WV VA MD DE
   AZ NM KS AR TN NC SC
         OK LA MS AL GA
HI AK    TX             FL
</script>
​
<script src="stategrid.js"></script>
<script>
​
var mapsvg = d3.select("#map").append("g");
var mapwidth = 960;
var mapheight = 500;
var scale0 = 1000;
​
var centered;
var selected;
  
var allCounties = []
​
var zoom = d3.behavior.zoom()
  .translate([mapwidth / 2, mapheight / 2])
  .scale(scale0)
  .scaleExtent([scale0, 10 * scale0])
  .on("zoom", zoomed);
​
var projection = d3.geo.albersUsa()
  .scale(scale0)
  .translate([mapwidth / 2, mapheight / 2]);
​
var path = d3.geo.path()
  .projection(projection);
  
function zoomed() {
  projection
    .translate(zoom.translate())
    .scale(zoom.scale());
​
  mapsvg.selectAll("path")
    .attr("d", path);
  mapsvg.selectAll("circle.city")
    .attr({
      cx: getX,
      cy: getY
    })
}
  
mapsvg.call(zoom)
​
​
queue()
    .defer(d3.json, "us-named.json")
    //.defer(d3.csv, "unemployment.csv")
    .await(ready);
  
function ready(error, us) {
  var states = topojson.feature(us, us.objects.states).features
  allCounties = topojson.feature(us, us.objects.counties).features;
  mapsvg
  .selectAll("path")
    .data(states)
  .enter().append("path").classed("state-boundary", true)
    .attr("d", path)
  
  var georgia = states.filter(function(d) {
    // list of state FIPS codes
    return d.id === 13; //Georgia
  })
  console.log("georgia", georgia)
  clicked(georgia[0]);
}
​
</script>
​
    