-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
126 lines (113 loc) · 6.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Homework #3: D3 Animations - CSE 578 - Spring 2023</title>
<link rel="shortcut icon" href="#">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@6.6.6/css/flag-icons.min.css"/>
<link rel="stylesheet" href="css/styles.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="js/jquery-3.6.3.min.js"></script>
<script src="js/script.min.js"></script>
</head>
<body>
<div class="d-flex flex-column" id="content-wrapper">
<h2 class="text-center text-dark heading-name">Homework #4: Innovative Visualization Design</h2>
<h4 class="text-center text-dark heading-name">Shikhar Gupta - sgupt330@asu.edu</h4>
<div id="content">
<div class="container-fluid">
<hr>
<div class="row">
<div class="col-lg-12 col-xl-12">
<div class="card shadow mb-4">
<div>
<h4 class="fw-bold m-0 text-black m-1 p-2">The Search for New Worlds: Mapping NASA's
Exoplanet
Discoveries <img src="icons/rocket.gif" style="width:30px" alt="rocket_gif"></h4>
</div>
<div class="text-lg-start m-2 text-black description">
<p>
This interactive visualization presents NASA's Exoplanet Catalog in a visually stunning
and informative way, using a combination of marks, channels, and interactions.
The main visual element is a 2D model which shows the planets discovered since 2017
till date. Visitors can choose the year from the dropdown to see the planets discovered
in that year. Each planet is represented by an icon indicating the type of the planet
and size indicating its radius.
A legend provides additional information about the type of the planets.
Overall, this visualization provides an engaging and educational
experience for museum visitors to learn about the diversity and characteristics of
exoplanets discovered by NASA missions over the recent years.
<br>
For Bubble Plot - <br>
  <span class="fw-bold">Marks:</span> Circles/Bubbles <br>
  <span class="fw-bold">Channels:</span> Icons representing planet type, size of
the bubbles <br>
  <span class="fw-bold">Interactions:</span> On hovering over a planet icon, a
tooltip shows more information
such as discovery year, etc. and on clicking a planet icon,
a radial/spider chart shows up on the right side of the screen representing
detailed quantitative information about the planet. <br>
For radial/spider chart - <br>
  <span class="fw-bold">Marks:</span> Polyline mark (glyph) <br>
  <span class="fw-bold">Channels:</span> Radial position represents the
magnitude of the value for that variable. <br>
</p>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-8 col-xl-8">
<div class="card shadow mb-4">
<div class="card-header text-center">
<h6 class="fw-bold m-0 text-center text-black">
<label for="planet_year">Planets discovered in</label>
<select id="planet_year" onchange="applyParams()">
<option value="2017" selected>2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select>
</h6>
</div>
<div id="bubble_div">
</div>
</div>
</div>
<div class="col-lg-4 col-xl-4">
<div class="card shadow mb-4">
<div class="card-header text-center">
<h6 class="fw-bold m-0 text-center text-black">Planet Name: <span class="fw-bold"
id="planet_name">N/A</span>
</h6>
</div>
<div class="card-body" id="side_graph">
<div id="radar_div">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="js/main.js"></script>
</html>