-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdesign.html
125 lines (95 loc) · 8.65 KB
/
design.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
<!-- CS50 Final Project
Fall 2013
Erin Braswell
design.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><a href="documentation.html">Documentation</a></li>
<li class="active"><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>Design</h1>
<p class="lead">This project used python, HTML, CSS, XML, and JavaScript</p>
<p>Check out the <a href="https://github.com/erinbspace/exoplanet_project">code on github</a></p>
<h4>Gathering the Data</h4>
<p>For the first step, I forked the git repository containing the exoplanet data from the <a href="https://github.com/hannorein/open_exoplanet_catalogue">open exoplanet catalog on github.</a> This contained the database in a series of individual XML documents. I used python to concatenate all of the seperate XML files in the database into one long XML file called systems.xml. That way, if I'd like to update it in the future, I can simply pull from the exoplanet catalog github repository and re-create the master systems.xml file to be used for plotting. All of the rendering on the site is done using the systems.xml file that the python script generates.</p>
<p>My final submission will include 2 main sections: the open_exoplanet_catalog folder containing the systems folder, and the exoplanet_project folder. The open exoplanet catalog is not my work, but it contains the ogiginal data forked from the catalog on github (link above). It's not directly essential to making my webapp work, as the web app runs off of the systems.xml file that's in the main project folder (that is my work). I included the original raw data just in case the python file that gathers all of the separate XML files needed to be tested.</p>
<h4>Making sense of it all</h4>
<p>To start parsing my new XML file, I used tools built in to d3.js that read from the file and stored them in an object that could then later be referenced in other calls to d3 graphing functions. I only decided to add the planet to my database if it had most of the parameters I wanted to deal with: name, mass, radius, semimajoraxis, and period. If the planet had all of that but no description, I simply added a generic one.</p>
<p>I decided to have all of the JavaScript in the index.html file because I wanted to easily pass variables back and forth between the HTML forms at the bottom and the graphing calls to d3. When I tried to create a separate .js file for all of the JavaScript, I had trouble connecting the HTML form inputs and the JavaScript calls to d3 to render the graphs. In lieu of that, I tried to keep everything nicely organized within the JavaScript in index.html.</p>
<h4>Website layout</h4>
<p>I experimented with some fancy background images, but in the end I liked the sparsity of the plain white background. I feel like there's enough visually interesting things going on in the scatterplot itself, so I let that be the main feature.</p>
<p>The orbiting feature in the upper left started out as a fun experiment and quickly became a bit of an annoyance. It was a lot harder than I imagined to get the star properly orbiting the planet, and to look ok no matter what your screen size was! In the end I settled for something I didn't love, just to move on from aesthetics and focus more on the guts of the project.</p>
<h4>For the future</h4>
<p>While I worked for quite a long time on this project, I simply didn't have time to finish everything I wanted to finish! Here are a few things that I'd love to fix:</p>
<ul>
<li>More data from the database to make more choices for displaying the graph</li>
<li>An option to export your graph as an image file</li>
<li>More color choices. I tried to make discovery method a color choice option, but that did not work very well. To do this I need to fix the color legend.</li>
<li>Transitions between chart options. I am just now starting to get the hang of d3, and tried very hard to add pretty transitions between different data representations. I just couldn't do it in time. Soon.</li>
<li>The planet graphic sometimes gets in the way of the text, because I couldn't figure out how to position it better. What started out as a silly idea progressed into a feature that took way too much time for its own good. I'd like to make it better (and maybe add a planet), or in the distant future make that interactive, too!</p>
</ul>
<h4>Sources</h4>
<p>
One thing that's clear is that I had a lot of help from various forums, tutorials, and friends along the way. Here's a list of the tutorials and advice I followed to get everything working.
<ul>
<li>python</li>
<ul>
<li><a href="http://stackoverflow.com/questions/4706499/how-do-you-append-to-file-in-python">appending to a file</a></li>
<li><a href="http://stackoverflow.com/questions/17749484/python-script-to-concatenate-all-the-files-in-the-directory-into-one-file">saving all XML files to one master database</a></li>
<li><a href="https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally">python's SimpleHTTPServer for development</a></li>
</ul>
<br/>
<li>d3</li>
<ul>
<li><a href="https://github.com/mbostock/d3/wiki">The D3.js Wiki</a></li>
<li><a href="https://github.com/mbostock/d3/wiki/Requests#wiki-d3_xml">reading xml</a></li>
<li><a href="https://gist.github.com/lgrammel/2772585">xml example</a></li>
<li><a href="http://bl.ocks.org/mbostock/3887118">simple scatterplot</a></li>
<li><a href="http://swizec.com/blog/quick-scatterplot-tutorial-for-d3-js/swizec/5337">scatterplot tutorial</a></li>
<li><a href="http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html">adding tooltips</a></li>
</ul>
<br/>
<li>HTML/CSS</li>
<ul>
<li><a href="http://www.codecademy.com/goals/web-beginner-en-ymqg0">planet animation from Codeacademy</a></li>
<li><a href="http://getbootstrap.com/">Twitter bootstrap and documentation</a>
<li><a href="http://www.w3schools.com/">Tutorials and reference guides on w3schools.com</a></li>
</ul>
<br/>
<li>Music on my documentation video is "Happiness Is" by Podington Bear, accessed through the <a href="http://freemusicarchive.org/music/Podington_Bear/Egress/01_Happiness_Is">Free Music Archive</a></li>
<br/>
<li>Additional help from wonderful friends. Thanks guys!</li>
</ul>
</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>