This repository has been archived by the owner on Jul 5, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
153 lines (136 loc) · 5.06 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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="https://d3js.org/topojson.v2.min.js"></script>
<script type="text/javascript" src="https://d3js.org/d3-color.v1.min.js"></script>
<link rel='stylesheet prefetch' type="text/css" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<style>
body {
background-color: azure;
}
svg.map {
border: 0px solid steelblue;
background-color: white;
padding: 0px;
margin-left: -8px;
overflow:hidden;
}
svg.miniGraph {
padding:0px;
margin:0px;
margin-left:-8px;
}
h1 {
padding: 0px;
margin: 0px;
font-size:54px;
font-family:"Cabin";
}
h3{
font-family:"Cabin";
}
form{
font-family:"Cabin";
}
.title {
background-color: #063C71;
width: 100vw;
padding-top: 25px;
padding-bottom: 15px;
margin-top: -8px;
margin-left: -8px;
color: white;
}
g.axis text {
font-size:8px;
}
g.graph text {
font-size:12px;
}
g.countryChart text {
font-size:2em;
}
input,button {
color:black;
}
.compare {
height:100vh;
width:45vw;
text-align:center;
}
.autocomplete-suggestions { border: 1px solid #999; background: white; cursor: default; overflow: auto; }
.autocomplete-suggestion { padding: 10px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: silver; }
.autocomplete-suggestions strong { font-weight: normal;}
.flowline {
stroke-dasharray: 15, 15;
animation: flow 1s linear infinite;
-webkit-animation: flow 1s linear infinite;
}
@keyframes flow {
from {
stroke-dashoffset: 30;
}
to {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes flow {
from {
stroke-dashoffset: 30;
}
to {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<div class='title'>
<h1 style='text-align: center;'>Recipients of U.S. Foreign Aid</h1>
<h3 style='text-align: center;'>Interactive Data Visualization by Danny Yang</h3>
<hr>
<div class='row'>
<div class='col-md-6 col-md-offset-1'>
<p><strong>Instructions: Click To Zoom, Hover for Details, Select Metric to Display Below</strong></p>
<form id='metricForm'>
<input id="aidbtn" type="radio" name="metric" value="aid" checked> Foreign Aid
<input id="democracybtn" type="radio" name="metric" value="democracy"> Democracy Index
<input id="happinessbtn" type="radio" name="metric" value="happiness"> Happiness Index
<input id="hdibtn" type="radio" name="metric" value="hdi"> Human Development Index
<input id="govtbtn" type="radio" name="metric" value="govt"> Government Type
</form>
</div>
<div class='col-md-5'>
<p><strong>Filter Foreign Aid Recipients by Amount (USD):</strong></p>
<input id="aidFilter" type="text" placeholder=" Lower Bound"><input id="aidFilter2" type="text" placeholder=" Upper Bound"><button id='setFilter'>Set Filter</button>
</div>
</div>
</div>
<div id='map'></div>
<div id="tooltip" style='position:absolute;'></div>
<div class='title' style='text-align: center;'>
<h3 style='text-align: center;'>Country Comparison Tool</h3>
<div class='row'>
<div class='col-md-2 col-md-offset-3'> <input id="leftCountry" type="text" placeholder=" Country 1"></div>
<div class='col-md-2'><button id='compareBtn'> Compare Countries </button></div>
<div class='col-md-2'><input id="rightCountry" type="text" placeholder=" Country 2"></div>
<div class='col-md-3'></div>
</div>
</div>
<div class='row'>
<div id='leftCompare' class='col-md-6 compare text-center'></div>
<div id='rightCompare' class='col-md-6 compare text-center'></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='js/jquery.autocomplete.min.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src='js/scales.js'></script>
<script src='js/scripts.js'></script>
<script src='js/controller.js'></script>
<script src='js/compare.js'></script>
</body>
</html>