Last active
October 31, 2015 16:30
-
-
Save jarvisc1/27fff9d99f4c73d150d5 to your computer and use it in GitHub Desktop.
Crime during Premier league 2013-14 season
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
team | total | home | away | notfan | violent | disorder | missle | racist | pitchinvasion | alcohol | touting | weapon | fireworks | banned | propertydamage | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Arsenal | 67 | 37 | 28 | 2 | 4 | 30 | 1 | 1 | 3 | 21 | 3 | 0 | 2 | 1 | 1 | |
Aston Villa | 36 | 16 | 20 | 0 | 3 | 16 | 0 | 2 | 1 | 8 | 0 | 0 | 6 | 0 | 0 | |
Cardiff City | 16 | 1 | 15 | 0 | 4 | 6 | 1 | 0 | 0 | 4 | 0 | 0 | 1 | 0 | 0 | |
Chelsea | 56 | 31 | 23 | 2 | 12 | 14 | 2 | 0 | 1 | 15 | 6 | 3 | 2 | 1 | 0 | |
Crystal Palace | 19 | 9 | 8 | 2 | 3 | 1 | 1 | 0 | 8 | 5 | 0 | 1 | 0 | 0 | 0 | |
Everton | 47 | 8 | 38 | 1 | 1 | 19 | 2 | 0 | 3 | 12 | 2 | 1 | 5 | 0 | 2 | |
Fulham | 24 | 9 | 15 | 0 | 1 | 7 | 1 | 0 | 1 | 5 | 5 | 0 | 2 | 0 | 2 | |
Hull City | 21 | 11 | 10 | 0 | 2 | 10 | 0 | 0 | 0 | 8 | 0 | 0 | 1 | 0 | 0 | |
Liverpool | 58 | 17 | 39 | 2 | 15 | 14 | 1 | 0 | 4 | 16 | 2 | 0 | 4 | 1 | 1 | |
Manchester City | 71 | 23 | 48 | 0 | 10 | 12 | 1 | 0 | 2 | 29 | 2 | 0 | 8 | 1 | 6 | |
Manchester United | 112 | 68 | 43 | 1 | 13 | 19 | 3 | 0 | 1 | 65 | 3 | 0 | 5 | 1 | 2 | |
Newcastle United | 50 | 27 | 23 | 0 | 7 | 6 | 1 | 1 | 8 | 23 | 2 | 0 | 1 | 0 | 1 | |
Norwich City | 4 | 2 | 2 | 0 | 0 | 1 | 0 | 0 | 0 | 3 | 0 | 0 | 0 | 0 | 0 | |
Southampton | 14 | 8 | 6 | 0 | 1 | 7 | 1 | 0 | 1 | 2 | 0 | 0 | 1 | 1 | 0 | |
Stoke City | 47 | 6 | 41 | 0 | 2 | 14 | 0 | 2 | 0 | 9 | 0 | 0 | 19 | 1 | 0 | |
Sunderland | 62 | 41 | 21 | 0 | 3 | 10 | 0 | 2 | 17 | 26 | 1 | 0 | 1 | 0 | 2 | |
Swansea City | 9 | 2 | 7 | 0 | 5 | 1 | 1 | 1 | 0 | 1 | 0 | 0 | 0 | 0 | 0 | |
Tottenham Hotspur | 42 | 25 | 16 | 1 | 9 | 21 | 4 | 0 | 0 | 6 | 1 | 0 | 1 | 0 | 0 | |
West Bromwich Albion | 31 | 18 | 12 | 1 | 7 | 16 | 0 | 0 | 1 | 5 | 0 | 0 | 1 | 1 | 0 | |
West Ham United | 37 | 11 | 26 | 0 | 9 | 13 | 0 | 0 | 1 | 13 | 0 | 0 | 0 | 0 | 1 |
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
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Bar Chart, Framed</title> | |
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> | |
<style type="text/css"> | |
body { | |
margin: 0; | |
background-color: lightGray; | |
font-family: Helvetica, Arial, sans-serif; | |
} | |
#container { | |
width: 700px; | |
margin-left: auto; | |
margin-right: auto; | |
margin-top: 50px; | |
padding: 50px; | |
background-color: white; | |
box-shadow: 3px 3px 5px 6px #ccc; | |
} | |
h1 { | |
font-size: 24px; | |
margin: 0; | |
} | |
p { | |
font-size: 14px; | |
margin: 15px 0 10px 0; | |
} | |
a:link { | |
text-decoration: none; | |
color: gray; | |
} | |
a:hover { | |
text-decoration: underline; | |
} | |
a:visited { | |
color: gray; | |
} | |
a:active { | |
color: steelBlue; | |
} | |
svg { | |
background-color: white; | |
} | |
g.bar text { | |
font-size: 11px; | |
font-weight: bold; | |
text-anchor: end; | |
opacity: 0; | |
} | |
g.bar:hover rect { | |
fill: orange; | |
} | |
g.bar:hover text { | |
opacity: 1; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: black; | |
shape-rendering: crispEdges; | |
} | |
.axis text { | |
font-family: sans-serif; | |
font-size: 11px; | |
} | |
.y.axis path, | |
.y.axis line { | |
opacity: 0; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="container"> | |
<h1>Arrests at Football games in the Premier League 2013-14</h1> | |
<p>The total number of arrests at football games in the Premier League during the 2013-14 Season by team <strong>Source:</strong> <a href="https://data.gov.uk/dataset/football-banning-orders/resource/0764f5ba-7812-4e5f-92f7-113753f99374">UK Home Office</a></p> | |
</div> | |
<script type="text/javascript"> | |
var w = 400; | |
var h = 400; | |
var padding = [ 20, 10, 30, 120 ]; //Top, right, bottom, left | |
var widthScale = d3.scale.linear() | |
.range([ 0, w - padding[1] - padding[3] ]); | |
var heightScale = d3.scale.ordinal() | |
.rangeRoundBands([ padding[0], h - padding[2] ], 0.1); | |
var xAxis = d3.svg.axis() | |
.scale(widthScale) | |
.orient("bottom"); | |
var yAxis = d3.svg.axis() | |
.scale(heightScale) | |
.orient("left"); | |
//Now SVG goes into #container instead of body | |
var svg = d3.select("#container") | |
.append("svg") | |
.attr("width", w) | |
.attr("height", h); | |
d3.csv("./footballcrimes.csv", function(data) { | |
data.sort(function(a, b) { | |
return d3.descending(+a.total, +b.total); | |
}); | |
widthScale.domain([ 0, d3.max(data, function(d) { | |
return +d.total; | |
}) ]); | |
heightScale.domain(data.map(function(d) { return d.team; } )); | |
//Bind data to groups (not bars directly) | |
var groups = svg.selectAll("g") | |
.data(data) | |
.enter() | |
.append("g") | |
.attr("class", "bar"); | |
//Add a rect to each group | |
var rects = groups.append("rect") | |
.attr("x", padding[3]) | |
.attr("y", function(d) { | |
return heightScale(d.team); | |
}) | |
.attr("width", 0) | |
.attr("height", heightScale.rangeBand()) | |
.attr("fill", "steelblue"); | |
//Add a text element to each group | |
groups.append("text") | |
.attr("x", function(d) { | |
return padding[3] + widthScale(d.total) - 3; | |
}) | |
.attr("y", function(d) { | |
return heightScale(d.team) + 11; | |
}) | |
.text(function(d) { | |
return d.total; | |
}); | |
rects.transition() | |
.delay(function(d, i) { | |
return i * 50; | |
}) | |
.duration(1000) | |
.attr("width", function(d) { | |
return widthScale(d.total); | |
}); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")") | |
.call(xAxis); | |
svg.append("g") | |
.attr("class", "y axis") | |
.attr("transform", "translate(" + padding[3] + ",0)") | |
.call(yAxis); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment