forked from jluastro/OKGalileo
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (114 loc) · 4.41 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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Okgalileo by jluastro</title>
<link rel="stylesheet" href="stylesheets/styles.css">
<link rel="stylesheet" href="stylesheets/pygment_trac.css">
<link rel="stylesheet" href="okgalileo.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="javascripts/respond.js"></script>
<script src="javascripts/d3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="tabletop.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 8]>
<link rel="stylesheet" href="stylesheets/ie.css">
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
<div id="header">
<nav>
<li class="fork"><a href="https://github.com/jluastro/OKGalileo">View On GitHub</a></li>
<li class="downloads"><a href="https://github.com/jluastro/OKGalileo/zipball/master">ZIP</a></li>
<li class="downloads"><a href="https://github.com/jluastro/OKGalileo/tarball/master">TAR</a></li>
<li class="title">DOWNLOADS</li>
</nav>
</div><!-- end header -->
<div class="wrapper">
<section>
<div id="title">
<h2>OK Galileo - Telescopes of the World</h2>
<p>Choose the astronomical site characteristics you want to visualize.</p>
<p>
Horizontal Axis:
<select name="Xaxis">
<option value="altitude">Altitude</option>
<option value="longitude">Longitude</option>
<option value="timezone">Time Zone</option>
</select>
Vertical Axis:
<select name="Yaxis">
<option value="altitude">Altitude</option>
<option value="longitude">Longitude</option>
<option value="timezone">Time Zone</option>
</select>
</p>
<div id="fig1">Blah!</div>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 500 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("#fig1").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Price ($)");
d3.csv("observatory_sites.csv", function(data) {
// get all keys of data hash
var keys = Object.keys(data[0]);
var xDropDown = d3.select("#xselect")
var yDropDown = d3.select("#yselect")
var options = xDropDown.selectAll("option")
.data(data)
.enter()
.append("option");
options.text(function (d) { return d.value; })
.attr("value", function (d) {return d.value; });
});
</script>
<!-- <script src="okgalileo.js" charset="utf-8"></script> -->
<p id="test"></p>
<hr>
<span class="credits left">Project maintained by <a href="https://github.com/jluastro">jluastro</a></span>
<span class="credits right">Hosted on GitHub Pages</span>
</div>
<!--[if !IE]><script>fixScale(document);</script><![endif]-->
<!-- this is the script that loads in the table-->
<script type="text/javascript" src="okgalileo_load.js"></script>
<!-- You can delete the following script block - just for testing> -->
<script type="text/javascript">
function showInfo(data) {
document.getElementById("test").innerHTML = "<strong>Sites:</strong> " + data[0].nameofthesite;
console.log(data);
}
</script>
</body>
</html>