Skip to content

Instantly share code, notes, and snippets.

@bessiec
Created August 16, 2016 22:14
Show Gist options
  • Save bessiec/23e696dc5f75b53037a0d2eee1d429eb to your computer and use it in GitHub Desktop.
Save bessiec/23e696dc5f75b53037a0d2eee1d429eb to your computer and use it in GitHub Desktop.
MLS 2015 Selected Team Stat Correlations Visuals
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"> </script>
<link href='https://fonts.googleapis.com/css?family=Mako' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.0/d3-tip.js"></script>
<meta charset="utf-8">
<style>
.axis line, .axis path {
shape-rendering: crispEdges;
stroke: black;
fill: none;
}
body {
font-family: "Mako";
font-weight: 500;
font-size : 14px;
margin: 2% 2% 2% 2%;
}
.circle circle:hover {
fill: #FF6600;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
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>
<body>
<h1>MLS 2015 Selected Team Stat Correlations Visuals</h1>
<h3>Shots vs Shots on Goal</h3>
<div id="shots"></div>
<h3>Shots vs Goals</h3>
<div id="attempt"></div>
<h3>Goals vs Shots on Goal</h3>
<div id="goals"></div>
<h3>Penalty Kick Attempts vs Penalty Kick Goals</h3>
<div id="penalty"></div>
<script>
var margin = {top:10, right:50, bottom:50, left:100},
width = 550 - margin.left - margin.right,
height = 350 - margin.top - margin.bottom;
var xScale = d3.scale.linear()
.range([0, width]);
var yScale = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(15);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(15);
//////////////////////////////////////////////////////////////////////
/* Shots v SOGS
***********************************
***********************************/
var svg1 = d3.select("#shots")
.append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.bottom + margin.top)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var tip1 = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong><span style='color:#0080FF'>" + d.Club + "</strong><br> Shots on Goal: " + d['Shots on Goal'] + "<br> Shots: " + d.Shots + "</span>";
})
d3.csv("mls2015teamstats.csv", function(error, data) {
if (error) throw error;
data.forEach(function(d) {
d.Shots = +d.Shots;
d['Shots On Goal'] = + d['Shots on Goal']
});
xScale.domain(d3.extent(data, function(d) { return d.Shots }));
yScale.domain(d3.extent(data, function(d) { return d['Shots on Goal'] }));
var circles = svg1.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) { return xScale(d.Shots); })
.attr("cy", function(d) { return yScale(d['Shots on Goal']); })
.attr("r", 5)
.attr("fill", "#0080FF")
.on('mouseover', tip1.show)
.on('mouseout', tip1.hide)
svg1.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("x", width/2)
.attr("y", margin.bottom - 20)
.attr("dy", ".71em")
.style("text-anchor", "middle")
.text("Shots")
svg1.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("x", 0 - margin.left - 70)
.attr("y", 0 - (height/2) + 80)
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Shots on Goal")
svg1.call(tip1);
})
/* Goals v Shots
***********************************
***********************************/
var svg2 = d3.select("#attempt")
.append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.bottom + margin.top)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var tip2 = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong><span style='color:#FFA566'>" + d.Club + "</strong><br> Shots: " + d.Shots + "<br> Goals: " + d.Goals + "</span>";
})
d3.csv("mls2015teamstats.csv", function(error, data) {
if (error) throw error;
data.forEach(function(d) {
d.Shots = +d.Shots;
d.Goals = +d.Goals;
});
xScale.domain(d3.extent(data, function(d) { return d.Shots }));
yScale.domain(d3.extent(data, function(d) { return d.Goals }));
var circles = svg2.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) { return xScale(d.Shots); })
.attr("cy", function(d) { return yScale(d.Goals); })
.attr("r", 5)
.attr("fill", "#FFA566")
.on('mouseover', tip2.show)
.on('mouseout', tip2.hide)
svg2.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("x", width/2)
.attr("y", margin.bottom - 20)
.attr("dy", ".71em")
.style("text-anchor", "middle")
.text("Shots")
svg2.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("x", 0 - margin.left - 70)
.attr("y", 0 - (height/2) + 80)
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Goals")
svg2.call(tip2);
})
/* Goals v Attempts
***********************************
***********************************/
var svg3 = d3.select("#attempts")
.append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.bottom + margin.top)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var tip3 = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong><span style='color:#FFA566'>" + d.Club + "</strong><br> Shots: " + d.Shots + "<br> Goals: " + d.Goals + "</span>";
})
d3.csv("mls2015teamstats.csv", function(error, data) {
if (error) throw error;
data.forEach(function(d) {
d.Shots = +d.Shots;
d.Goals = +d.Goals;
});
xScale.domain(d3.extent(data, function(d) { return d.Shots }));
yScale.domain(d3.extent(data, function(d) { return d.Goals }));
var circles = svg2.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) { return xScale(d.Shots); })
.attr("cy", function(d) { return yScale(d.Goals); })
.attr("r", 5)
.attr("fill", "#FFA566")
.on('mouseover', tip2.show)
.on('mouseout', tip2.hide)
svg2.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("x", width/2)
.attr("y", margin.bottom - 20)
.attr("dy", ".71em")
.style("text-anchor", "middle")
.text("Shots")
svg2.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("x", 0 - margin.left - 70)
.attr("y", 0 - (height/2) + 80)
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Goals")
svg2.call(tip2);
})
/* Goals v Shots on Goal
***********************************
***********************************/
var svg3 = d3.select("#goals")
.append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.bottom + margin.top)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var tip3 = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong><span style='color:#6CC4B9'>" + d.Club + "</strong><br> Goals: " + d.Goals + "<br> Shots on Goal: " + d['Shots on Goal'] + "</span>";
})
d3.csv("mls2015teamstats.csv", function(error, data) {
if (error) throw error;
data.forEach(function(d) {
d.Goals = +d.Goals;
d['Shots on Goal'] = +d['Shots on Goal'];
});
xScale.domain(d3.extent(data, function(d) { return d.Goals }));
yScale.domain(d3.extent(data, function(d) { return d['Shots on Goal']}));
var circles = svg3.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) { return xScale(d.Goals); })
.attr("cy", function(d) { return yScale(d['Shots on Goal']); })
.attr("r", 5)
.attr("fill", "#6CC4B9")
.on('mouseover', tip3.show)
.on('mouseout', tip3.hide)
svg3.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("x", width/2)
.attr("y", margin.bottom - 20)
.attr("dy", ".71em")
.style("text-anchor", "middle")
.text("Goals")
svg3.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("x", 0 - margin.left - 70)
.attr("y", 0 - (height/2) + 80)
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Shots on Goal")
svg3.call(tip3);
})
/* PKG v PKA
***********************************
***********************************/
var svg4 = d3.select("#penalty")
.append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.bottom + margin.top)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var tip4 = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong><span style='color:#69F0E9'>" + d.Club + "</strong><br> Penalty Kick Attempts: " + d['Penality Kick Attempts'] + "<br> Penalty Kick Goals: " + d['Penality Kick Goals'] + "</span>";
})
d3.csv("mls2015teamstats.csv", function(error, data) {
if (error) throw error;
data.forEach(function(d) {
d['Penality Kick Attempts'] = +d['Penality Kick Attempts'];
d['Penality Kick Goals'] = +d['Penality Kick Goals'];
});
xScale.domain(d3.extent(data, function(d) { return d['Penality Kick Attempts'] }));
yScale.domain(d3.extent(data, function(d) { return d['Penality Kick Goals']}));
var circles = svg4.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) { return xScale(d['Penality Kick Attempts']); })
.attr("cy", function(d) { return yScale(d['Penality Kick Goals']); })
.attr("r", 5)
.attr("fill", "#69F0E9")
.on('mouseover', tip4.show)
.on('mouseout', tip4.hide)
svg4.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("x", width/2)
.attr("y", margin.bottom - 20)
.attr("dy", ".71em")
.style("text-anchor", "middle")
.text("Penalty Kick Attempts")
svg4.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("x", 0 - margin.left - 70)
.attr("y", 0 - (height/2) + 80)
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Penalty Kick Goals")
svg4.call(tip4);
})
</script>
<body>
</html>
Club Games Played Goals Assists Shots Shots on Goal Fouls Committed Fouls Sustained Offshots Corner Kicks Penality Kick Goals Penality Kick Attempts
Chicago Fire 34 43 38 467 163 441 470 81 197 7 8
Colorado Rapids 34 33 33 417 127 506 453 95 199 1 2
Columbus Crew SC 34 58 66 464 180 403 390 70 207 1 2
D.C. United 34 43 33 373 136 461 379 89 163 4 6
FC Dallas 34 52 43 399 148 413 412 57 168 4 5
Houston Dynamo 34 42 39 376 124 440 444 49 162 2 4
LA Galaxy 34 56 52 406 153 417 401 48 159 5 6
Montreal Impact 34 48 29 434 169 424 386 66 164 5 6
New England Revolution 34 48 50 388 158 463 458 63 198 3 3
New York City FC 34 49 45 446 160 452 437 78 168 8 9
New York Red Bulls 34 62 63 476 178 438 481 111 206 7 11
Orlando City SC 34 46 39 382 125 467 476 82 164 4 6
Philadelphia Union 34 42 43 381 149 374 441 70 182 1 2
Portland Timbers 34 41 43 486 166 421 470 78 204 4 6
Real Salt Lake 34 38 34 373 144 436 480 70 154 4 5
San Jose Earthquakes 34 41 33 404 129 477 474 74 196 6 6
Seattle Sounders FC 34 44 42 331 144 396 425 67 145 2 3
Sporting Kansas City 34 48 52 405 141 454 424 59 153 5 6
Toronto FC 34 58 56 468 169 430 453 67 179 6 7
Vancouver Whitecaps FC 34 45 34 440 172 477 436 70 173 5 5
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment