Skip to content

Instantly share code, notes, and snippets.

@CafeConVega

CafeConVega/custom.css

Last active March 1, 2016 22:39
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/2c7fa86ff7856b6c533c to your computer and use it in GitHub Desktop.
Save CafeConVega/2c7fa86ff7856b6c533c to your computer and use it in GitHub Desktop.
Download ZIP
Week 7: Transition Plot With Buttons
Raw
custom.css
h1,
h2 {
font-family: 'Graduate', cursive;
text-align: center;
text-transform: uppercase;
}
p {
font-family: 'Roboto', sans-serif;
text-align: center;
}
text {
font-family: 'Roboto', sans-serif;
font-size: .9em;
}
svg {
display: flex;
margin-left: auto;
margin-right: auto;
}
.tick,
.xlabel,
.ylabel {
font-family: 'Roboto', sans-serif;
fill: grey;
}
.domain {
display: none;
}
.axis path,
.axis line {
fill: none;
stroke: black;
stroke-width: 1px;
}
.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;
}
.buttons {
display: flex;
flex-direction: row;
justify-content: center;
padding: 20px;
}
.clicker {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
background:-o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
cursor:pointer;
color:#777777;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
}
.clicker:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed));
background:-moz-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
background:-webkit-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
background:-o-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
background:-ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed',GradientType=0);
background-color:#dfdfdf;
}
.clicker:active {
position:relative;
top:1px;
}
.selected {
-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
box-shadow:inset 0px 1px 0px 0px #bbdaf7;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0);
background-color:#79bbff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #84bbf3;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #528ecc;
}
.selected:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff));
background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0);
background-color:#378de5;
}
.selected:active {
position:relative;
top:1px;
}
/*
button styles from http://www.bestcssbuttongenerator.com/
*/
Raw
index.html
<!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 vs. Winning %</h1>
<h2></h2>
<p>Sources: <a href="https://sites.google.com/site/rodswebpages/codes" target="_blank">Rod's Sports Economics</a> &#38; <a href="http://www.pro-football-reference.com/" target="_blank">Pro Football Reference</a> </p>
<p>This is a scatter plot of average ticket prices for regular season NFL games vs. the team's winning percentage. Hover over a dot to get more information.</p>
<p class="chart-title">1985 Regular Season</p>
<div class="buttons">
<button class="clicker" id="y1985">1985</button>
<button class="clicker" id="y2014">2014</button>
</div>
<script type="text/javascript">
var fullwidth = 700;
var fullheight = 600;
var margin = {
top: 20,
right: 10,
bottom: 50,
left: 50
};
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 dotRadius = 7;
var xScale = d3.scale.linear()
.range([0, width])
.domain([-2, 100]);
var yScale = d3.scale.linear()
.range([0, height]);
//Configure axis generators
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(10)
.innerTickSize([0]);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.innerTickSize([0]);
// 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.
}
// max of prices to 0 (reversed, remember) - [max, 0] for y scale
yScale.domain([
d3.max(data, function (d) {
return d3.max(data, function (d) {
return +d.price_1985;
});
}),
0
]);
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle");
circles.attr("cx", function (d) {
return xScale(+d.win_1985);
// return the value to use for your x scale here
})
.attr("cy", function (d) {
return yScale(+d.price_1985);
})
.attr("fill", function (d) {
// highlighting some interesting outliers
if (d.team === "Chicago" || d.team === "Indianapolis" || d.team === "New England" || d.team === "Tampa Bay") {
return d.hex;
} else {
return "#ABABAB";
}
})
.append("title")
.text(function (d) {
return d.team + " won " + d.win_1985 + "% of their 16 regular season games and fans paid an average ticket price of $" + d.price_1985;
});
circles.sort(function (a, b) {
return d3.ascending(+a.win_1985, +b.win_1985);
})
.transition()
.delay(function (d, i) {
return i * 10;
})
.duration(500) // milliseconds, so this is 1 second.
.attr("r", dotRadius);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("id", "yaxis")
.call(yAxis);
svg.append("text")
.attr("class", "xlabel")
.attr("transform", "translate(" + (width / 2) + " ," +
(height + 20) + ")")
.style("text-anchor", "middle")
.attr("dy", "12")
.text("Winning % (of 16 regular season games)");
svg.append("text")
.attr("class", "ylabel")
.attr("transform", "rotate(-90) translate(" + (-height / 2) + ",0)")
.style("text-anchor", "middle")
.attr("dy", -25)
.text("Average Ticket Price (in dollars)");
d3.select("button#y1985").classed("selected", true);
d3.selectAll("button.clicker").on("click", function () {
// we use the id attr on each to see which data set to use.
var whichbutton = d3.select(this).attr("id");
console.log(whichbutton);
// style the buttons to show which one was clicked:
d3.select(this).classed("selected", true);
if (whichbutton === "y1985") {
d3.select("button#y2014").classed("selected", false);
yScale.domain([
d3.max(data, function (d) {
return d3.max(data, function (d) {
return +d.price_1985;
});
}),
0
]);
d3.select("#yaxis").remove();
svg.append("g")
.attr("class", "y axis")
.attr("id", "yaxis")
.call(yAxis);
} else {
d3.select("button#y1985").classed("selected", false);
yScale.domain([
d3.max(data, function (d) {
return d3.max(data, function (d) {
return +d.price_2014;
});
}),
0
]);
d3.select("#yaxis").remove();
svg.append("g")
.attr("class", "y axis")
.attr("id", "yaxis")
.call(yAxis);
}
circles
.transition()
.duration(2000)
.attr("cx", function (d) {
if (whichbutton === "y1985") {
return xScale(+d.win_1985);
} else { // then it's books:
return xScale(+d.win_2014);
}
// return the value to use for your x scale here
})
.attr("cy", function (d) {
if (whichbutton === "y1985") {
return yScale(+d.price_1985);
} else {
return yScale(+d.price_2014);
}
});
circles.selectAll("title").remove();
circles
.append("title")
.text(function (d) {
if (whichbutton === "y1985") {
return d.team + " won " + d.win_1985 + "% of their 16 regular season games and fans paid an average ticket price of $" + d.price_1985;
} else {
return d.team + " won " + d.win_2014 + "% of their 16 regular season games and fans paid an average ticket price of $" + d.price_2014;
}
});
if (whichbutton === "y1985") {
d3.select("p.chart-title").text("1985 Regular Season");
} else {
d3.select("p.chart-title").text("2014 Regular Season");
}
}); // end clicker function
}); // end of csv
</script>
</body>
</html>
Raw
nflwaticketindex.csv
price_1985 price_2014 team hex win_1985 win_2014
13.3 78.58 Atlanta #A71930 25 38
12.7 62.01 Buffalo #00338D 13 56
14.5 108.44 Chicago #C83803 94 31
13.8 71.26 Cincinatti #000000 44 63
14.8 54.2 Cleveland #22150C 50 44
18.3 110.2 Dallas #002244 63 75
16.1 87.96 Denver #FB4F14 69 75
10.9 72.98 Detroit #005A8B 44 69
13 85.61 Green Bay #203731 50 75
14.6 88.98 Houston #03202F 31 56
18.5 86.32 Indianapolis #002C5F 31 69
11.6 68.38 Kansas City #E31837 38 56
17.7 65.16 Miami #008E97 75 50
12.9 88.53 Minnesota #4F2683 44 44
15.6 122 New England #002244 69 75
15.3 84.87 New Orleans #9F8958 31 44
13.5 111.69 NY Giants #0B2265 63 38
14.2 105.66 NY Jets #203731 69 25
15.1 98.69 Philadelphia #004953 44 63
14.1 83.97 Pittsburg #000000 44 69
17.9 84.55 San Diego #0073CF 50 56
19 117 San Francisco #AA0000 63 50
15.3 80.77 Seattle #69BE28 50 75
14.7 73.86 St. Louis Cardinals/Rams #B3995D 31 38
13.5 63.59 Tampa Bay #34302B 13 13
14.7 102 Washington #773141 63 25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment