Last active
February 15, 2017 13:18
-
-
Save darrenjaworski/4863a03ba8237326447bf4f82eb35184 to your computer and use it in GitHub Desktop.
d3 fitextent and responsive projection
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 $@.download | |
| mv $@.download $@ | |
| 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,$^) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "anonymous", | |
| "version": "0.0.1", | |
| "private": true, | |
| "devDependencies": { | |
| "d3": "3", | |
| "topojson": "1" | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment