-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
70 lines (70 loc) · 2.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!doctype html>
<html>
<head>
<title>Historical English football league positions</title>
<link href="ext/style.css" rel="stylesheet">
<link href="ext/app-icon.png" rel="apple-touch-icon">
<script src="ext/d3.v2.min.js" type="text/javascript"></script>
<script src="ext/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="ext/yo-yo.js" type="text/javascript"></script>
</head>
<body>
<noscript>
This page requires JavaScript to be enabled in order to work.
</noscript>
<h1>Historical English football league positions</h1>
<p>
Want to see how Wigan, Swansea, and
Fulham <a href="javascript:charter.range(1994, 2024);
selectTeams(['fulham', 'swansea', 'wigan']);">rose to the Premier
League</a>? (Before they fell back out again.) How about teams from the
West Midlands in the
<a href="javascript:charter.range(1970, 1990);
selectTeams(['aston-villa', 'birmingham', 'coventry', 'wba',
'wolverhampton']);">70s and 80s</a>? Or just the long (and
generally sad) history
of <a href="javascript:charter.range(1889, 2024);
selectTeams(['derby', 'newport', 'notts-county',
'stockport']);">teams called County</a>?
</p>
<p>
Terrific! This page is a simple experiment
with <a href="http://d3js.org/">D3.js</a> and historical English
football league data taken from the
wonderful <a href="http://www.rsssf.com/"
title="The Rec.Sport.Soccer Statistics Foundation"
>RSSSF</a>.
It shows the overall league position of a team over time. For
example, with a 20-team top flight, first place in the second
tier is 21st overall. Use the controls on the right to choose
teams (no more than 10!) and the data range to view. (If you
know how, then fork on GitHub
at <a href="https://github.com/smcgivern/historical-league-positions"
>smcgivern/historical-league-positions</a>.)
</p>
<p>
The data behind this chart is
also <a href="./ext/historical-league-positions.csv">available as
a CSV file</a>.
</p>
<div id="chart">
<div id="options">
<input type="number" id="min-year" class="year">
to
<input type="number" id="max-year" class="year">
<div id="team-list">
<ol id="teams-selected"></ol>
<span id="too-many-teams-warning">
Don’t select more than 10 teams, the line colours will
repeat!
</span>
<ol id="teams-unselected" class="scrollable"></ol>
<label>Filter: <input type="text" id="team-filter"></label>
</div>
</div>
</div>
<footer id="byline">
<p>By <a href="http://sean.mcgivern.me.uk/">Sean McGivern</a></p>
</footer>
</body>
</html>