Skip to content

Instantly share code, notes, and snippets.

@CafeConVega

CafeConVega/custom.css

Last active March 15, 2016 21:31
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/d50192a1505b5adc44f4 to your computer and use it in GitHub Desktop.
Save CafeConVega/d50192a1505b5adc44f4 to your computer and use it in GitHub Desktop.
Download ZIP
Week 8: My Update Plot
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: 20,
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([0, 16]);
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.
}
//Vars for subsets
var data_1985 = [];
var data_2014 = [];
// Format number fields
data.forEach(function (d) {
d.price_1985 = +d.price_1985;
d.price_2014 = +d.price_2014;
d.win_1985 = +d.win_1985;
d.win_2014 = +d.win_2014;
// Add 1985 data to array
if(d.price_1985 > 0) {
data_1985.push([d.price_1985, d.win_1985, d.team, d.hex]);
}
// Add 2014 data to array
if(d.price_2014 > 0) {
data_2014.push([d.price_2014, d.win_2014, d.team, d.hex]);
}
}); //end of foreach
console.log(data_1985);
//Initially show 1985 & create axis
d3.select("button#y1985").classed("selected", true);
var whichbutton = "y1985";
yDomain(data_1985);
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("Reagular Season Wins (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)");
//Draw initial scatter plot
redraw(data_1985);
//Use buttons for year selection
d3.selectAll("button.clicker").on("click", function () {
whichbutton = d3.select(this).attr("id");
console.log(whichbutton);
d3.select(this).classed("selected", true);
if (whichbutton === "y1985") {
redraw(data_1985);
d3.select("button#y2014").classed("selected", false);
d3.select("p.chart-title").text("1985 Regular Season");
} if (whichbutton === "y2014") {
redraw(data_2014);
d3.select("button#y1985").classed("selected", false);
d3.select("p.chart-title").text("2014 Regular Season");
}
});//end of clicker
}); // end of csv
//Scatter plot redraw function
function redraw(dataset) {
var circles = svg.selectAll("circle")
.data(dataset, function (d) { return d[2] });
circles
.enter()
.append("circle")
.attr("cx", function (d) {
return xScale(d[1]);
})
.attr("cy", function (d) {
return yScale(d[0]);
})
.attr("fill", function (d) {
// highlighting some outliers
if (d[2] === "Chicago" || d[2] === "Indianapolis" || d[2] === "New England" || d[2] === "Tampa Bay" || d[2] === "Cleveland") {
return d[3];
} else {
return "#ABABAB";
}
});
circles
.sort(function (a, b) {
return d3.ascending(a[1], b[1]);
})
.transition()
.delay(function (d, i) {
return i * 10;
})
.duration(500)
.attr("r", dotRadius);
//Label outliers
label(dataset, 14, "New England");
label(dataset, 2, "Chicago");
label(dataset, 4, "Cleveland");
label(dataset, 24, "Tampa Bay");
label(dataset, 10, "Indianapolis");
//Circle tooltips
d3.selectAll("circle")
.on("mouseover", cirmouseoverFunc)
.on("mouseout", cirmouseoutFunc)
.on("mousemove", cirmousemoveFunc);
//Exit current scatter plot
circles.exit()
.transition()
.duration(300)
.attr("r", 0)
.remove();
//Remove current labels
svg.selectAll(".label")
.remove();
//Reset y domain and transition the y axis
yDomain(dataset);
svg
.transition()
.select(".y.axis")
.call(yAxis);
//Create new scatter plot
circles
.transition()
.duration(2000)
.ease("quad")
.attr("cx", function (d) {
return xScale(d[1]);
})
.attr("cy", function (d) {
return yScale(d[0]);
})
.attr("r", dotRadius)
.attr("fill", function (d) {
// highlighting some outliers
if (d[2] === "Chicago" || d[2] === "Indianapolis" || d[2] === "New England" || d[2] === "Tampa Bay" || d[2] === "Cleveland") {
return d[3];
} else {
return "#ABABAB";
}
});
//Labels for new scatter plot
label(dataset, 14, "New England");
label(dataset, 2, "Chicago");
label(dataset, 4, "Cleveland");
label(dataset, 24, "Tampa Bay");
label(dataset, 10, "Indianapolis");
} //end redraw func
function cirmouseoverFunc(d) {
// Adding a subtle animation to increase the dot size when over it!
d3.select(this)
.transition()
.duration(50)
.style("opacity", 1)
.attr("r", dotRadius+2)
.attr("fill", function (d) {
return d[3]});
tooltip
.style("display", null) // this removes the display none setting from it
.style("background", d[3])
.html("<p>" + d[2] +
"<br>Price: $" + d[0] +
"<br>Won: " + d[1] + " of 16 games</p>");
}
function cirmousemoveFunc(d) {
tooltip
.style("top", (d3.event.pageY - 10) + "px" )
.style("left", (d3.event.pageX + 10) + "px");
}
function cirmouseoutFunc(d) {
// shrink it back down:
d3.select(this)
.transition()
.attr("r", dotRadius)
.attr("fill", function (d) {
if (d[2] === "Chicago" || d[2] === "Indianapolis" || d[2] === "New England" || d[2] === "Tampa Bay" || d[2] === "Cleveland") {
return d[3];
} else {
return "#ABABAB";
}
});
tooltip
.style("display", "none"); // this sets it to invisible!
}
function yDomain(dataset) {
return yScale.domain([
d3.max(dataset, function (d) {
return d3.max(dataset, function (d) {
return d[0];
});
}),
0
]);
}
function label(dataset, array, team) {
svg.append("text")
.attr("transform", "translate(" + xScale(dataset[array][1]) + "," + yScale(dataset[array][0]) + ")")
.attr("dy", ".35em")
.attr("dx", ".45em")
.attr("text-anchor", "start")
.attr("class", "label")
.text(team);
}
</script>
</body>
</html>
Raw
nflwaticketindex.csv
price_1985 price_2014 team hex win_1985 win_2014
13.3 78.58 Atlanta #A71930 4 6
12.7 62.01 Buffalo #00338D 2 9
14.5 108.44 Chicago #C83803 15 5
13.8 71.26 Cincinatti #000000 7 10
14.8 54.2 Cleveland #22150C 8 7
18.3 110.2 Dallas #002244 10 12
16.1 87.96 Denver #FB4F14 11 12
10.9 72.98 Detroit #005A8B 7 11
13 85.61 Green Bay #203731 8 12
14.6 88.98 Houston Oilers/Texans #03202F 5 9
18.5 86.32 Indianapolis #002C5F 5 11
11.6 68.38 Kansas City #E31837 6 9
17.7 65.16 Miami #008E97 12 8
12.9 88.53 Minnesota #4F2683 7 7
15.6 122 New England #002244 11 12
15.3 84.87 New Orleans #9F8958 5 7
13.5 111.69 NY Giants #0B2265 10 6
14.2 105.66 NY Jets #203731 11 4
15.1 98.69 Philadelphia #004953 7 10
14.1 83.97 Pittsburg #000000 7 11
17.9 84.55 San Diego #0073CF 8 9
19 117 San Francisco #AA0000 10 8
15.3 80.77 Seattle #69BE28 8 12
14.7 73.86 St. Louis Cardinals/Rams #B3995D 5 6
13.5 63.59 Tampa Bay #34302B 2 2
14.7 102 Washington #773141 10 4
17.6 LA Raiders #000000 12
19 LA Rams #B3995D 11
100.19 Baltimore #241773 10
57.65 Jacksonville #9F792C 3
67.15 Tennesee #4B92DB 2
64.8 Oakland #000000 3
72.44 Carolina #0085CA 7
82.15 Arizona #97233F 11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment