Created
February 22, 2016 15:55
-
-
Save CafeConVega/ed643eefaee0879d3947 to your computer and use it in GitHub Desktop.
Week 6: Line Plot
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
h1, | |
h2 { | |
font-family: 'Graduate', cursive; | |
text-align: center; | |
text-transform: uppercase; | |
} | |
p { | |
font-family: 'Roboto', sans-serif; | |
text-align: center; | |
} | |
table { | |
font-family: 'Roboto', sans-serif; | |
font-size: .9em; | |
width: 80vw; | |
margin-left: auto; | |
margin-right: auto; | |
text-align: center; | |
table-layout: fixed; | |
border-collapse: collapse; | |
border-spacing: .5em; | |
} | |
td { | |
padding: .5em; | |
border-right: 1px dotted #E6E6E6; | |
} | |
td:last-of-type { | |
border-right: 0px; | |
} | |
thead tr { | |
border-bottom: 1px solid black; | |
cursor: pointer; | |
} | |
thead tr:hover { | |
cursor: grab; | |
} | |
tbody tr:hover { | |
color: white; | |
background-color: darkgray; | |
} | |
svg { | |
display: flex; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
.tick, | |
.xlabel { | |
font-family: 'Roboto', sans-serif; | |
fill: grey; | |
} | |
.domain { | |
display: none; | |
} | |
.HOU { | |
fill: #B31B34; | |
stroke: #B31B34; | |
stroke-width: 3px; | |
} | |
.MIA { | |
fill: #008D97; | |
stroke: #008D97; | |
stroke-width: 3px; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: black; | |
stroke-width: 1px; | |
} | |
.line { | |
fill: none; | |
stroke: gray; | |
stroke-width: 2px; | |
stroke-opacity: 80%; | |
} | |
.line.unfocused{ | |
stroke-opacity: 40%; | |
stroke-width: 1px; | |
} | |
.line.focused { | |
stroke-width: 3px; | |
stroke-opacity: 100%; | |
/* stroke: black;*/ | |
} | |
.axis text { | |
font-family: sans-serif; | |
font-size: 11px; | |
} | |
.tooltip { | |
position: absolute; | |
z-index: 10; | |
} | |
.tooltip p { | |
/* background-color: white;*/ | |
color: white; | |
border: none; | |
padding: 2px; | |
} | |
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>NFL Historical Average Ticket Prices</title> | |
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> | |
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script> | |
<link href="custom.css" rel="stylesheet" type="text/css" /> | |
<link href='https://fonts.googleapis.com/css?family=Graduate|Roboto' rel='stylesheet' type='text/css'> | |
</head> | |
<body> | |
<h1>NFL Historical Average Ticket Prices</h1> | |
<h2></h2> | |
<p>Source: <a href="https://sites.google.com/site/rodswebpages/codes" target="_blank">Rod's Sports Economics</a></p> | |
<p>This is a time series chart of average ticket prices for NFL games from 1985 to 2014. Hover over a line to get more information.</p> | |
<script type="text/javascript"> | |
var fullwidth = 1200; | |
var fullheight = 600; | |
var margin = { | |
top: 20, | |
right: 100, | |
bottom: 40, | |
left: 100 | |
}; | |
var width = fullwidth - margin.left - margin.right; | |
var height = fullheight - margin.top - margin.bottom; | |
//Set up date formatting and years | |
var dateFormat = d3.time.format("%Y"); | |
var xScale = d3.time.scale() | |
.range([0, width]); | |
var yScale = d3.scale.linear() | |
.range([0, height]); | |
//Configure axis generators | |
var xAxis = d3.svg.axis() | |
.scale(xScale) | |
.orient("bottom") | |
.ticks(30) | |
.tickFormat(function (d) { | |
return dateFormat(d); | |
}) | |
.innerTickSize([0]); | |
var yAxis = d3.svg.axis() | |
.scale(yScale) | |
.orient("left") | |
.innerTickSize([0]); | |
//Configure line generator | |
// each line dataset must have a d.year and a d.amount for this to work. | |
var line = d3.svg.line() | |
.x(function (d) { | |
return xScale(dateFormat.parse(d.year)); | |
}) | |
.y(function (d) { | |
return yScale(+d.amount); | |
}); | |
// add a tooltip to the page - not to the svg itself! | |
var tooltip = d3.select("body") | |
.append("div") | |
.attr("class", "tooltip"); | |
//Create the empty SVG image | |
var svg = d3.select("body") | |
.append("svg") | |
.attr("width", fullwidth) | |
.attr("height", fullheight) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
//Load in contents of CSV file | |
d3.csv("nflwaticketindex.csv", function (error, data) { | |
if (error) { | |
console.log(error); //Log the error. | |
} else { | |
console.log(data); //Log the data. | |
} | |
var years = d3.keys(data[0]).slice(0, 30); | |
//Create a new, empty array to hold our restructured dataset | |
var dataset = []; | |
//Loop once for each row in data | |
data.forEach(function (d, i) { | |
var myPrices = []; | |
//Loop through all the years - and get the prices for this data element | |
years.forEach(function (y) { | |
// If value is not empty | |
if (d[y]) { | |
//Add a new object to the new prices data array - for year, amount | |
myPrices.push({ | |
team: d.Team, | |
year: y, | |
amount: d[y] // this is the value for, for example, d["2004"] | |
}); | |
} | |
}); | |
//Create new object with this team's name and empty array | |
dataset.push({ | |
team: d.Team, | |
hex: d.hex, | |
prices: myPrices | |
}); | |
}); // end of the data.forEach loop | |
console.log(dataset); | |
console.log(dataset[0].team); | |
//Set scale domains - max and min of the years | |
xScale.domain( | |
d3.extent(years, function (d) { | |
return dateFormat.parse(d); | |
})); | |
// max of prices to 0 (reversed, remember) - [max, 0] for y scale | |
yScale.domain([ | |
d3.max(dataset, function (d) { | |
return d3.max(d.prices, function (d) { | |
return +d.amount; | |
}); | |
}), | |
0 | |
]); | |
//Make a group for each team - just for the data binding | |
var groups = svg.selectAll("g.lines") | |
.data(dataset) | |
.enter() | |
.append("g") | |
.attr("class", "lines"); | |
//Within each group, create a new line/path, | |
//binding just the prices data to each one | |
groups.selectAll("path") | |
.data(function (d) { | |
return [d.prices]; | |
}) | |
.enter() | |
.append("path") | |
.attr("class", "line") | |
.attr("d", line); | |
//Axes | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis); | |
svg.append("g") | |
.attr("class", "y axis") | |
.call(yAxis); | |
// here we add the mouseover and mouseout effect, and use the id we created to style it. | |
// this is on the g elements, because the country name is in the data there. | |
// the line itself has data of an array of x,y values. | |
d3.selectAll("g.lines") | |
.on("mouseover", mouseoverFunc) | |
.on("mouseout", mouseoutFunc) | |
.on("mousemove", mousemoveFunc); // this version calls a named function. | |
//Labeling two interesting lines | |
svg.append("text") | |
.attr("transform", "translate(" + (width + 3) + "," + yScale(dataset[19].prices[dataset[0].prices.length - 1].amount) + ")") | |
.attr("dy", ".35em") | |
.attr("text-anchor", "start") | |
.text("New England"); | |
svg.append("text") | |
.attr("transform", "translate(" + (width + 3) + "," + yScale(dataset[28].prices[dataset[0].prices.length - 1].amount) + ")") | |
.attr("dy", ".35em") | |
.attr("text-anchor", "start") | |
.text("San Francisco"); | |
svg.append("text") | |
.attr("transform", "translate(" + (width - 712) + "," + yScale(dataset[23].prices[0].amount) + ")") | |
.attr("dy", ".35em") | |
.attr("text-anchor", "start") | |
.text("Oakland"); | |
}); // end of data csv | |
function mouseoverFunc(d) { | |
// line styling: | |
d3.selectAll("path.line") | |
.classed("unfocused", true); | |
// now undo the unfocus on the current line and set to focused. | |
d3.select(this) | |
.select("path.line") | |
.classed("unfocused", false) | |
.classed("focused", true) | |
.style("stroke", d.hex); //use each team's color for the mouseover | |
tooltip | |
.style("display", null) // this removes the display none setting from it | |
.style("background", d.hex) | |
.html("<p>" + d.team + ": From $" + d.prices[0].amount + " To $" + d.prices[d.prices.length - 1].amount + "</p>"); | |
} | |
function mouseoutFunc() { | |
// this removes special classes for focusing from all lines. Back to default. | |
d3.selectAll("path.line").classed("unfocused", false).classed("focused", false).style("stroke", null); | |
tooltip.style("display", "none"); // this sets it to invisible! | |
} | |
function mousemoveFunc(d) { | |
tooltip | |
.style("top", (d3.event.pageY - 10) + "px") | |
.style("left", (d3.event.pageX + 10) + "px"); | |
} | |
</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
1985 | 1986 | 1987 | 1988 | 1989 | 1990 | 1991 | 1992 | 1993 | 1994 | 1995 | 1996 | 1997 | 1998 | 1999 | 2000 | 2001 | 2002 | 2003 | 2004 | 2005 | 2006 | 2007 | 2008 | 2009 | 2010 | 2011 | 2012 | 2013 | 2014 | Team | hex | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
13.3 | 13.4 | 16.2 | 16.3 | 18.7 | 18.7 | 24.67 | 28.07 | 28.07 | 27 | 32.23 | 31.49 | 31.49 | 32.15 | 40.1 | 40.42 | 39.14 | 29.78 | 34.63 | 43.71 | 52.67 | 60.34 | 65.52 | 63.95 | 74.23 | 68.22 | 68.91 | 76.78 | 83.71 | 78.58 | Atlanta | #A71930 | |
35.68 | 37.44 | 42.93 | 42.75 | 42.75 | 50.14 | 50.14 | 53.03 | 53.03 | 62.01 | 62.01 | 77.2 | 77.2 | 86.92 | 86.92 | 86.92 | 91.92 | 100.19 | 100.19 | Baltimore | #241773 | ||||||||||||
12.7 | 12.7 | 14.3 | 15.5 | 20.3 | 23.1 | 27.67 | 28.71 | 28.71 | 33.46 | 33.46 | 33.46 | 35.58 | 35.58 | 40.89 | 46.06 | 46.06 | 37.61 | 42.55 | 37.13 | 39.37 | 41.29 | 46.46 | 51.24 | 51.25 | 59.19 | 59.19 | 58.36 | 57.75 | 62.01 | Buffalo | #00338D | |
37.92 | 39.26 | 55.47 | 55.47 | 55.45 | 57.92 | 60.3 | 42.27 | 42.27 | 50.23 | 54.86 | 60.44 | 60.44 | 63.32 | 63.32 | 66.17 | 63.32 | 63.32 | 66.84 | 72.44 | Carolina | #0085CA | |||||||||||
14.5 | 16.4 | 16.4 | 21.4 | 23.3 | 23.3 | 28.5 | 27.63 | 29.41 | 32.23 | 35.1 | 38.18 | 38.18 | 38.18 | 38.18 | 42.7 | 42.7 | 51.42 | 65 | 65.56 | 68.89 | 77.78 | 84.89 | 88.33 | 88.34 | 93.55 | 101.55 | 110.91 | 103.6 | 108.44 | Chicago | #C83803 | |
13.8 | 15.7 | 18 | 18 | 20.9 | 23.8 | 25.63 | 24.78 | 24.78 | 28.43 | 31.99 | 34.09 | 34.09 | 37.77 | 37.77 | 56.21 | 56.21 | 47.31 | 47.28 | 52.13 | 55.72 | 60.85 | 65.85 | 69.85 | 69.87 | 72.04 | 72.04 | 69.01 | 68.96 | 71.26 | Cincinatti | #000000 | |
14.8 | 17.5 | 17.5 | 21.3 | 21.3 | 23.7 | 22 | 26.24 | 27.27 | 27.27 | 32.61 | 44.66 | 43.76 | 45 | 43.09 | 45.71 | 45.71 | 48.79 | 48.79 | 48.79 | 54.41 | 54.67 | 54.51 | 54.2 | 54.2 | 54.2 | 54.2 | Cleveland | #22150C | ||||
18.3 | 18.3 | 23.5 | 23.5 | 23.3 | 22.8 | 28.33 | 26.71 | 32.85 | 32.85 | 38.25 | 38.25 | 37.59 | 43.48 | 47.9 | 47.9 | 50.01 | 50 | 53.06 | 53.06 | 66.2 | 66.12 | 84.12 | 84.12 | 110.2 | 110.2 | 110.2 | 110.2 | 110.2 | 110.2 | Dallas | #002244 | |
16.1 | 18.5 | 18.8 | 21.5 | 25.7 | 25.7 | 24.67 | 27.76 | 27.76 | 32.34 | 33.06 | 35.83 | 35.83 | 35.83 | 46.4 | 46.4 | 77.41 | 52.5 | 57.28 | 61.18 | 63.94 | 68.55 | 71.46 | 76.75 | 76.75 | 76.75 | 76.75 | 82.23 | 84.27 | 87.96 | Denver | #FB4F14 | |
10.9 | 13.9 | 13.9 | 13.9 | 16.4 | 18.5 | 18.17 | 25 | 25 | 29.1 | 28.54 | 33.7 | 35.43 | 35.79 | 35.65 | 39.05 | 39.05 | 50.23 | 53.91 | 56.63 | 56.9 | 56.9 | 59.09 | 66.39 | 65.68 | 62.4 | 62.4 | 67.6 | 67.6 | 72.98 | Detroit | #005A8B | |
13 | 14.9 | 14.9 | 14.9 | 19.3 | 21.2 | 20 | 25.13 | 26.13 | 26.13 | 26.13 | 30.61 | 36.51 | 36.51 | 42.57 | 48.46 | 53.51 | 50.73 | 54.4 | 54.4 | 56.13 | 58.39 | 63.39 | 63.39 | 63.42 | 72.36 | 75.65 | 78.84 | 82.61 | 85.61 | Green Bay | #203731 | |
14.6 | 14.6 | 14.6 | 18.4 | 20.3 | 22.1 | 23.67 | 29.45 | 29.45 | 31.46 | 31.32 | 31.33 | 50.99 | 50.67 | 56.17 | 56.73 | 56.97 | 62.41 | 66.69 | 68.79 | 73.4 | 73.4 | 78.77 | 88.98 | 88.98 | Houston | #03202F | ||||||
18.5 | 18.5 | 18.5 | 21 | 21 | 25.4 | 22.33 | 26.48 | 26.48 | 26.48 | 28.18 | 31.76 | 34.15 | 34.15 | 42.09 | 46.98 | 54.55 | 46.77 | 47.39 | 54.35 | 60.06 | 60.06 | 70.98 | 81.13 | 82.77 | 85.34 | 85.34 | 85.34 | 86.32 | 86.32 | Indianapolis | #002C5F | |
36.59 | 36.59 | 54.24 | 56.71 | 56.71 | 60.7 | 62.85 | 62.85 | 62.85 | 40.8 | 40.16 | 45.08 | 49.38 | 55.3 | 57.34 | 57.34 | 59.54 | 59.54 | 68.44 | 57.65 | Jacksonville | #9F792C | |||||||||||
11.6 | 11.6 | 13.4 | 13.4 | 15.6 | 18 | 20.33 | 22.62 | 27.03 | 29.16 | 31.22 | 34.2 | 38.02 | 41.98 | 41.69 | 46.15 | 52.18 | 54.47 | 58.4 | 67.26 | 66.49 | 67.33 | 73.92 | 80.69 | 68.44 | 68.44 | 66.66 | 64.92 | 64.92 | 68.38 | Kansas City | #E31837 | |
17.6 | 19.6 | 22.9 | 22.9 | 23.4 | 25 | 23.33 | 25.94 | 31.32 | 31.32 | LA Raiders | #000000 | |||||||||||||||||||||
19 | 19 | 19 | 22.7 | 22.7 | 23.9 | 21.67 | 27.67 | 29.13 | 29.13 | LA Rams | #B3995D | |||||||||||||||||||||
17.7 | 19.1 | 24.5 | 24.5 | 24.5 | 25.1 | 25.33 | 28.42 | 28.42 | 29.65 | 32.56 | 35.33 | 42.16 | 42.16 | 43.59 | 45.1 | 56.34 | 45.83 | 46.46 | 48.51 | 51.96 | 59.35 | 66.11 | 66.11 | 66.74 | 70.54 | 70.32 | 71.14 | 71.14 | 65.16 | Miami | #008E97 | |
12.9 | 12.9 | 15.5 | 17.2 | 19.8 | 19.8 | 25 | 25 | 29.88 | 29.79 | 33.94 | 36.95 | 33.05 | 35.74 | 44.62 | 48.28 | 52.65 | 56.37 | 59 | 61.63 | 67.94 | 71.32 | 70.91 | 73.23 | 73.2 | 75.69 | 75.69 | 75.69 | 78.69 | 88.53 | Minnesota | #4F2683 | |
15.6 | 20.5 | 20.5 | 22.6 | 28.2 | 27.9 | 29.67 | 26.74 | 28.48 | 34.34 | 34.22 | 34.21 | 39.45 | 39.45 | 39.45 | 47.77 | 47.77 | 76.19 | 75.33 | 75.33 | 90.89 | 90.89 | 90.89 | 117.84 | 117.84 | 117.84 | 117.84 | 117.84 | 117.84 | 122 | New England | #002244 | |
15.3 | 15.3 | 15.3 | 18.2 | 20.3 | 22.9 | 23.67 | 24.07 | 27.07 | 26.71 | 32.17 | 34.84 | 34.82 | 34.47 | 41.96 | 45.56 | 49.88 | 46.32 | 43.87 | 42.36 | 51.31 | 54.86 | 54.86 | 62.22 | 62.23 | 74.99 | 74.99 | 74.99 | 74.99 | 84.87 | New Orleans | #9F8958 | |
13.5 | 13.5 | 17.2 | 17.2 | 22 | 21.8 | 24.5 | 28.74 | 28.74 | 35.59 | 35.59 | 35.59 | 40.91 | 40.91 | 45.9 | 45.9 | 55.93 | 56.47 | 61.67 | 66.67 | 71.59 | 76.59 | 81.29 | 88.06 | 88.64 | 111.69 | 111.69 | 111.69 | 111.69 | 111.69 | NY Giants | #0B2265 | |
14.2 | 16.1 | 18.9 | 18.9 | 21.3 | 21.1 | 22.5 | 25 | 25 | 25 | 25 | 25.33 | 30.5 | 35.92 | 41.5 | 51.48 | 57.16 | 57.2 | 62.2 | 66.39 | 71.32 | 74.96 | 80.7 | 86.99 | 86.98 | 114.64 | 120.85 | 117.94 | 110.28 | 105.66 | NY Jets | #203731 | |
51.41 | 51.41 | 52.84 | 52.84 | 51.68 | 51.74 | 51.74 | 58.89 | 58.89 | 58.89 | 58.89 | 62.23 | 62.23 | 62.23 | 62.23 | 62.23 | 62.23 | 62.23 | 64.8 | 64.8 | Oakland Raiders | #000000 | |||||||||||
15.1 | 16.3 | 18.1 | 21.9 | 26 | 27 | 30 | 35 | 35 | 40 | 40 | 42.83 | 42.83 | 37.59 | 37.59 | 43.89 | 46.19 | 46.19 | 64 | 61.91 | 66.09 | 69 | 69 | 69 | 69 | 69 | 69 | 69 | 93.01 | 98.69 | Philadelphia | #004953 | |
35.1 | 33.6 | 26.7 | 30 | 27.69 | 27.69 | 27.69 | 31.97 | 35.49 | 39.65 | 39.65 | 40.1 | 39.65 | 37.6 | 33.68 | 35.99 | 39.72 | 44.98 | 51.32 | 56.71 | 65.08 | 67.09 | 67.69 | 67.78 | 68 | 79.56 | 82.15 | Phoenix | #97233F | ||||
14.1 | 15.9 | 16 | 18.7 | 18.7 | 18.7 | 29.25 | 25.84 | 25.84 | 30.71 | 30.71 | 35.76 | 35.76 | 35.76 | 40.76 | 40.76 | 62.03 | 49.83 | 54.55 | 54.55 | 59.19 | 59.19 | 65.94 | 67.47 | 69.07 | 74.32 | 74.32 | 74.32 | 81.13 | 83.97 | Pittsburg | #000000 | |
17.9 | 19.7 | 19.7 | 22.5 | 22.5 | 22.5 | 19.67 | 29.07 | 29.07 | 34.27 | 37.96 | 38.96 | 53.87 | 53.87 | 53.87 | 58.55 | 58.55 | 46.82 | 46.82 | 46.82 | 54.82 | 62.82 | 73.64 | 81.39 | 81.39 | 81.39 | 80.3 | 80.3 | 84.55 | 84.55 | San Diego | #0073CF | |
19 | 19 | 19 | 23.1 | 23.5 | 28.5 | 35 | 35.75 | 35.75 | 39.75 | 39.75 | 45 | 45 | 50 | 50 | 50 | 50 | 58 | 58 | 64 | 64 | 63.7 | 62.37 | 70.55 | 70.54 | 76.39 | 83.54 | 83.54 | 83.54 | 117 | San Francisco | #AA0000 | |
15.3 | 15.3 | 16.2 | 20.6 | 24.7 | 24.7 | 27 | 26.59 | 26.59 | 28 | 28 | 34.14 | 32.65 | 33.95 | 35.68 | 44.21 | 44.97 | 43.28 | 43.06 | 42.8 | 44.78 | 50.46 | 54.74 | 61.25 | 61.23 | 63.8 | 66.6 | 67.26 | 71.21 | 80.77 | Seattle | #69BE28 | |
14.7 | 16.7 | 18.2 | 33.61 | 33.57 | 33.98 | 33.98 | 33.99 | 42.84 | 49.59 | 52.37 | 54.92 | 57.86 | 60.92 | 63.71 | 68.28 | 68.28 | 70.22 | 65.8 | 70.12 | 68.89 | 74.49 | 73.86 | St. Louis Cardinals/Rams | #B3995D | ||||||||
13.5 | 13.5 | 13.5 | 16.2 | 19.6 | 19.6 | 20.75 | 24.03 | 24.06 | 29.57 | 29.73 | 33.06 | 35.46 | 64.58 | 64.65 | 67.49 | 70.61 | 44.41 | 49.78 | 59.38 | 63.59 | 67.97 | 72.44 | 90.13 | 74.25 | 72.1 | 71.47 | 69.72 | 63.59 | 63.59 | Tampa Bay | #34302B | |
40.75 | 45.11 | 55.63 | 59.33 | 60.94 | 40.66 | 43.35 | 45.77 | 47.82 | 47.82 | 54.32 | 58.55 | 60.94 | 62.95 | 63.55 | 64.61 | 65.28 | 67.15 | Tennessee | #4B92DB | |||||||||||||
14.7 | 14.7 | 19.2 | 19.2 | 24.2 | 24.2 | 32.5 | 35.7 | 35.7 | 35.7 | 35.7 | 35.69 | 52.92 | 62.07 | 62.07 | 81.89 | 81.89 | 68.06 | 68.06 | 68.12 | 67.53 | 79.13 | 79.13 | 79.13 | 79.13 | 79.13 | 79.13 | 79.13 | 94.8 | 102 | Washington | #773141 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment