Skip to content

Instantly share code, notes, and snippets.

@CafeConVega
Created February 22, 2016 15:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CafeConVega/ed643eefaee0879d3947 to your computer and use it in GitHub Desktop.
Save CafeConVega/ed643eefaee0879d3947 to your computer and use it in GitHub Desktop.
Week 6: Line Plot
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;
}
<!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>
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