-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlittle.html
286 lines (264 loc) · 10.2 KB
/
little.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
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
<!DOCTYPE html>
<meta charset="utf-8">
<title>Exoplanets</title>
<style>
@import url(http://fonts.googleapis.com/css?family=Istok+Web);
@import url(http://fonts.googleapis.com/css?family=Oswald);
@import url(main.css);
#planet {
font-family: "Oswald", serif;
}
</style>
<!--核心d3进行可视化-->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<!------------------------------网页简单介绍--------------------------------->
<h1>
<a href="http://codementum.org" id="codementumIcon"></a>
Exoplanets: an interactive version
</h1>
<p>按照行星的半径相对地球半径比例绘制，该数据集还包括大气类型(atmosphere type)等属性（在左边的信息区显示）</p>
<p>选项1中，颜色与半径有关：所有蓝色和浅橙色的行星都比木星小，紫色代表比木星大的行星，而红色代表所有行星中非常大的；
选项2中：颜色与恒星的距离有关，行星越蓝，它离最近的恒星就越远。</p>
<p>源码主要参考于<a href="https://github.com/codementum/exoplanets"> github</a>.</p>
<script src="http://codementum.org/lib/codementumIcon.js"></script>
<script>
//------------------------中间部分---------------------------
//设置整个可视化图形的大小，r=1000左右合适
var r = 800, format = d3.format(".2f");
//d为匿名函数，这个函数将与当前数据元素以及当前数据元素的索引一起调用
function cFill(d){
// //将抽象的维度数据映射为可视化表示,将半径用颜色进行映射
var val = d.radius;
if(val >= 0.0 && val < 4.02)
return d3.hsl('#03A9F4');
if(val >= 4.02 && val < 11.210)
return d3.hsl('#FFB74D');
if(val >= 11.210 && val < 16.0)
return d3.hsl('#663399');
else
return d3.hsl('#D32F2F');
}
// 圆形气泡大小为半径平方
var bubble = d3.layout.pack()
.sort(null)
.value(function(d) { return d.radius * d.radius; })
.size([r+200, r]);
//生成一个SVG元素，它是所有SVG图形的容器，网页长宽
var vis = d3.select("body").append("svg")
.attr("width", r+300)
.attr("height", r+300)
.attr("class", "bubble");
// ------------------------------设置左上角信息-----------------------------
// 行星名称
vis.append("text")
.attr("id", "planet")
.attr("x", 15)
.attr("y", 40)
.style("font-size", "32px")
.style("text-anchor", "left")
.text("Planet Name");
//行星相对地球半径
vis.append("text")
.attr("id", "earths")
.attr("x", 15)
.attr("y", 70)
.style("text-anchor", "left")
.text("(earth radius)");
// 大气类型
vis.append("text")
.attr("id", "atmosphere")
.attr("x", 15)
.attr("y", 100)
.style("text-anchor", "left")
.text("atmosphere type");
// 发现年
vis.append("text")
.attr("id", "year")
.attr("x", 15)
.attr("y", 130)
.style("text-anchor", "left")
.text("year discovered");
//----------------------设置两个选项选项，交换按钮实现，需改进，如果三个及以上选项怎么办-----------------
var colorByDistance = false;
function toggleMetric() {
if(!colorByDistance) {
colorByDistance = true;
d3.select('#distanceButton').style('fill', '#156B87');
d3.select('#massButton').style('fill', 'white');
updateNodes();
} else {
colorByDistance = false;
d3.select('#massButton').style('fill', '#156B87');
d3.select('#distanceButton').style('fill', 'white');
updateNodes();
}
}
vis.append("rect")
.attr("id", "massButton")
.attr("x", r/2 - 50)
.attr("y", 10)
.attr("width", 20)
.attr("height", 20)
.style("stroke", 'black')
.style("fill", "#156B87")
.on("click", toggleMetric);
vis.append("rect")
.attr("id", "distanceButton")
.attr("x", r/2 - 50)
.attr("y", 40)
.attr("width", 20)
.attr("height", 20)
.style("stroke", 'black')
.style("fill", 'white')
.on("click", toggleMetric);
vis.append("text")
.attr("id", "distanceButtonText")
.style("font-size", "12px")
.attr("x", r/2+15-30)
.attr("y", 25)
.text("选项1:颜色由相对半径决定");
vis.append("text")
.attr("id", "distanceButtonText")
.style("font-size", "12px")
.attr("x", r/2+15-30)
.attr("y", 55)
.text("选项2:颜色由相对恒星距离决定");
var dFill = d3.scale.linear()
.domain([0.0004, 2500])
.range([d3.hsl('#DCDCDC'), d3.hsl('#156b87')]);
var updateNodes = function() {
var circs = vis.selectAll("g.node").selectAll('circle');
// 开始为当前选择的过渡
circs.transition()
.duration(1000)
.style("fill", function(d) {
if(!colorByDistance)
return cFill(d);
else
return dFill(d.distance);
});
circs.on("mouseover", function(d) {
if(colorByDistance) {
d3.select("#planet").text(d.className);
d3.select("#earths").text("("+format(d.distance)+" * 日地距离AU)");
d3.select("#year").text("发现年: "+d.year);
d3.select("#atmosphere").text("大气类型: "+d.atmosphere);
d3.select(this).style("fill", function(d) { return d3.hsl(dFill(d.distance)).darker(); });
} else {
d3.select("#planet").text(d.className);
d3.select("#earths").text("("+format(d.radius)+" * 地球半径)");
d3.select("#year").text("发现年: "+d.year);
d3.select("#atmosphere").text("大气类型: "+d.atmosphere);
d3.select(this).style("fill", function(d) { return cFill(d).brighter(); });
}
});
circs.on("mouseout", function(d) {
if(colorByDistance) {
d3.select(this).style("fill", function(d) { return d3.hsl(dFill(d.distance)); });
} else {
d3.select(this).style("fill", function(d) { return cFill(d); });
}
});
}
//---------------------------------之间为选项代码，不要可删除100行左右--------------------------------
//对当前选择的每个元素，选取匹配指定选择器字符串的后代元素。
//返回的选择是通过在当前选择的祖先节点进行分组，如果没有元素和当前元素的指定选择器相匹配，返回的选择中当前索引处的组将是null。
// 以地球半径为1,以太阳系行星与地球半径之比为图例，1实际含义为网页单位1
var ourPlanets = [
{name:'水星', radius:'0.3829'},
{name:'金星', radius:'0.9499'},
{name:'地球', radius:'1.0'},
{name:'火星', radius:'0.533'},
{name:'木星', radius:'11.209'},
{name:'土星', radius:'9.4492'},
{name:'天王星', radius:'4.007'},
{name:'海王星', radius:'3.883'},
];
//气泡位置
vis.selectAll('circle.ourPlanets')
.data(ourPlanets)
.enter().append('circle')
.attr('class', 'ourPlanets')
.attr('id', function(d) { return d.name; })
.attr('cx', function(d, i) { return r+130 ; })
.attr('cy', function(d, i) { return 250 + 30*i; })
.attr('r', function(d, i) {
return d.radius;
})
.style('fill', function(d, i) {
return cFill(d);
})
.on("mouseover", function(d) {
d3.select("#planet").text(d.name);
d3.select("#earths").text("("+format(d.radius)+" * 地球半径)");
d3.select("#year").text("");
d3.select("#atmosphere").text("");
d3.select(this).style("fill", function(d) { return cFill(d).brighter(); });
})
.on("mouseout", function(d) {
d3.select(this).style("fill", function(d) { return cFill(d); });
});
//文字位置
vis.selectAll('text.ourPlanets')
.data(ourPlanets)
.enter().append('text')
.attr('class', 'ourPlanets')
.style("font-size", "12px")
.attr('x', function(d, i) { return r + 170; })
.attr('y', function(d, i) { return 250 + 31*i; })
.text(function(d) { return d.name; })
.on("mouseover", function(d) {
d3.select("#planet").text(d.name);
d3.select("#earths").text("("+format(d.radius)+" * 地球半径)");
d3.select("#year").text("");
d3.select("#atmosphere").text("");
d3.select('#'+d.name).style("fill", function(d) { return cFill(d).brighter(); });
})
.on("mouseout", function(d) {
d3.select('#'+d.name).style("fill", function(d) { return cFill(d); });
if(d.name === 'pluto'){
d3.select(this).text(d.name);
d3.selectAll('circle.ourPlanets').select(d.name).style('fill', cFill(d));
}
});
//-----------------------------数据导入,重点-----------------------------
d3.json('https://raw.githubusercontent.com/pzhsummer/exoplanets_interactive/test/exoplanets.json', function(json) {
// d3.json("exoplanets.json", function(json) {
//选中匹配指定选择器的所有的元素。这些元素会按照文档的遍历顺序（从上到下）选择。如果当前文档中没有匹配的元素则返回空的选择。
var node = vis.selectAll("g.node")
.data(bubble.nodes(classes(json))
.filter(function(d) { return !d.children; }))
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + (80 + d.y) + ")"; });
node.append("title")
.text(function(d) { return d.className + "\n * 地球半径: " + d.radius + "\n 日地距离AU: " + d.distance; });
node.append("circle")
.attr("r", function(d) { return Math.sqrt(d.r * d.r * .8); })
.style("fill", function(d) { return cFill(d); })
.on("mouseover", function(d) {
d3.select("#planet").text(d.className);
d3.select("#earths").text("("+format(d.radius)+" * 地球半径)");
d3.select("#year").text("发现年: "+d.year);
d3.select("#atmosphere").text("大气类型: "+d.atmosphere);
d3.select(this).style("fill", function(d) { return cFill(d).brighter(); });
})
.on("mouseout", function(d) {
d3.select(this).style("fill", function(d) { return cFill(d); });
});
});
// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
var classes = [];
//---------------------------重点，调用数据!!目前为843--------------------
// className radius distance year atmosphere
function recurse(name, node) {
if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
else classes.push({packageName: name, className: node.P_Name, radius: node.P_Radius_EU, distance: node.P_Mean_Distance_AU,
year: node.P_Disc_Year, atmosphere: node.P_Atmosphere_Class});
}
recurse(null, root);
return {children: classes};
}
</script>