-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
39 lines (36 loc) · 1.55 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horror movies</title>
<script type="text/javascript" src="d3/d3.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>120 years of horror movies: things we love to be afraid of.</h1>
<p>Some topics popular in 50s (like monsters, demons and aliens) have the same popularity today, but others (vampires, ghost and zombies) have exploded in popularity in last 20 years. Explore keywords for horror movies filmed from 1896 to 2016.</p>
<div >
<button id="all">all</button>
<button id="1890" class="decade">1890</button>
<button id="1900" class="decade">1900</button>
<button id="1910" class="decade">1910</button>
<button id="1920" class="decade">1920</button>
<button id="1930" class="decade">1930</button>
<button id="1940" class="decade">1940</button>
<button id="1950" class="decade">1950</button>
<button id="1960" class="decade">1960</button>
<button id="1970" class="decade">1970</button>
<button id="1980" class="decade">1980</button>
<button id="1990" class="decade">1990</button>
<button id="2000" class="decade">2000</button>
<button id="2010" class="decade">2010</button>
</div>
<div id="area1"> </div>
<div id="area2"> </div>
<div id="tooltip" class="hidden">
<p><span id="key">key</span></p>
<p><span id="value">0</span></p>
</div>
<script type="text/javascript" src="chart.js"></script>
</body>
</html>