Skip to content

Instantly share code, notes, and snippets.

@senthilthyagarajan
Last active January 28, 2017 21:15
Show Gist options
  • Save senthilthyagarajan/461abfa507509df7003df731d19cb4ab to your computer and use it in GitHub Desktop.
Save senthilthyagarajan/461abfa507509df7003df731d19cb4ab to your computer and use it in GitHub Desktop.
NFL Season 2016
license: gpl-3.0
height: 600

Hover the mouse over the NFL teams to see how they performed during the season 2016-17.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.land {
stroke: #ff0f00;
fill: none;
}
.state-boundary {
fill: none;
stroke: #000fff;
}
.labels {
fill: #444;
font-family:arial;
font-size:0.7em;
}
.nflteam-arc {
fill: none;
}
.nflteam:hover .nflteam-arc {
stroke: #f00;
}
.nflteam-cell {
fill: none;
stroke: #000;
stroke-opacity: 0.1;
pointer-events: all;
}
text {
font: 20px sans-serif;
text-anchor: middle;
}
circle {
fill: steelblue;
fill-opacity: .8;
stroke: #fff;
}
</style>
<body>
<svg width="1280" height="1080"></svg>
<script src="https://d3js.org/d3.v4.min.js" type="text/JavaScript"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var projection = d3.geoAlbers()
.translate([width / 2, height / 2])
.scale(1280);
var radius = d3.scaleSqrt()
.domain([0, 100])
.range([0, 14]);
var path = d3.geoPath()
.projection(projection)
.pointRadius(2.5);
var circles = svg.append("svg:nflteams")
.attr("name", "circles");
var voronoi = d3.voronoi()
.extent([[-1, -1], [width + 1, height + 1]]);
d3.queue()
.defer(d3.json, "http://bl.ocks.org/mbostock/raw/4090846/us.json")
.defer(d3.csv, "nflteams.csv", typeTeam)
.defer(d3.csv, "nflresults2017.csv", typeSeason)
.await(ready);
function typeTeam(d) {
d[0] = +d.longitude;
d[1] = +d.latitude;
d.arcs = {type: "MultiLineString", coordinates: []};
return d;
}
function ready(error, us, nflteams, nflresults2017) {
if (error) return console.error(error);
var teambyName = d3.map(nflteams, function(d) { return d.name; });
nflresults2017.forEach(function(nfl2017) {
var source = teambyName.get(nfl2017.origin),
target = teambyName.get(nfl2017.destination);
source.arcs.coordinates.push([source, target]);
target.arcs.coordinates.push([target, source]);
});
nflteams = nflteams
.filter(function(d) { return d.arcs.coordinates.length; });
svg.append("path")
.datum(topojson.feature(us, us.objects.land))
.attr("class", "land")
.attr("d", path);
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, function(a, b) {return a !== b;}))
.attr("class", "state-boundary")
.attr("d", path);
svg.append("path")
.datum({type: "MultiPoint", coordinates: nflteams})
.attr("class", "nflteam-dots")
.attr("d", path);
var nflteam = svg.selectAll(".nflteam")
.data(nflteams)
.enter().append("g")
.attr("class", "nflteam");
nflteam.append("title")
.text(function(d) { return d.name + "\n" + d.wins + " wins"; });
nflteam.append("path")
.attr("class", "nflteam-arc")
.attr("d", function(d) { return path(d.arcs) })
.text(function(d){return "test" + d.wins;});
nflteam.append("path")
.data(voronoi.polygons(nflteams.map(projection)))
.attr("class", "nflteam-cell")
.attr("d", function(d) { return d ? "M" + d.join("L") + "Z" : null; });
circles.selectAll("circle")
.data(nflteams)
.enter().append("svg:circle")
.attr("r", function(d) { return d.wins*100; });
}
function typeSeason(d) {
d.result= +d.result
;
return d;
}
</script>
origin destination fromscore toscore difference result week
GBP DET 31 24 7 W 17
ARZ RAMS 44 6 38 W 17
KCC SDC 37 27 10 W 17
NOS ATL 32 38 -6 L 17
NYG WAS 19 10 9 W 17
OAK DEN 6 24 -18 L 17
SEA SFO 25 23 2 W 17
BAL CIN 10 27 -17 L 17
BUF NYJ 10 30 -20 L 17
CAR TBB 16 17 -1 L 17
CHI MIN 10 38 -28 L 17
CLE PIT 24 27 -3 L 17
DAL PHI 13 27 -14 L 17
HOU TEN 17 24 -7 L 17
JAC IND 20 24 -4 L 17
NEP MIA 35 14 21 W 17
DET DAL 21 42 -21 L 16
DEN KCC 10 33 -23 L 16
BAL PIT 27 31 -4 L 16
CIN HOU 10 12 -2 L 16
ARZ SEA 34 31 3 W 16
SFO RAMS 22 21 1 W 16
TBB NOS 24 31 -7 L 16
IND OAK 25 33 -8 L 16
ATL CAR 33 16 17 W 16
MIA BUF 34 31 3 W 16
MIN GBP 25 38 -13 L 16
NYJ NEP 3 41 -38 L 16
SDC CLE 17 20 -3 L 16
TEN JAC 17 38 -21 L 16
WAS CHI 41 21 20 W 16
NYG PHI 19 24 -5 L 16
CAR WAS 26 15 11 W 15
TBB DAL 20 26 -6 L 15
NEP DEN 16 3 13 W 15
OAK SDC 19 16 3 W 15
NOS ARZ 48 41 7 W 15
SFO ATL 13 41 -28 L 15
CLE BUF 13 33 -20 L 15
DET NYG 6 17 -11 L 15
GBP CHI 30 27 3 W 15
IND MIN 34 6 28 W 15
JAC HOU 20 21 -1 L 15
PHI BAL 26 27 -1 L 15
PIT CIN 24 20 4 W 15
TEN KCC 19 17 2 W 15
MIA NYJ 34 13 21 W 15
RAMS SEA 3 24 -21 L 15
BAL NEP 23 30 -7 L 14
DAL NYG 7 10 -3 L 14
ATL RAMS 42 14 28 W 14
NOS TBB 11 16 -5 L 14
SEA GBP 10 38 -28 L 14
NYJ SFO 23 17 6 W 14
ARZ MIA 23 26 -3 L 14
CHI DET 17 20 -3 L 14
CIN CLE 23 10 13 W 14
DEN TEN 10 13 -3 L 14
HOU IND 22 17 5 W 14
MIN JAC 25 16 9 W 14
PIT BUF 27 20 7 W 14
SDC CAR 16 28 -12 L 14
WAS PHI 27 22 5 W 14
OAK KCC 13 21 -8 L 14
IND NYJ 41 10 31 W 13
CAR SEA 7 40 -33 L 13
NYG PIT 14 24 -10 L 13
TBB SDC 28 21 7 W 13
WAS ARZ 23 31 -8 L 13
BUF OAK 24 38 -14 L 13
DEN JAC 20 10 10 W 13
DET NOS 28 13 15 W 13
HOU GBP 13 21 -8 L 13
KCC ATL 29 28 1 W 13
RAMS NEP 10 26 -16 L 13
MIA BAL 6 38 -32 L 13
PHI CIN 14 32 -18 L 13
SFO CHI 6 26 -20 L 13
DAL MIN 17 15 2 W 13
GBP PHI 27 13 14 W 12
KCC DEN 30 27 3 W 12
CAR OAK 32 35 -3 L 12
NEP NYJ 22 17 5 W 12
SEA TBB 5 14 -9 L 12
ARZ ATL 19 38 -19 L 12
CIN BAL 14 19 -5 L 12
JAC BUF 21 28 -7 L 12
RAMS NOS 21 49 -28 L 12
NYG CLE 27 13 14 W 12
SDC HOU 21 13 8 W 12
SFO MIA 24 31 -7 L 12
TEN CHI 27 21 6 W 12
PIT IND 28 7 21 W 12
WAS DAL 26 31 -5 L 12
MIN DET 13 16 -3 L 12
HOU OAK 20 27 -7 L 11
GBP WAS 24 42 -18 L 11
NEP SFO 30 17 13 W 11
PHI SEA 15 26 -11 L 11
MIA RAMS 14 10 4 W 11
ARZ MIN 24 30 -6 L 11
BAL DAL 17 27 -10 L 11
BUF CIN 16 12 4 W 11
CHI NYG 16 22 -6 L 11
JAC DET 19 26 -7 L 11
PIT CLE 24 9 15 W 11
TBB KCC 19 17 2 W 11
TEN IND 17 24 -7 L 11
NOS CAR 20 23 -3 L 11
CIN NYG 20 21 -1 L 10
SEA NEP 31 24 7 W 10
DAL PIT 35 30 5 W 10
SFO ARZ 20 23 -3 L 10
MIA SDC 31 24 7 W 10
ATL PHI 15 24 -9 L 10
CHI TBB 10 36 -26 L 10
DEN NOS 25 23 2 W 10
GBP TEN 25 47 -22 L 10
HOU JAC 24 21 3 W 10
KCC CAR 20 17 3 W 10
RAMS NYJ 9 6 3 W 10
MIN WAS 20 26 -6 L 10
CLE BAL 7 28 -21 L 10
BUF SEA 25 31 -6 L 9
DEN OAK 20 30 -10 L 9
IND GBP 31 26 5 W 9
TEN SDC 35 43 -8 L 9
CAR RAMS 13 10 3 W 9
NOS SFO 41 23 18 W 9
DAL CLE 35 10 25 W 9
DET MIN 22 16 6 W 9
JAC KCC 14 19 -5 L 9
NYJ MIA 23 27 -4 L 9
PHI NYG 23 28 -5 L 9
PIT BAL 14 21 -7 L 9
ATL TBB 43 28 15 W 9
MIN CHI 10 20 -10 L 8
PHI DAL 23 29 -6 L 8
GBP ATL 32 33 -1 L 8
SDC DEN 19 27 -8 L 8
ARZ CAR 20 30 -10 L 8
DET HOU 13 20 -7 L 8
KCC IND 30 14 16 W 8
NEP BUF 41 25 16 W 8
NYJ CLE 31 28 3 W 8
OAK TBB 30 24 6 W 8
SEA NOS 20 25 -5 L 8
WAS CIN 27 27 0 D 8
JAC TEN 22 36 -14 L 8
HOU DEN 9 27 -18 L 7
SEA ARZ 6 6 0 D 7
NEP PIT 27 16 11 W 7
SDC ATL 33 30 3 W 7
TBB SFO 34 17 17 W 7
BAL NYJ 16 24 -8 L 7
BUF MIA 25 28 -3 L 7
CLE CIN 17 31 -14 L 7
IND TEN 34 26 8 W 7
MIN PHI 10 21 -11 L 7
NOS KCC 21 27 -6 L 7
OAK JAC 33 16 17 W 7
WAS DET 17 20 -3 L 7
NYG RAMS 17 10 7 W 7
CHI GBP 10 26 -16 L 7
NYJ ARZ 3 28 -25 L 6
IND HOU 23 26 -3 L 6
ATL SEA 24 26 -2 L 6
DAL GBP 30 16 14 W 6
KCC OAK 26 10 16 W 6
BAL NYG 23 27 -4 L 6
CAR NOS 38 41 -3 L 6
CIN NEP 17 35 -18 L 6
CLE TEN 26 28 -2 L 6
JAC CHI 17 16 1 W 6
RAMS DET 28 31 -3 L 6
PHI WAS 20 27 -7 L 6
PIT MIA 15 30 -15 L 6
SFO BUF 16 45 -29 L 6
DEN SDC 13 21 -8 L 6
TBB CAR 17 14 3 W 5
NYG GBP 16 23 -7 L 5
BUF RAMS 30 19 11 W 5
CIN DAL 14 28 -14 L 5
SDC OAK 31 34 -3 L 5
ATL DEN 23 16 7 W 5
CHI IND 23 29 -6 L 5
HOU MIN 13 31 -18 L 5
NEP CLE 33 13 20 W 5
NYJ PIT 13 31 -18 L 5
PHI DET 23 24 -1 L 5
TEN MIA 30 17 13 W 5
WAS BAL 16 10 6 W 5
ARZ SFO 33 21 12 W 5
NYG MIN 10 24 -14 L 4
KCC PIT 14 43 -29 L 4
DAL SFO 24 17 7 W 4
RAMS ARZ 17 13 4 W 4
NOS SDC 35 34 1 W 4
DEN TBB 27 7 20 W 4
BUF NEP 16 0 16 W 4
CAR ATL 33 48 -15 L 4
CLE WAS 20 31 -11 L 4
DET CHI 14 17 -3 L 4
OAK BAL 28 27 1 W 4
SEA NYJ 27 17 10 W 4
TEN HOU 20 27 -7 L 4
IND JAC 27 30 -3 L 4
MIA CIN 7 22 -15 L 4
ATL NOS 45 32 13 W 3
CHI DAL 17 31 -14 L 3
NYJ KCC 3 24 -21 L 3
PIT PHI 3 34 -31 L 3
SDC IND 22 26 -4 L 3
RAMS TBB 37 32 5 W 3
SFO SEA 18 37 -19 L 3
ARZ BUF 18 33 -15 L 3
BAL JAC 19 17 2 W 3
CLE MIA 24 30 -6 L 3
DEN CIN 29 17 12 W 3
DET GBP 27 34 -7 L 3
MIN CAR 22 10 12 W 3
OAK TEN 17 10 7 W 3
WAS NYG 29 27 2 W 3
HOU NEP 0 27 -27 L 3
PHI CHI 29 14 15 W 2
GBP MIN 14 17 -3 L 2
ATL OAK 35 28 7 W 2
IND DEN 20 34 -14 L 2
JAC SDC 14 38 -24 L 2
SEA RAMS 3 9 -6 L 2
TBB ARZ 7 40 -33 L 2
BAL CLE 25 20 5 W 2
CIN PIT 16 24 -8 L 2
DAL WAS 27 23 4 W 2
KCC HOU 12 19 -7 L 2
MIA NEP 24 31 -7 L 2
NOS NYG 13 16 -3 L 2
SFO CAR 27 46 -19 L 2
TEN DET 16 15 1 W 2
NYJ BUF 37 31 6 W 2
RAMS SFO 0 28 -28 L 1
PIT WAS 38 16 22 W 1
NEP ARZ 23 21 2 W 1
DET IND 39 35 4 W 1
NYG DAL 20 19 1 W 1
MIA SEA 10 12 -2 L 1
BUF BAL 7 13 -6 L 1
CHI HOU 14 23 -9 L 1
CIN NYJ 23 22 1 W 1
CLE PHI 10 29 -19 L 1
GBP JAC 27 23 4 W 1
MIN TEN 25 16 9 W 1
OAK NOS 35 34 1 W 1
SDC KCC 27 33 -6 L 1
TBB ATL 31 24 7 W 1
CAR DEN 21 -21 L 1
name latitude longitude wins
CHI 41.53 -87.38 2
GBP 44.3 -88.01 9
ARZ 33.27 -112.05 5
ATL 33.45 -84.23 13
BAL 39.17 -76.37 8
BUF 42.54 -78.53 6
CAR 35.14 -80.5 5
CIN 39.06 -84.31 8
CLE 41.3 -81.41 1
DAL 32.47 -96.48 13
DEN 39.43 -105.01 8
DET 42.2 -83.03 9
HOU 29.46 -95.22 9
IND 39.46 -86.09 8
JAC 30.2 -81.4 5
KCC 39.06 -94.37 12
MIA 25.46 -80.12 9
MIN 44.59 -93.13 9
NEP 42.21 -71.04 12
NOS 29.58 -90.07 6
NYG 40.43 -74.01 11
NYJ 40.43 -74.01 4
OAK 37.47 -122.13 11
PHI 39.57 -75.07 8
PIT 40.26 -80 9
RAMS 38.38 -90.11 3
SDC 32.43 -118.09 8
SFO 37.48 -122.24 4
SEA 47.36 -122.2 11
TBB 27.57 -82.27 8
TEN 36.09 -86.48 7
WAS 38.54 -77.01 9
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment