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

<!DOCTYPE html>
<head>
<title>FiveThirtyEight NFL map reproduction</title>
<meta charset="utf-8">
<style>

  body {
    padding: 0;
    margin: 0;
    font-family: helvetica, arial, sans-serif;
    background-color: #F0F0F0;
  }

  .counties {
    opacity: 1;
    stroke-width: 0.7px;
  }

  .states-border {
    fill: none;
    stroke: gray;
    stroke-opacity: 0.2;
    stroke-width: 1px;
  }

  .team-label {
    text-anchor: start;
    opacity: 1;
    fill: #FFF;
    font-weight: 100;
    letter-spacing: 0.2em;
    font-family: helvetica, arial, sans-serif;
    font-size: 13px;
  }

  .city-label {
    text-anchor: middle;
    margin: 0;
    font-size: 15px;
    line-height: 14px;
    font-weight: 500;
    text-align: right;
    opacity: 0.6;
    color: #000;
  }

</style>
</head>
<body>

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/queue.v1.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>

  var width = 960,
      height = 600;

  var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

  var map_projection = d3.geo.albersUsa()
    .scale(1250)
    .translate([width / 2, height / 2]);

  var map_path = d3.geo.path()
    .projection(map_projection);

  queue()
    .defer(d3.json, "counties.json")
    .defer(d3.json, "nfl_cities.json")
    .defer(d3.json, "states.json")
    .await(ready);

  function ready(error, counties, cities, states) {
    if (error) throw error;

    // Pattern
    var defs = svg.append('defs');

    var dashWidth = 8;

    // 49ers/Raiders
    var pattern1 = defs.append('pattern')
        .attr('id', 'blackRed')
        .attr('patternUnits', 'userSpaceOnUse')
        .attr('patternTransform', 'rotate(45 2 2)')
        .attr('width', dashWidth)
        .attr('height', dashWidth)
        .attr('x', 0)
        .attr('y', 0);
    pattern1.append('rect')
        .attr('x', 0)
        .attr('y', 0)
        .attr('width', dashWidth)
        .attr('height', dashWidth)
        .attr('fill-opacity', 1.0)
        .attr('fill', '#E95454');  // Red
    pattern1.append('path')
      .attr('stroke', '#545454')  // Black
      .attr('stroke-width', 8)
      .attr("d", "M 0,0 l " + "0," + dashWidth);

    // Cowboys/Broncos
    var pattern2 = defs.append('pattern')
        .attr('id', 'blueOrange')
        .attr('patternUnits', 'userSpaceOnUse')
        .attr('patternTransform', 'rotate(45 2 2)')
        .attr('width', dashWidth)
        .attr('height', dashWidth)
        .attr('x', 0)
        .attr('y', 0);
    pattern2.append('rect')
        .attr('x', 0)
        .attr('y', 0)
        .attr('width', dashWidth)
        .attr('height', dashWidth)
        .attr('fill-opacity', 1.0)
        .attr('fill', '#546D9F');  // Blue
    pattern2.append('path')
      .attr('stroke', '#FA8B54')  // Orange
      .attr('stroke-width', 8)
      .attr("d", "M 0,0 l " + "0," + dashWidth);

    // Giants/Jets
    var pattern3 = defs.append('pattern')
        .attr('id', 'blueGreen')
        .attr('patternUnits', 'userSpaceOnUse')
        .attr('patternTransform', 'rotate(45 2 2)')
        .attr('width', dashWidth)
        .attr('height', dashWidth)
        .attr('x', 0)
        .attr('y', 0);
    pattern3.append('rect')
        .attr('x', 0)
        .attr('y', 0)
        .attr('width', dashWidth)
        .attr('height', dashWidth)
        .attr('fill-opacity', 1.0)
        .attr('fill', '#5490E9');  // Blue
    pattern3.append('path')
      .attr('stroke', '#548C76')  // Jets
      .attr('stroke-width', 8)
      .attr("d", "M 0,0 l " + "0," + dashWidth);

    // Giants/Patriots
    var pattern4 = defs.append('pattern')
        .attr('id', 'blueRed')
        .attr('patternUnits', 'userSpaceOnUse')
        .attr('patternTransform', 'rotate(45 2 2)')
        .attr('width', dashWidth)
        .attr('height', dashWidth)
        .attr('x', 0)
        .attr('y', 0);
    pattern4.append('rect')
        .attr('x', 0)
        .attr('y', 0)
        .attr('width', dashWidth)
        .attr('height', dashWidth)
        .attr('fill-opacity', 1.0)
        .attr('fill', '#5490E9');  // Blue
    pattern4.append('path')
      .attr('stroke', '#FA5454')  // Red
      .attr('stroke-width', 8)
      .attr("d", "M 0,0 l " + "0," + dashWidth);

    // Draw counties
    svg.append("g").attr('id', 'Counties').selectAll("path")
      .data(topojson.feature(counties, counties.objects.counties).features)
    .enter().append("path")
      .attr("class", "counties")
      .attr("d", map_path)
      .attr('fill', function(d) {
        var color = d.properties.team_color;
        if (color === 'red_black') {
          return 'url(#blackRed)';
        } else if (color === 'orange_blue') {
          return 'url(#blueOrange)';
        } else if (color === 'green_blue') {
          return 'url(#blueGreen)';
        } else if (color === 'blue_red') {
          return 'url(#blueRed)';
        } else if (color === 'orange') {
          return '#FA8B54';
        } else {
          return d.properties.team_color;
        }
      })
      .attr("stroke", function(d) {
        var color = d.properties.team_color;
        if (color === 'red_black') {
          return 'url(#blackRed)';
        } else if (color === 'orange_blue') {
          return 'url(#blueOrange)';
        } else if (color === 'green_blue') {
          return 'url(#blueGreen)';
        } else if (color === 'blue_red') {
          return 'url(#blueRed)';
        } else if (color === 'orange') {
          return '#FA8B54';
        } else {
          return d.properties.team_color;
        }
      });

    // Draw state borders
    // // svg.append('g').attr('id', 'States').selectAll("path")
    // //   .datum(topojson.mesh(states, states.objects['states'], function(a, b) { return a !== b; }))
    // //   .attr("class", "states-border")
    // //   .attr("d", map_path);

    svg.append('g').attr('id', 'States').selectAll("path")
        .data(topojson.feature(states, states.objects['states']).features)
      .enter().append('path')
        .attr("class", "states-border")
        .attr("d", map_path);

    // Write NFL cities labels
    svg.append('g').attr('id', 'Teams').selectAll('.team-label')
        .data(cities.features)
      .enter().append('text')
        .attr("class", "team-label")
        .each(function(d) {
          var team_labels = document.getElementById(d.properties.NAME);
          if (team_labels) {
            return;
          }
          d3.select(this)
            .attr("transform", function(d) { return "translate(" + map_path.centroid(d) + ")"; })
            .attr("id", d.properties.NAME)
            .text(function(d) { return d.properties.NAME });
        });

  }

  // Allows iframe on bl.ocks.org.
  d3.select(self.frameElement).style("height", height + "px");

</script>
</body>
</html>

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

nfl_cities.json

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "VIKINGS",
        "SCALERANK": 2
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -93.25373219666352,
          44.98192512606186
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "SEAHAWKS",
        "SCALERANK": 2
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.34193084586849,
          47.571947912530732
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "CARDINALS",
        "SCALERANK": 2
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -112.071937559694675,
          33.541925736367602
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "CHARGERS",
        "SCALERANK": 2
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -117.181935728660264,
          32.821969681677331
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "RAMS",
        "SCALERANK": 2
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -90.24192636982859,
          38.636963578185146
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "SAINTS",
        "SCALERANK": 2
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -90.04191273864285,
          29.996948319361476
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "COWBOYS",
        "SCALERANK": 2
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -96.841962787498176,
          32.821969681677331
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "PATS",
        "SCALERANK": 2
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -71.071959532186838,
          42.331906001702293
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "PATS/GIANTS",
        "SCALERANK": 2
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -71.071959532186838,
          42.331906001702293
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "BUCS",
        "SCALERANK": 2
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -82.46056670996677,
          27.94893379298594
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "EAGLES",
        "SCALERANK": 2
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -75.171941832007917,
          40.001919022526465
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "LIONS",
        "SCALERANK": 2
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -83.082001646492699,
          42.331906001702293
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "49ERS",
        "SCALERANK": 1
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -122.417168773552234,
          37.769195629687431
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "BRONCOS",
        "SCALERANK": 1
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -104.985961810968206,
          39.741133906965501
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "TEXANS",
        "SCALERANK": 1
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -95.341925149145993,
          29.821920243188853
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "DOLPHINS",
        "SCALERANK": 1
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -80.226051939450031,
          25.789556555021534
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "FALCONS",
        "SCALERANK": 1
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -84.40189524187565,
          33.831959712605851
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "BEARS",
        "SCALERANK": 1
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -87.752000832709314,
          41.831936519278429
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "REDSKINS",
        "SCALERANK": 0
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -77.011364439437145,
          38.901495235087047
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "GIANTS",
        "SCALERANK": 0
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -73.981962787406815,
          40.75192492259464
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "JETS/GIANTS",
        "SCALERANK": 0
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -73.981962787406815,
          40.75192492259464
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "RAVENS",
        "SCALERANK": 4
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -76.621930845685483,
          39.301935908916732
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "49ERS/RAIDERS",
        "SCALERANK": 3
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -123.957721,
          40.757806
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "PACKERS",
        "SCALERANK": 6
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -88.000013877092158,
          44.529980895051317
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "STEELERS",
        "SCALERANK": 3
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -80.00193125260023,
          40.43194445384313
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "CHIEFS",
        "SCALERANK": 4
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -94.606040077545799,
          39.109034368397488
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "COLTS",
        "SCALERANK": 4
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -86.171993915385201,
          39.751934281314504
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "BROWNS",
        "SCALERANK": 3
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -81.696944069989627,
          41.471932653717317
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "BENGALS",
        "SCALERANK": 3
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -84.458868508477337,
          39.163830643616848
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "TITANS",
        "SCALERANK": 3
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -86.781930845726322,
          36.171920243214061
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "JAGS",
        "SCALERANK": 4
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -81.671932676760491,
          30.331966629909683
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "PANTHERS",
        "SCALERANK": 7
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -82.554144736445323,
          35.601197732580772
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "BILLS",
        "SCALERANK": 3
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -78.881947935538278,
          42.881924108800831
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ADM0NAME": "United States of America",
        "NAME": "BRONCOS/COWBOYS",
        "SCALERANK": 4
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -106.641330812387992,
          35.104974791498023
        ]
      }
    }
  ]
}