Skip to content

Instantly share code, notes, and snippets.

@merelyanode

merelyanode/TouchesData.csv

Last active November 14, 2016 17:28
Show Gist options
  • Save merelyanode/b6e1f66804748d82045b to your computer and use it in GitHub Desktop.
Save merelyanode/b6e1f66804748d82045b to your computer and use it in GitHub Desktop.
Download ZIP
Knight Week 6
Raw
TouchesData.csv
Player Year KeyYards 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 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
James Wilder 1984 2229 877 790 1020 2229 1641 1030 816 467 579 59
Larry Johnson 2006 2199 87 859 2093 2199 745 948 661 2 2
Eddie George 2000 1962 1550 1443 1604 1762 1962 1218 1420 1194 515
LaDainian Tomlinson 2002 2172 1603 2172 2370 1776 1832 2323 1949 1536 884 1282 729
Edgerrin James 1999 2139 2139 2303 855 1343 1551 2031 1843 1376 1426 599 144
DeMarco Murray 2014 2261 1080 910 141 2261
Marcus Allen 1985 2314 1098 1604 1923 2314 1212 1164 1134 484 871 418 578 1002 1058 1100 1100 591
Ricky Williams 2002 2216 1056 1409 1756 2216 1723 0 836 0 15 878 1385 814 527
Eric Dickerson 1983 2212 2212 2244 1360 2026 1459 2036 1522 769 805 814 149
Emmitt Smith 1992 2048 1165 1821 2048 1900 1825 2148 1453 1308 1507 1516 1282 1137 1064 363 1042
Jamal Anderson 1998 2165 0 203 1528 1286 2165 93 1406 301
Steven Jackson 2006 2334 862 1366 2334 1273 1421 1738 1624 1478 1366 734 855
Gerald Riggs 1985 1986 484 586 1763 1986 1463 1074 659 901 535 253
Barry Foster 1992 2034 205 605 2034 928 975
Walter Payton 1984 2054 892 1539 2121 1875 1923 1827 1601 907 2028 2052 2034 1715 750
Deuce McAllister 2003 2157 257 1740 2157 1302 452 1255 107 546
Raw
touchy.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Touchey</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
</head>
<body>
<style type="text/css">
body {
background-color: white;
font-family: "Helvetica Neue", Arial, sans-serif;
}
h1 {
font-size: 36px;
margin: 0;
}
p {
font-size: 14px;
margin: 18px 0 0 0;
}
svg {
background-color: white;
}
circle:hover {
cursor: pointer;
}
circle {
fill: rgb(215,215,215);
}
path {
stroke: rgb(215,215,215);
stroke-width: .5;
}
g.highlight path {
stroke: #002244;
stroke-width: 2;
}
.circleHighlight {
fill: #002244;
}
.axis path, .axis line {
fill: none;
stroke: #545454;
shape-rendering: crispEdges;
stroke-width: 1;
}
.axis text {
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 10px;
}
.y.axis text {
font-size: 8px;
}
.label {
font-size: 10px;
}
.dropdown:after {
content: '';
display: table;
clear: both;
}
.selectLabel, #players {
float: left;
margin-top: 18px;
}
#players {
margin-left: 10px;
}
</style>
<h1>Running backs with 420 or more touches in a season</h1>
<p>Sixteen running backs have had 420 or more touches in a single season since the NFL/AFL merger in 1970. Below is each season of those players' careers. A circle along the path marks the first year in which that player reached 420 or more touches:</p>
<div class="dropdown">
<p class="selectLabel">Select Player:</p>
<select id="players" onmousedown="this.value='';" onchange="drawChart(this.value);">
<option value="James Wilder">James Wilder</option>
<option value="Larry Johnson">Larry Johnson</option>
<option value="Eddie George">Eddie George</option>
<option value="LaDainian Tomlinson">LaDaninian Tomlinson</option>
<option value="Edgerrin James">Edgerrin James</option>
<option value="DeMarco Murray">DeMarco Murray</option>
<option value="Marcus Allen">Marcus Allen</option>
<option value="Ricky Williams">Ricky Williams</option>
<option value="Eric Dickerson">Eric Dickerson</option>
<option value="Emmitt Smith">Emmitt Smith</option>
<option value="Jamal Anderson">Jamal Anderson</option>
<option value="Steven Jackson">Steven Jackson</option>
<option value="Gerald Riggs">Gerald Riggs</option>
<option value="Barry Foster">Barry Foster</option>
<option value="Walter Payton">Walter Payton</option>
<option value="Deuce McAllister">Deuce McAllister</option>
</select>
</div>
<script type="text/javascript">
var selectedPlayer = "James Wilder";
/*var selectList = document.getElementById("players");
selectedPlayer = players.options[players.selectedIndex].value;*/
var dimensions = {
w: 1200,
h: 300,
padding: {
t: 25,
r: 25,
b: 25,
l: 50
}
}
var dateFormat = d3.time.format("%Y");
var xScale = d3.time.scale()
.range([dimensions.padding.l, dimensions.w - dimensions.padding.r ]);
var yScale = d3.scale.linear()
.range([dimensions.padding.t, dimensions.h - dimensions.padding.b -5 ]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom');
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var line = d3.svg.line()
.x(function(d){
return xScale(dateFormat.parse(d.year));
})
.y(function(d) {
return yScale(+d.totalYards);
})
var svg = d3.select("body")
.append("svg")
.attr("width", dimensions.w)
.attr("height", dimensions.h);
function drawChart(selectedPlayer) {
//Load in contents of CSV file
console.log(selectedPlayer);
d3.csv("TouchesData.csv", function(data) {
var years = ["1975", "1976", "1977", "1978", "1979", "1980", "1981", "1982", "1983", "1984", "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"];
var dataset = [];
for (var i = 0; i <data.length; i ++) {
dataset[i] = {
player: data[i].Player,
year: data[i].Year,
keyYards: data[i].KeyYards,
yards: []
};
for (var j = 0; j < years.length; j++) {
if (data[i][years[j]]) {
dataset[i].yards.push( {
year: years[j],
totalYards: data[i][years[j]]
});
}
}
}
console.log(dataset);
xScale.domain([
d3.min(years, function (d){
return dateFormat.parse(d);
}),
d3.max(years, function(d) {
return dateFormat.parse(d);
})
]);
yScale.domain([
d3.max(dataset, function(d) {
return d3.max(d.yards, function(d) {
return +d.totalYards;
});
}),
0
]);
svg.selectAll("g").remove();
svg.selectAll("circle").remove();
svg.selectAll("text").remove();
var groups = svg.selectAll("g")
.data(dataset)
.enter()
.append("g")
.classed("highlight", function(d) {
console.log(selectedPlayer);
if (d.player === selectedPlayer) {
console.log('true');
return true;
} else {
return false;
}
});
var circles = svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle");
circles.attr("cx", function(d) {
return xScale(dateFormat.parse(d.year));
})
.attr("cy", function(d) {
return yScale(d.keyYards);
})
.attr("r", 5)
.classed("circleHighlight", function(d) {
if (d.player === selectedPlayer) {
return true;
} else {
return false;
}
})
groups.append("title")
.text(function(d) {
return d.Player;
});
groups.selectAll("path")
.data(function(d) {
return [ d.yards];
})
.enter()
.append("path")
.attr("class", "line")
.attr("d", line)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 2);
// var circles = svg.selectAll("circle")
// .data(data)
// .enter()
// .append("circle");
// circles.attr("cx", function(d){
// return xScale(dateFormat.parse(d.Year));
// })
// .attr("cy", function(d) {
// return yScale(d.YScm);
// })
// .attr("r", .25)
// .style("fill",function(d) {
// switch(d.Era){
// case "pre":
// return "#69D2E7";
// break;
// case "current":
// return "#B11623";
// break;
// case "post":
// return "#519548";
// break;
// default:
// alert("Problem picking round");
// }
// })
// .append("title")
// .text(function(d){
// return d.Player + ", " + d.Touches + " touches, " + d.YScm + " yards from scrimmage";
// })
// circles.transition()
// .duration(2000)
// .attr("r", 5);
// svg.data([ data ])
// .append("path")
// .attr("class", "line " + function(d) {
// return d.Player;
// })
// .attr("d", line)
// .attr("fill", "none")
// .attr("stroke", "steelblue")
// .attr("stroke-width", 2);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0 ," + (dimensions.h - dimensions.padding.b - 5) +")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + dimensions.padding.l + ",0)")
.call(yAxis);
svg.append('text')
.attr("class", "x axis label")
.attr("x", dimensions.padding.l + (dimensions.w /2) )
.attr("y", dimensions.h)
.style("text-anchor", "middle")
.text("SEASON");
svg.append('text')
.attr("class", "y axis label")
.attr("transform", "rotate(-90)")
.attr("y", 15)
.attr("x", ((dimensions.h + dimensions.padding.t) / 2 - 33)* -1)
.style("text-anchor", "middle")
.text("TOTAL YARDS");
});
}
drawChart(selectedPlayer);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment