Skip to content

Instantly share code, notes, and snippets.

@unruthless

unruthless/README.md

Last active August 29, 2015 14:03
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 unruthless/7b69bd827647ceeac8c8 to your computer and use it in GitHub Desktop.
Save unruthless/7b69bd827647ceeac8c8 to your computer and use it in GitHub Desktop.
Download ZIP
World Cup "Injuries"
Raw
README.md

A quick scatterplot to show this data:

http://www.reddit.com/r/sports/comments/297gsu/oh_the_agony/

To improve:

  • Not enough colors to have a unique color per team
  • Some labels are overlapping and obscuring each other.
  • Superlative stats would be useful (most "injury"-prone, biggest delayer of game, most stoic/likely to survive zombie apocalypse)
Raw
data.json
[
{
"country": "Brazil",
"injuries": 17,
"writhing_time": "3m18s"
},
{
"country": "Chile",
"injuries": 16,
"writhing_time": "6m58s"
},
{
"country": "Honduras",
"injuries": 15,
"writhing_time": "7m40s"
},
{
"country": "Nigeria",
"injuries": 15,
"writhing_time": "6m25s"
},
{
"country": "Mexico",
"injuries": 15,
"writhing_time": "3m58s"
},
{
"country": "Costa Rica",
"injuries": 13,
"writhing_time": "3m48s"
},
{
"country": "USA",
"injuries": 12,
"writhing_time": "6m24s"
},
{
"country": "Ecuador",
"injuries": 12,
"writhing_time": "4m33s"
},
{
"country": "France",
"injuries": 10,
"writhing_time": "7m19s"
},
{
"country": "South Korea",
"injuries": 10,
"writhing_time": "4m31s"
},
{
"country": "Algeria",
"injuries": 10,
"writhing_time": "4m3s"
},
{
"country": "Iran",
"injuries": 9,
"writhing_time": "5m26s"
},
{
"country": "Russia",
"injuries": 9,
"writhing_time": "5m16s"
},
{
"country": "Ivory Coast",
"injuries": 9,
"writhing_time": "4m38s"
},
{
"country": "Croatia",
"injuries": 9,
"writhing_time": "4m19s"
},
{
"country": "Colombia",
"injuries": 9,
"writhing_time": "4m9s"
},
{
"country": "Uruguay",
"injuries": 9,
"writhing_time": "4m7s"
},
{
"country": "Greece",
"injuries": 9,
"writhing_time": "2m39s"
},
{
"country": "Cameroon",
"injuries": 8,
"writhing_time": "3m9s"
},
{
"country": "Germany",
"injuries": 8,
"writhing_time": "1m58s"
},
{
"country": "Spain",
"injuries": 8,
"writhing_time": "1m49s"
},
{
"country": "Belgium",
"injuries": 7,
"writhing_time": "3m23s"
},
{
"country": "Japan",
"injuries": 7,
"writhing_time": "2m5s"
},
{
"country": "Italy",
"injuries": 7,
"writhing_time": "1m36s"
},
{
"country": "Switzerland",
"injuries": 7,
"writhing_time": "1m21s"
},
{
"country": "England",
"injuries": 7,
"writhing_time": "3m8s"
},
{
"country": "Argentina",
"injuries": 6,
"writhing_time": "2m48s"
},
{
"country": "Ghana",
"injuries": 6,
"writhing_time": "1m51s"
},
{
"country": "Australia",
"injuries": 6,
"writhing_time": "1m50s"
},
{
"country": "Portugal",
"injuries": 4,
"writhing_time": "1m49s"
},
{
"country": "Netherlands",
"injuries": 4,
"writhing_time": "1m39s"
},
{
"country": "Bosnia and Herz.",
"injuries": 2,
"writhing_time": "0m24s"
}
]
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Diving</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.dot {
stroke: #000;
}
</style>
</head>
<body>
<div id="chart"></div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category20();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json("data.json", function(error, data) {
// Preprocess data
data.forEach(function(d) {
// coerce to int
d.injuries = +d.injuries;
// transform '#m#s' to minutes and coerce to int
var t = d.writhing_time.split('m');
d.writhing_time = (+(t[0] * 60) + +(t[1].split('s'))[0]) / 60;
});
x.domain(d3.extent(data, function(d) { return d.injuries; })).nice();
y.domain(d3.extent(data, function(d) { return d.writhing_time; })).nice();
// Draw X axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.text("\"Injuries\" Per Game");
// Draw Y axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Total Minutes Spent Writhing Per Game")
// Draw points
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", function(d) { return x(d.injuries); })
.attr("cy", function(d) { return y(d.writhing_time); })
.style("fill", function(d) { return color(d.country); });
// Draw labels
var labels = svg.append("g").selectAll("text")
.data(data)
.enter().append("text")
.text( function(d) { return d.country; })
.attr("x", function(d) { return x(d.injuries) + 5; })
.attr("y", function(d) { return y(d.writhing_time) + 3; })
.style("text-anchor","start")
.style("font-size","10px");
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment