Skip to content

Instantly share code, notes, and snippets.

@bessiec bessiec/index.html
Last active Nov 25, 2016

Embed
What would you like to do?
Module 1 NYCFC Shots versus Shots on Goal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/d3.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.js"></script>
<style type="text/css">
body {
background-color: white;
font-family: "Varela Round", Helvetica, Arial, sans-serif;
margin: 20px 150px;
}
h1 {
font-size: 24px;
margin: 0;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
svg {
background-color: white;
}
/* New CSS rules for bar groups! */
circle:hover {
fill: orange;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: 'Varela Round', sans-serif;
font-size: 12px;
}
.y.axis path,
.y.axis line {
opacity: 0
stroke: black;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
</style>
</head>
<body>
<h1>NYCFC Player Stats </h1>
<p>This is a scatterplot of shots versus shots on goal <a href="http://www.nycfc.com/stats/season?year=2015">by NYCFC players for the 2015 season.</a>
<script type="text/javascript">
var w = 700;
var h = 600;
var padding = [ 30, 30, 50, 50 ]; //Top, right, bottom, left
var xScale = d3.scale.linear()
.range([ padding[3], w - padding[1] - padding[3] ]);
var yScale = d3.scale.linear()
.range([ padding[0], h - padding[2] ]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("nycfc.csv", function(data) {
xScale.domain([
d3.min(data, function(d) {
return +d.Shots;
}),
d3.max(data, function(d) {
return +d.Shots;
})
]);
yScale.domain([
d3.max(data, function(d) {
return +d.ShotsonGoal;
}),
d3.min(data, function(d) {
return +d.ShotsonGoal;
})
]);
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) { return "<p>" + d.Player + " made " + d.Shots + " Shots and had " + d.ShotsonGoal + " Shots on Goal </p>";})
svg.call(tip);
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle");
circles.attr("cx", function(d) {
return xScale(d.Shots);
})
.attr("cy", function(d) {
return yScale(d.ShotsonGoal);
})
.attr("r", 0.1)
.attr("fill", "blue")
.on("mouseover", tip.show)
.on("mouseout", tip.hide);
circles.transition()
.duration(1000)
.attr("r", 4);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding[2] + 10) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (padding[3] - 10) + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
Player Position GamesPlayed GamesStarted Minutes Goals Assists Shots ShotsonGoal GameWinningGoals Penalty Kick Success Rate HomeGoal RoadGoal Goals90Minutes SC%
David Villa Forward 30 29 2514 18 8 138 64 6 0.88 11 7 0.64 13
Patrick Mullins Forward 24 11 1040 6 4 38 14 1 1.00 3 3 0.52 15.8
Thomas McNamara Midfielder 19 15 1324 5 3 23 12 1 0/0 4 1 0.34 21.7
Kwadwo Poku Midfielder 27 6 978 4 7 18 10 0 0/0 2 2 0.37 22.2
Mehdi Ballouchy Midfielder 19 16 1259 3 2 13 7 0 0/0 3 0 0.21 23.1
Frank Lampard Midfielder 10 9 733 3 1 27 4 1 0/0 1 2 0.37 11.1
Mix Diskerud Midfielder 27 23 2073 3 1 32 12 1 0/0 2 1 0.13 9.4
Ned Grabavoy Midfielder 26 22 1884 2 3 15 8 0 0/0 2 0 0.1 13.3
Andrew Jacobson Midfielder 33 33 2837 1 2 26 3 0 0/0 1 0 0.03 3.8
Khiry Shelton Forward 17 7 824 1 1 13 4 0 0/0 1 0 0.11 7.7
Kwame Watson-Siriboe Defender 11 7 687 1 0 3 1 0 0/0 0 1 0.13 33.3
Javier Calle Defender 12 7 542 1 0 12 4 0 0/0 1 0 0.17 8.3
Andrea Pirlo Midfielder 13 12 1074 0 5 20 3 0 0/0 0 0 0 0
Jose Angelino Tasende Defender 14 10 992 0 4 8 2 0 0/0 0 0 0 0
RJ Allen Defender 14 13 1054 0 2 4 1 0 0/0 0 0 0 0
Andoni Iraola Defender 9 8 759 0 1 3 0 0 0/0 0 0 0 0
Jeb Brovsky Defender 15 12 1132 0 1 11 1 0 0/0 0 0 0 0
Shay Facey Defender 23 20 1818 0 0 0 0 0 0/0 0 0 0 0
George John Defender 0 0 0 0 0 0 0 0 0/0 0 0 0 0
Connor Brandt Defender 1 0 9 0 0 0 0 0 0/0 0 0 0 0
Andres Mendoza Defender 0 0 0 0 0 0 0 0 0/0 0 0 0 0
Matthew Dunn Midfielder 1 0 52 0 0 0 0 0 0/0 0 0 0 0
Tony Taylor Forward 2 1 66 0 0 1 0 0 0/0 0 0 0 0
Josh Williams Defender 5 5 430 0 0 2 0 0 0/0 0 0 0 0
Jefferson Mena Defender 7 6 596 0 0 2 0 0 0/0 0 0 0 0
Jason Hernandez Defender 26 26 2294 0 0 3 0 0 0/0 0 0 0 0
Pablo �lvarez Midfielder 8 3 244 0 0 5 1 0 0/0 0 0 0 0
Chris Wingert Defender 27 26 2169 0 0 7 4 0 0/0 0 0 0 0
Sebasti�n Vel�squez Midfielder 12 5 446 0 0 9 2 0 0/0 0 0 0 0
Adam Nemec Forward 9 8 594 0 0 13 3 0 0/0 0 0 0 0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.