D3 Block-a-Day: Day 7, January 7th, 2017

D3 Block-a-Day: Day 7, January, 7th 2017

New Year's Resolution for 2017: Make a D3 Block a day to teach myself D3. This is Number 7. This example goes further into D3 map building using topoJSON showing school districts in US states. The topoJSON files used to construct this visualization were created by me using shape files provided by the United States Census Bureau. The Center for Assessment makes these state and national school district topoJSON files. This first map shows Wyoming with zooming and panning controls added. Big thanks to @bclinkinbeard for helping wire up the pan/zoom while maintaining the hover effects over the district shapes.

<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>D3 Block-a-Day: Day 7, January 7, 2017</title>
<style>

#wrapper {
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
}
      
path {
  fill: #ccc;
  stroke: #fff;
  stroke-width: .5px;
}

path:hover {
  fill: red;
}

</style>
</head>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/topojson.v2.min.js"></script>
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-geo.v1.min.js"></script>

var width = 960,
    height = 500;
  
  const zoom = d3.zoom()
      .scaleExtent([1/4, 3])
      .on('zoom', function () {
        d3.select('g').attr('transform', d3.event.transform)
      });

const svg = d3.select('#chart')
      .append('svg')
      .attr('width', width)
      .attr('height', height)
      .call(zoom)

const g = svg.append('g')
    
  var projection = d3.geoMercator()
			.center([ -107.5534, 43.00029 ])
			.scale(5000);

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

d3.json("WY_Districts.json", function(error, state_districts) {
  	if (error) throw error;

g.selectAll("path")
    	  .data(topojson.feature(state_districts, state_districts.objects.districts).features)
		    .enter()
		    .append("path")
    	  .attr("d", path);
	});
</script>
</body>

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v2.min.js

https://d3js.org/d3-array.v1.min.js

https://d3js.org/d3-geo.v1.min.js