-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathall.html
227 lines (202 loc) · 7.53 KB
/
all.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
<!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>按照行星的半径相对地球半径比例绘制，该数据集还包括发现方法(detection_type 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");
// 圆形气泡大小为半径平方
var bubble = d3.layout.pack()
.sort(null)
.value(function(d) { return d.radius * d.radius; })
.padding(2)
.size([r, r]);
//生成一个SVG元素，它是所有SVG图形的容器，网页长宽
var vis = d3.select("body").append("svg")
.attr("width", r)
.attr("height", r+50)
.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", "detection_type")
.attr("x", 15)
.attr("y", 100)
.style("text-anchor", "left")
.text("detection_type 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')]);
//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 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("#detection_type").text("发现方法: "+d.detection_type);
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("#detection_type").text("发现方法: "+d.detection_type);
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); });
}
});
}
//-----------------------------数据导入,重点-----------------------------
d3.json('https://raw.githubusercontent.com/pzhsummer/exoplanets_interactive/test/package.json', function(json) {
// d3.json("package.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) + "," + (d.y+50) + ")"; });
node.append("title")
.text(function(d) { return d.className + "\n 地球半径: " + d.radius + "\n 距地球: " + d.distance + "pc"; });
node.append("circle")
.attr("r", function(d) { return Math.sqrt(d.r * d.r * 0.3); })
.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("#detection_type").text("发现方法: "+d.detection_type);
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 = [];
function recurse(name, node) {
if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
else classes.push({packageName: name, className: node.name, radius: node.radius, distance: node.star_distance,
year: node.discovered, detection_type: node.detection_type});
}
recurse(null, root);
return {children: classes};
}
</script>