-
Notifications
You must be signed in to change notification settings - Fork 7
/
bubblechart.html
195 lines (177 loc) · 7.33 KB
/
bubblechart.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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<?include(".inc/prepend.php");?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- If this is run as a php script on a server, you can include your own header that includes a navigation bar, and other stylistic features -->
<script language="php"> include "./.inc/header.php"; if (false){ </script>
<!-- ** start server side header ** -->
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" type="image/ico" href="favicon.ico" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/><meta name="description" content="description"/>
<title>Open Exoplanet Catalogue</title>
<link rel="stylesheet" type="text/css" href="./css/style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="./css/tables.css" media="screen" />
<script type="text/javascript" src="./js/d3.v3.min.js"></script>
<script type="text/javascript" src="./js/jquery.min.js"></script>
</head>
<body>
<div class="outer-container">
<div class="inner-container">
<div class="content">
<!-- ** end server side header ** -->
<script language="php"> } </script>
<!-- ########################### -->
<h2><img src="./img/kig.png" alt="kig" />Bubble chart</h2>
<p>This bubble chart shows the relative sizes of all discovered planets.
The color corresponds to the mean equilibrium temperature of the planet.
A blue color indicates that the planet is too cold for water to be liquid. Red is too hot. Green might just be right.
However, these temperatures might vary significantly from the actual surface temperature of the planet, depending on cloud coverage, climate models and many other effects.
A gray color indicates that the temperature for this planet is not available.
When a planet radius is not measured, the planet mass is used to calculate an approximate size.
Planetary systems with multiple planets are grouped together.
You can click on each planet or system to view its details.
This plot uses the <a href="http://d3js.org">d3</a> javascript library. It is rendered directly in your browser.
</p>
<!-- ########################### -->
<div id="viz"></div>
<div id="pop-up">
<div id="pop-up-title">Title</div>
<div id="pop-up-description">Description</div>
<div id="pop-up-values">Values</div>
</div>
<style>
#viz, .infobox {
font-family: sans-serif;
}
#viz text {
font-family: sans-serif;
font-size: 12px;
}
</style>
<script type="text/javascript">
var width = 500;
var height = 500;
var xmldata = null;
var format4 = d3.format(".4f");
var format1 = d3.format(".1f");
var viz = d3.select("#viz")
.append("svg")
.attr("width", width)
.attr("height", height)
;
var colorScale = d3.scale.linear()
.domain([173,473])
.clamp(true)
.range([240,0]);
function comparator(a, b) {
return parseFloat($("> radius",a.xml).text()) - parseFloat($("> radius",b.xml).text()) ;
}
var bubble = d3.layout.pack()
.sort(comparator)
.value(function(planet){
var radius = parseFloat($("> radius",planet.xml).text());
if (isNaN(radius)){
var mass = parseFloat($("> mass",planet.xml).text());
radius = Math.pow(mass*317.8942,1./2.06)/10.973299;
}
if (isNaN(radius)){
radius = 0;
}
return radius;
})
.children(function(d){
var c = $("system",d.xml);
if (c.length<=0) c = $("planet",d.xml);
return Array.prototype.map.call(c, function(d) { return {xml: d}; });
})
.size([width, height])
.padding(1.5);
var updatePlot = function(first){
var node = viz.selectAll(".node")
.data(bubble.nodes({xml: xmldata}))
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("circle")
.attr("r", function(d) { return d.r; })
.style("fill", function(planet) {
switch(planet.depth){
case 1: // system
return "#e1e1e1";
case 2: // planet
var val = parseFloat($("temperature",planet.xml).text());
if (isNaN(val)){
return "gray";
}else{
return d3.hsl(colorScale(val), 1, 0.5);
}
}
return "transparent";
})
.on("mouseout", function(d){
d3.select("#pop-up").style("display","none");
})
.on("mousemove", function(){
d3.select("#pop-up").style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");
})
.on("mouseover", function(planet){
switch(planet.depth){
case 1: // system
var name = $("name:first",planet.xml).text();
d3.select("#pop-up").style("display","inline");
d3.select("#pop-up-title").html(name);
d3.select("#pop-up-description").html("");
$("#pop-up-values").html("");
return;
case 2: // planet
var name = $("name:first",planet.xml).text();
var description = $("description",planet.xml).text();
d3.select("#pop-up").style("display","inline");
d3.select("#pop-up-title").html(name);
if (description){
d3.select("#pop-up-description").html(description);
}else{
d3.select("#pop-up-description").html("");
}
var values = "";
values += "<span class=\"popupvalue\">Radius [RJup]:</span>" + format4(planet.value);
var temperature = parseFloat($("temperature",planet.xml).text());
values += "<span class=\"popupvalue\">Temperature [Kelvin]:</span>" + format1(temperature);
values += "<span class=\"popupvalue\">Temperature [Celsius]:</span>" + format1(temperature-273.15);
$("#pop-up-values").html(values);
return;
default:
return;
}
})
.on("click", function(planet) {
if (planet.depth>0){
var name = $("name:first",planet.xml).text();
document.location.href = "/system.html?id=" + name;
}
});
};
d3.xml("systems.xml", "application/xml", function(xml) {
xmldata = xml;
updatePlot(true);
});
</script>
<div class="spacer" style="clear:left"></div>
<!-- ########################### -->
<h2><img src="./img/xml.png" alt="star" />Data download</h2>
<p>
The data presented in this plot is taken from the <a href="https://github.com/hannorein/open_exoplanet_catalogue">Open Exoplanet Catalogue</a>. All information on this page is directly generated from the XML files in the catalogue. If you are interested in how, look at the source code. You can download the entire catalogue on <a href="https://github.com/hannorein/open_exoplanet_catalogue/">github</a>. You can also find ASCII tables of the same catalogue <a href="https://github.com/hannorein/oec_tables/">in a separate repository</a>. Some information, especially in the case of a binary system cannot be easily represented in an ASCII table. You are therefore encouraged to use the original XML files provided by the Open Exoplanet Catalogue.
</p>
<!-- If run on a server, you can include your own footer -->
<script language="php"> include "./.inc/footer.php"; if (false){ </script>
<!-- ** start server side header ** -->
</div> <!-- content -->
<div class="clearer"> </div>
<div class="footer">
The data on this page is taken from the <a href="http://github.com/hannorein/open_exoplanet_catalogue">Open Exoplanet Catalogue</a>. The Open Exoplanet Catalogue as well as this website itself are licensed under an <a href="https://github.com/hannorein/open_exoplanet_catalogue/blob/master/README.md">MIT license</a>.
</div> <!-- footer -->
</div> <!-- inner container -->
</div> <!-- outer container -->
</body>
</html>
<!-- ** end server side header ** -->
<script language="php"> } </script>