-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdocumentation.html
88 lines (58 loc) · 4.63 KB
/
documentation.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
<!-- CS50 Final Project
Fall 2013
Erin Braswell
documentation.html
-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<title>ErinSpace</title>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="./css/bootstrap-responsive.css"/>
<link rel="stylesheet" type="text/css" href="./css/planet_animation.css"/>
<script type = "text/javascript" src="./js/d3.v3.js"></script>
<script type="text/javascript" src="./js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="./js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="header">
<ul class="nav nav-pills pull-right">
<li><a href="http://exoplanets.erinspace.net">Home</a></li>
<li class="active"><a href="documentation.html">Documentation</a></li>
<li><a href="design.html">Design</a></li>
</ul>
<h3 class="text-muted">ExploringExoplanets</h3>
</div>
<div class="span8">
<img id="star" src="./img/sun.png">
<div id='planet1-orbit'>
<img id="planet1" src="./img/planet.png">
</div>
<h1>Documentation</h1>
<p class="lead">I've long been interested in the various interactive graphs that I've seen, so I thought for my final project I'd try my hand at making one!</p>
<p>For this project, I used data from the <a href="http://openexoplanetcatalogue.com/">Open Exoplanet Catalog</a>, which is hosted on github.</p>
<p>This web application will parse the data from the XML file containing the exoplanet data and create a simple scatterplot based on the options in the form to the left of the graph. More about the specifics of how everything works in the "Design" section!</p>
<h4>Making a scatterplot</h4>
<p>To create your first scatter plot, simply choose an option from the dropdown menu. The graph will automatically update when you change any parameter. The axis options will change which values are plotted on each axis. The scale options will change the type of scale from linear to logarithmic (or log for short). The logarithmic scale is better for data that has quite a large range, but wouldn't make sense for some parameters (like date, for example). </p>
<p>The size dropdown will change the radius value for each point. The larger the radius or mass of the planet that the circle is representing, the larger the point on the scatterplot. The "constant" option will make every point the same size, which makes every planet easy to see on the graph - even the small ones!</p>
<h4>Explore the planets</h4>
<p>The plot itself also has a few interactive features. Hovering over each point on the graph will bring up a box with information about that particular planet from the dataset, including the planet's name, a description, mass as compared to the mass of Jupiter, radius compared to the radius of Jupiter, and the distance that the planet is to its host star (semi-major axis) as compared to the distance from the Sun to the Earth (1 AU). These are all pulled from the database itself.</p>
<p>Beneath the graph and the controls, there's a table explaining some of the vocabulary words and the units used in the scatterplot. This is meant as a very basic introduction to some of the concepts covered here.</p>
<h4>Ask yourself some questions</h4>
<p>I decided to pose a few questions and set the initial conditions for someone who might not know where to start when exploring the exoplanet data. The questions and graphs are meant to help users with graph interpretation and give them a starting point.</p>
<p>The planet and star animation in the upper right hand corner doesn't do anything except look pretty cool. I had a lot of fun learning about CSS animation!</p>
<h4>Here's a video walkthrough</h4>
<br/>
<iframe width="420" height="300" src="//www.youtube.com/embed/rnABbnQddH4" frameborder="0" rel="0" allowfullscreen></iframe>
</div>
</div>
<div id="footer">
<div class="container">
<p class="text-muted">CS50 Fall 2013 Final Project by Erin Braswell</p>
</div>
</div>
</body>
</html>