Created
August 16, 2016 22:14
-
-
Save bessiec/23e696dc5f75b53037a0d2eee1d429eb to your computer and use it in GitHub Desktop.
MLS 2015 Selected Team Stat Correlations Visuals
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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