block by thomasthoren afb2950c18ddd2d64a4c

FiveThirtyEight NFL map reproduction

Full Screen

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.

index.html

Makefile

nfl_cities.json