-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
54 lines (48 loc) · 2.14 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
<!DOCTYPE html>
<html>
<head>
<title>Global Terrorism</title>
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v3.min.js"></script>
<link rel="stylesheet" href='styles.css'>
</head>
<body>
<header>
<h1>Global Terrorism from 1970 to 2017</h1>
</header>
<svg class="mappp" width="900" height="730"></svg>
<svg class="linechart" width="500" height="1000"></svg>
<div class="year_slider">
<p style="margin-bottom: 5px; padding-top: 20px; padding-left: 15px;">Year</p>
<input id='slider' type='range' min='1970' max='2017' value='2000' step='1' style="width: 350px;">
<output id="slidertext" style="margin-bottom: 0px;">2000</output>
</div>
<div class = "description">
<p>
Terrorism indeed overshadows every aspect of economic, social, cultural and political life.
While it brings instability and disrupts peace and coexistence environments,
it directly endangers the lives of people and brings every type of violence in the society.
</p>
<p>
To appeal for wider attention on such heinous action and contempt for life,
this map help us to see the change thrend of terrorist attacks in different locations.
</p>
</div>
<script src="main.js"></script>
<div id = "hint">
<p>Please click the country on the map, <br/>
and then you will see the change of <br/>
that country's terrorist attack amounts <br/>
over time.</p>
</div>
<button id="btn1">
<p>change view</p>
</button>
<button id="btn2">
<p>clear</p>
</button>
</body>
</html>