darrenjaworski · February 15, 2017 13:18
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  body {
    margin: 0;
  }
  svg {
    fill: steelblue;
  }
  </style>
 </head>
 <body>
  <svg></svg>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/topojson.v1.min.js"></script>
  <script>

  var width = document.documentElement.clientWidth,
      height = width / 2,
      svg = d3.select("svg").attr('width', width).attr('height', height),
      path,
      counties;

  d3.json("ok-counties.json", function(error, ok) {
    if (error) throw error;

    counties = topojson.feature(ok, ok.objects.counties);

    path = d3.geoPath()
        .projection(d3.geoMercator()
          .fitSize([width, height], counties));

    svg.append("path")
        .datum(counties)
        .attr("d", path);
  });

  var optimizedResize = (function() {

      var callbacks = [],
          running = false;

      // fired on resize event
      function resize() {

          if (!running) {
              running = true;

              if (window.requestAnimationFrame) {
                  window.requestAnimationFrame(runCallbacks);
              } else {
                  setTimeout(runCallbacks, 66);
              }
          }

      }

      // run the actual callbacks
      function runCallbacks() {

          callbacks.forEach(function(callback) {
              callback();
          });

          running = false;
      }

      // adds callback to loop
      function addCallback(callback) {

          if (callback) {
              callbacks.push(callback);
          }

      }

      return {
          // public method to add additional callback
          add: function(callback) {
              if (!callbacks.length) {
                  window.addEventListener('resize', resize);
              }
              addCallback(callback);
          }
      };
  }());

  // start process
  optimizedResize.add(function() {

    width = document.documentElement.clientWidth;
    height = width / 2;
    svg.attr('width', width).attr('height', height);

    path.projection(d3.geoMercator()
      .fitSize([width, height], counties));

    d3.select('path').attr('d', path);
  });

  </script>
 </body>
 </html>
diff --git a/makefile b/makefile
 GENERATED_FILES = \
 	ok-counties.json

 all: $(GENERATED_FILES)

 .PHONY: clean all

 clean:
 	rm -rf -- $(GENERATED_FILES) build

 build/gz/%.tar.gz:
 	mkdir -p $(dir $@)
 	curl 'http://dds.cr.usgs.gov/pub/data/nationalatlas/$(notdir $@)' -o [email protected]
 	mv [email protected] $@

 build/shp/us/counties-unfiltered.shp: build/gz/countyp010_nt00795.tar.gz

 build/shp/us/%.shp:
 	rm -rf $(basename $@)
 	mkdir -p $(basename $@)
 	tar -xzm -C $(basename $@) -f $<
 	for file in $(basename $@)/*; do chmod 644 $$file; mv $$file $(basename $@).$${file##*.}; done
 	rmdir $(basename $@)

 # remove water counties (e.g., Great Lakes)
 build/shp/us/counties.shp: build/shp/us/counties-unfiltered.shp
 	rm -f $@
 	ogr2ogr -f 'ESRI Shapefile' -where "FIPS NOT LIKE '%000'" $@ $<

 build/shp/%/counties.shp: build/shp/us/counties.shp
 	mkdir -p $(dir $@)
 	rm -f $@
 	ogr2ogr -f 'ESRI Shapefile' -where "STATE = '`echo $* | tr a-z A-Z`'" $@ $<

 ok-counties.json: build/shp/ok/counties.shp
 	node_modules/.bin/topojson \
 		-o $@ \
 		--id-property=TRACTCE \
 		-- $(filter %.shp,$^)
diff --git a/ok-counties.json b/ok-counties.json
diff --git a/package.json b/package.json
 {
  "name": "anonymous",
  "version": "0.0.1",
  "private": true,
  "devDependencies": {
    "d3": "3",
    "topojson": "1"
  }
 }
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	body {
	margin: 0;
	}
	svg {
	fill: steelblue;
	}
	</style>
	</head>
	<body>
	<svg></svg>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/topojson.v1.min.js"></script>
	<script>

	var width = document.documentElement.clientWidth,
	height = width / 2,
	svg = d3.select("svg").attr('width', width).attr('height', height),
	path,
	counties;

	d3.json("ok-counties.json", function(error, ok) {
	if (error) throw error;

	counties = topojson.feature(ok, ok.objects.counties);

	path = d3.geoPath()
	.projection(d3.geoMercator()
	.fitSize([width, height], counties));

	svg.append("path")
	.datum(counties)
	.attr("d", path);
	});

	var optimizedResize = (function() {

	var callbacks = [],
	running = false;

	// fired on resize event
	function resize() {

	if (!running) {
	running = true;

	if (window.requestAnimationFrame) {
	window.requestAnimationFrame(runCallbacks);
	} else {
	setTimeout(runCallbacks, 66);
	}
	}

	}

	// run the actual callbacks
	function runCallbacks() {

	callbacks.forEach(function(callback) {
	callback();
	});

	running = false;
	}

	// adds callback to loop
	function addCallback(callback) {

	if (callback) {
	callbacks.push(callback);
	}

	}

	return {
	// public method to add additional callback
	add: function(callback) {
	if (!callbacks.length) {
	window.addEventListener('resize', resize);
	}
	addCallback(callback);
	}
	};
	}());

	// start process
	optimizedResize.add(function() {

	width = document.documentElement.clientWidth;
	height = width / 2;
	svg.attr('width', width).attr('height', height);

	path.projection(d3.geoMercator()
	.fitSize([width, height], counties));

	d3.select('path').attr('d', path);
	});

	</script>
	</body>
	</html>
	GENERATED_FILES = \
	ok-counties.json

	all: $(GENERATED_FILES)

	.PHONY: clean all

	clean:
	rm -rf -- $(GENERATED_FILES) build

	build/gz/%.tar.gz:
	mkdir -p $(dir $@)
	curl 'http://dds.cr.usgs.gov/pub/data/nationalatlas/$(notdir $@)' -o [email protected]
	mv [email protected] $@

	build/shp/us/counties-unfiltered.shp: build/gz/countyp010_nt00795.tar.gz

	build/shp/us/%.shp:
	rm -rf $(basename $@)
	mkdir -p $(basename $@)
	tar -xzm -C $(basename $@) -f $<
	for file in $(basename $@)/; do chmod 644 $$file; mv $$file $(basename $@).$${file##.}; done
	rmdir $(basename $@)

	# remove water counties (e.g., Great Lakes)
	build/shp/us/counties.shp: build/shp/us/counties-unfiltered.shp
	rm -f $@
	ogr2ogr -f 'ESRI Shapefile' -where "FIPS NOT LIKE '%000'" $@ $<

	build/shp/%/counties.shp: build/shp/us/counties.shp
	mkdir -p $(dir $@)
	rm -f $@
	ogr2ogr -f 'ESRI Shapefile' -where "STATE = '`echo $* \| tr a-z A-Z`'" $@ $<

	ok-counties.json: build/shp/ok/counties.shp
	node_modules/.bin/topojson \
	-o $@ \
	--id-property=TRACTCE \
	-- $(filter %.shp,$^)
	{
	"name": "anonymous",
	"version": "0.0.1",
	"private": true,
	"devDependencies": {
	"d3": "3",
	"topojson": "1"
	}
	}