clhenrick · July 21, 2017 21:02
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/topojson.v2.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .chart {
      margin: 10px;
    }
  </style>
 </head>

 <body>
  <svg></svg>
  <script>
    var svg = d3.select('svg'),
        width = window.innerWidth,
        height = window.innerHeight;
    
    var states;
    
    function draw() {
      // projection fn so we can fit geodata within svg's area
      var projection = d3.geoAlbersUsa().fitSize([width, height], states);
      
      // use projection fn with geoPath fn
      var path = d3.geoPath().projection(projection);
      
      var g = d3.select('svg g');
      if (g) g.remove();
      
      svg.attr('width', width)
      	.attr('height', height);
      
      svg.append("g")
      		.attr("class", "states")
      	.selectAll("path")
        .data(states.features)
        .enter().append("path")
          .attr("d", path)
      		.attr('fill', '#fff')
      		.attr('stroke', '#333');
    }
   
    d3.json('us-10m-unprojected.topojson', function(error, us) {
      if (error) throw error;
      
      // convert our topojson to geojson
      states = topojson.feature(us, us.objects.state);
      
      // initial drawing of the map
      draw();
      
      // event listener that redraws when the window size changes
      // you would probably want to throttle this in production
      window.onresize = function() {
        width = window.innerWidth;
        height = window.innerHeight;
        draw();
      };
    });
  </script>
 </body>
diff --git a/us-10m-unprojected.topojson b/us-10m-unprojected.topojson
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/topojson.v2.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	.chart {
	margin: 10px;
	}
	</style>
	</head>

	<body>
	<svg></svg>
	<script>
	var svg = d3.select('svg'),
	width = window.innerWidth,
	height = window.innerHeight;

	var states;

	function draw() {
	// projection fn so we can fit geodata within svg's area
	var projection = d3.geoAlbersUsa().fitSize([width, height], states);

	// use projection fn with geoPath fn
	var path = d3.geoPath().projection(projection);

	var g = d3.select('svg g');
	if (g) g.remove();

	svg.attr('width', width)
	.attr('height', height);

	svg.append("g")
	.attr("class", "states")
	.selectAll("path")
	.data(states.features)
	.enter().append("path")
	.attr("d", path)
	.attr('fill', '#fff')
	.attr('stroke', '#333');
	}

	d3.json('us-10m-unprojected.topojson', function(error, us) {
	if (error) throw error;

	// convert our topojson to geojson
	states = topojson.feature(us, us.objects.state);

	// initial drawing of the map
	draw();

	// event listener that redraws when the window size changes
	// you would probably want to throttle this in production
	window.onresize = function() {
	width = window.innerWidth;
	height = window.innerHeight;
	draw();
	};
	});
	</script>
	</body>