-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
60 lines (60 loc) · 4.02 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
<html>
<head>
<title>Eurovision Votes</title>
<style>
html{ font-size: 11px; font-family: "Helvetica Neue", Helvetica, sans-serif; line-height: 17px }
body{ padding: 20px; min-width: 1140px }
#title{ font-size: 60px; font-weight: bold; position: absolute; left: -280px; top: 370px; text-align: right; height: 40px; width: 700px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); }
#chart{ margin-left: 80px; border-top: 2px solid black; border-left: 2px solid black; padding: 10px 0 0 20px; }
#grid{ margin-top: 25px; border-top: 1px solid black; border-left: 1px solid black; padding: 20px 0 0 20px; }
.box{ background-color: white; height: 15px; border: 1px solid gray; width: 20px; float: left; margin: -1px 0 0 -1px; position: static }
.box.c0{ background-color: #FFFFFF; }
.box.c1{ background-color: #FFFFCC; }
.box.c2{ background-color: #FFEDA0; }
.box.c3{ background-color: #FED976; }
.box.c4{ background-color: #FEB24C; }
.box.c5{ background-color: #FD8D3C; }
.box.c6{ background-color: #FC4E2A; }
.box.c7{ background-color: #E31A1C; }
.box.c8{ background-color: #B10026; }
.inactive{ display: none }
.box.active{ border: 3px solid black; margin: -3px -2px -3px -3px; position: relative; }
.label{ float: left; }
.label.top{ -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); width: 21px; height: 20px; position: relative; left: 30px; margin-bottom: 3px }
.label.side{ width: 25px; height: 16px; float: left; text-align: right; margin-right: 3px; clear: left }
.axis{ background-color: white; width: 100px; font-weight: bold; font-size: 14px; position: absolute; text-transform: uppercase; text-align: center; margin: auto; }
.axis#x{ top: 100px; left: 590px; }
.axis#y{ -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); left: 80px; top: 550px; }
#probe{ position: absolute; background-color: white; padding: 5px 10px; border: 1px solid silver; margin: -100px 0 0 30px; }
.value{ font-weight: bold; font-size: 14px; text-align: center}
.year{ font-size: 13px; font-weight: bold; color: black; display: inline-block; padding: 4px 6px; margin-left: -1px; border: 1px solid silver; cursor: pointer; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; }
.span{ background-color: #ddd }
.starts, .ends{ background-color: black; color: white }
#probe{ display: none }
#play{ font-size: 16px; line-height: 27px; background-color: white; color: black; text-align: center; float: left; height: 25px; width: 30px; border: 1px solid black; margin: 17px 10px 0 0; cursor: pointer }
#play:hover{ background-color: #ddd }
.playing#play{ color: white; background-color: black }
#source{ position: absolute; top: 10px; right: 30px }
#credit{ position: fixed; bottom: 0; right: 0; background-color: rgba(255,255,255,0.8); padding: 5px 20px 10px 5px }
#switch{ margin-left: 791px; float: left; margin-top: 5px }
#switch a.on{ font-weight: bold; text-decoration: none; color: black }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="chart.js" type="text/javascript"></script>
</head>
<body>
<div id="title">Eurovision Votes</div>
<div id="chart">
Click / drag to select a year or range:
<div id="play">▶</div><div id="timeline"></div>
<div id="switch">Sort countries: <a href="#" id="alph">alphabetically</a> / <a id="geo" class="on">geographically</a></div>
<div class="axis" id="x">Receiver</div>
<div class="axis" id="y">Giver</div>
<div id="grid"></div>
<div style="clear:both"></div>
</div>
<div id="probe"></div>
<div id="source">Source: <a href="http://www.guardian.co.uk/news/datablog/2011/may/13/eurovision-winners-list-data" target="_blank">The Guardian Datablog</a></div>
<div id="credit">Made by: <a href="http://twitter.com/#!/davidheyman">@davidheyman</a></div>
</body>
</html>