FiveThirtyEight NFL map reproduction

README.md

An attempt to reproduce this map from FiveThirtyEight, "The Most Televised NFL Teams": http://fivethirtyeight.com/features/which-nfl-team-are-you-stuck-watching-every-sunday/

nfl_cities.json is a manually reduced version of cities.json that only includes cities that have NFL teams.

I don't have the data behind the FiveThirtyEight map, so county-team data was manually added using QGIS. This is why the maps don't quite sync up.

Team labels are placed based on the teams' cities. This approximation was improved in Illustrator for the final product.

Labels are cluttered and off the map for the final D3 product because they're much easier to fix using Illustrator. See the final product in output.png.

Illustrator

Download SVG using SVG Crowbar. Open in Illustrator, reposition labels, change font color for floating labels and creating lines for them. See output.png for the final product.

If you notice small lines between tiles in the cross-hatched patterns (Broncos/Cowboys, etc.) in Illustrator, you can safely ignore them. They won't appear when you export the image. If you can't stand to see them, read this blog post to find out how to hide them.

Makefile

.PHONY: all

.SECONDARY:

# Download .zip files
zip/tl_2015_us_county.zip:
	@mkdir -p $(dir $@)
	@curl -sS -o $@.download 'ftp://ftp2.census.gov/geo/tiger/TIGER2015/COUNTY/tl_2015_us_county.zip'
	@mv $@.download $@
zip/ne_10m_populated_places.zip:
	@# For team label placement.
	@mkdir -p $(dir $@)
	@curl -sS -o $@.download 'http://naciscdn.org/naturalearth/10m/cultural/ne_10m_populated_places.zip'
	@mv $@.download $@

# Unzip
shp/tl_2015_us_county.shp: zip/tl_2015_us_county.zip
	@mkdir -p $(dir $@)
	@unzip -q -o -d $(dir $@) $<
shp/ne_10m_populated_places.shp: zip/ne_10m_populated_places.zip
	@mkdir -p $(dir $@)
	@rm -rf tmp && mkdir tmp
	@unzip -q -o -d tmp $<
	@cp tmp/* $(dir $@)
	@rm -rf tmp

# Convert .shp files
shp/counties-crs.shp: shp/tl_2015_us_county.shp
	@mkdir -p $(dir $@)
	@ogr2ogr \
		-f 'ESRI Shapefile' \
		-t_srs "EPSG:4326" \
		$@ $<
shp/states.shp: shp/tl_2015_us_county.shp
	@# Exclude non-continental counties and merge the rest into state shapes.
	@mkdir -p $(dir $@)
	@ogr2ogr \
		-f 'ESRI Shapefile' \
		-t_srs "EPSG:4326" \
		$@ $< \
		-dialect sqlite \
		-sql "SELECT ST_Union(ST_buffer(Geometry, 0.001)), STATEFP \
			FROM tl_2015_us_county \
			WHERE CAST(STATEFP AS INTEGER) <= 56 AND \
				  CAST(STATEFP AS INTEGER) != 2 AND \
				  CAST(STATEFP AS INTEGER) != 15 \
			GROUP BY STATEFP"

# Reduce .shp files to U.S.
shp/cities.shp: shp/ne_10m_populated_places.shp
	@mkdir -p $(dir $@)
	@ogr2ogr \
		-f 'ESRI Shapefile' \
		-t_srs "EPSG:4326" \
		$@ $< \
		-dialect sqlite \
		-sql "SELECT Geometry, \
				ADM0NAME, \
				NAME, \
				SCALERANK \
			FROM 'ne_10m_populated_places' \
			WHERE ADM0NAME = 'United States of America' AND \
				  SCALERANK <= 10"

# NOTE: shp/counties-data-added.shp was customized in QGIS by adding data to shp/counties-crs, based on FiveThirtyEight map.
shp/counties.shp:
	@mkdir -p $(dir $@)
	@ogr2ogr \
		-f 'ESRI Shapefile' \
		-t_srs "EPSG:4326" \
		$@ shp/counties-data-added.shp \
		-dialect sqlite \
		-sql "SELECT Geometry, \
				team_name, \
				team_color, \
				GEOID \
			FROM 'counties-data-added'"

# Convert SHP to GeoJSON
geojson/counties.json: shp/counties.shp
	@mkdir -p $(dir $@)
	@ogr2ogr \
		-f 'GeoJSON' \
		$@ $<
geojson/states.json: shp/states.shp
	@mkdir -p $(dir $@)
	@ogr2ogr \
		-f 'GeoJSON' \
		$@ $<
cities.json: shp/cities.shp
	@mkdir -p $(dir $@)
	@ogr2ogr \
		-f 'GeoJSON' \
		$@ $<

# Convert GeoJSON to TopoJSON
topojson/counties-fullsize.json: geojson/counties.json
	@mkdir -p $(dir $@)
	@topojson \
		--no-quantization \
		--properties \
		-o $@ \
		-- $<
topojson/states-fullsize.json: geojson/states.json
	@mkdir -p $(dir $@)
	@topojson \
		--no-quantization \
		--properties \
		-o $@ \
		-- $<

# Simplify TopoJSON
counties.json: topojson/counties-fullsize.json
	@mkdir -p $(dir $@)
	@topojson \
		--spherical \
		--properties \
		-s 1e-6 \
		-q 1e3 \
		-o $@ \
		-- $<
states.json: topojson/states-fullsize.json
	@mkdir -p $(dir $@)
	@topojson \
		--spherical \
		--properties \
		-s 1e-7 \
		-q 1e6 \
		-o $@ \
		-- $<

all: counties.json \
	states.json \
	cities.json

counties.json

index.html

nfl_cities.json

output.png

states.json

thumbnail.png