-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex_final.html
199 lines (189 loc) · 9.47 KB
/
index_final.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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<script src='http://d3js.org/d3.v3.min.js'></script>
<script src='http://dimplejs.org/dist/dimple.v2.0.0.min.js'></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<style>
h1 {
text-align: center;
}
#wrapper {
width: 2500px;
margin: 10 auto;
text-align:left;
}
#chartcontainer,#chartnotes {
border: 1px solid white;
float: left;
}
</style>
<script type='text/javascript'>
function draw(data) {
/*
D3.js setup code
*/
'use strict';
var margin = 75,
width = 700 - margin,
height = 600 - margin;
var svg = d3.select('#chartcontainer')
.append('svg')
.attr('width', width + margin)
.attr('height', height + margin)
.append('g')
.attr('class','chart');
//Notes for default chart
d3.select('#chartnotes')
.text('不同舱位的存活率存在差异')
.append('p')
.text('头等舱乘客存活人数大于死亡人数，二等舱死亡人数和存活人数基本持平，三等舱死亡人数远远大于存活人数')
.append('p')
.text('这是否意味着头等舱乘客有更大的生还机会呢？');
// Default chart on page load
var myChart = new dimple.chart(svg, data);
var x= myChart.addCategoryAxis('x', ["Pclass"]);
x.addOrderRule(['Upper Class', 'Middle Class', 'Lower Class']);
var y= myChart.addMeasureAxis('y', 'PassengerId');
var series = myChart.addSeries('Survived_Status',dimple.plot.bar);
series.aggregate = dimple.aggregateMethod.count;
var legend = myChart.addLegend(100,20, 800, 30, 'left');
x.title= '座舱等级';
y.title= '幸存乘客/死亡乘客数量';
// Increase the font size of x and y axis
x.fontSize = 15;
y.fontSize = 15;
//Increase the size of the legend
legend.fontSize = 15;
myChart.draw();
//Select the first button - default
d3.select('#btn_sex')
.style('background', 'lightBlue')
.style('color', 'white');
d3.select('#btn_embarked')
.style('background', 'rgb(251, 201, 127)')
.style('color', 'black');
d3.select('#btn_default')
.style('background', 'rgb(251, 201, 127)')
.style('color', 'black');
//clear the buttons selections (resets button color)
function clear(){
svg.selectAll('*').remove()
d3.select('#btn_sex')
.style('background', 'rgb(251, 201, 127)')
.style('color', 'black');
d3.select('#btn_embarked')
.style('background', 'rgb(251, 201, 127)')
.style('color', 'black');
d3.select('#btn_default')
.style('background', 'rgb(251, 201, 127)')
.style('color', 'black');
};
//Button click events
var location = d3.select('#btn_embarked').on('click', function() {
clear();
var myChart2 = new dimple.chart(svg, data);
var x2 = myChart2.addCategoryAxis('x', ['Embarked']);
var y2 = myChart2.addMeasureAxis('y', 'PassengerId');
var series2 = myChart2.addSeries('Survived_Status',dimple.plot.bar);
series2.aggregate = dimple.aggregateMethod.count;
var legend2 = myChart2.addLegend(100,20, 800, 30, 'left');
x2.title= '乘客登船地';
y2.title= '幸存乘客/死亡乘客数量';
// Increase the font size of x and y axis
x2.fontSize = 15;
y2.fontSize = 15;
//Increase the size of the legend
legend2.fontSize = 15;
myChart2.draw(750);
d3.selectAll('rect')
.style('opacity', 1);
//Selected button styling
d3.select('#btn_embarked')
.style('background', 'lightBlue')
.style('color', 'white');
d3.select('#chartnotes')
.text('从图中我们可以看出， 法国瑟堡的乘客生还状况最为理想，生还人数大于死亡人数')
.append('p')
.text('昆士兰的生还情况最为惨烈，死亡人数是生还人数的两倍以上，这其中是否会有登船地乘客的特性导致了生还率更高呢？');
});
var gender = d3.select('#btn_sex').on('click', function() {
clear();
var myChart3 = new dimple.chart(svg, data);
var x3 = myChart3.addCategoryAxis('x', 'Sex');
x.addOrderRule(['Male', 'Female']);
var y3 = myChart3.addMeasureAxis('y', 'PassengerId');
var series3 = myChart3.addSeries('Survived_Status',dimple.plot.bar);
series3.aggregate = dimple.aggregateMethod.count;
var legend3 = myChart3.addLegend(100,20, 800, 30, 'left');
x3.title= '乘客性别';
y3.title= '幸存乘客/死亡乘客数量';
// Increase the font size of x and y axis
x3.fontSize = 15;
y3.fontSize = 15;
//Increase the size of the legend
legend3.fontSize = 15;
myChart3.draw(750);
d3.selectAll('rect')
.style('opacity', 1);
////Selected button styling
d3.select('#btn_sex')
.style('background', 'lightBlue')
.style('color', 'white');
d3.select('#chartnotes')
.text('可以看出，女性的成活率要高于男性。')
.append('p')
.text('由此我们可以看出，在灾难降临的时候乘客和船员们都倾向于让女性享受更大的生存机会');
});
var reset = d3.select('#btn_default').on('click', function() {
clear();
var myChart4 = new dimple.chart(svg, data);
var x4= myChart4.addCategoryAxis('x', ["Pclass"]);
x4.addOrderRule(['Upper Class', 'Middle Class', 'Lower Class']);
var y4= myChart4.addMeasureAxis('y', 'PassengerId');
var series4 = myChart4.addSeries('Survived_Status',dimple.plot.bar);
series4.aggregate = dimple.aggregateMethod.count;
var legend4 = myChart4.addLegend(100,20, 800, 30, 'left');
x4.title= '乘客座舱等级';
y4.title= '幸存乘客/死亡乘客数量';
// Increase the font size of x and y axis
x4.fontSize = 15;
y4.fontSize = 15;
//Increase the size of the legend
legend4.fontSize = 15;
myChart4.draw();
////Selected button styling
d3.select('#btn_default')
.style('background', 'lightBlue')
.style('color', 'white');
d3.select('#chartnotes')
.text('不同舱位的存活率存在差异')
.append('p')
.text('头等舱乘客存活人数大于死亡人数，二等舱死亡人数和存活人数基本持平，三等舱死亡人数远远大于存活人数')
.append('p')
.text('这是否意味着头等舱乘客有更大的生还机会呢？');
});
};
</script>
</head>
<body>
<script type='text/javascript'>
d3.csv('Processed_Titantic1.csv', draw);
</script>
<div><h1>泰坦尼克号幸存者数据可视化</h1></div>
<div>
<h2>泰坦尼克号事件简介</h2>
<p class="lead"><a href="https://www.youtube.com/watch?v=b0L_2jKEbA4">泰坦尼克号</a>是当时世界上体积最庞大、内部设施最豪华的客运轮船，有“永不沉没”的美誉 。然而讽刺的是，在她的处女航中，泰坦尼克号便遭厄运——她从英国南安普敦出发，途经法国瑟堡-奥克特维尔以及爱尔兰昆士敦，驶向美国纽约，船上时间1912年4月14日23时40分左右，泰坦尼克号与一座冰山相撞，造成右舷船艏至船中部破裂，五座水密舱进水。次日凌晨2时20分左右，泰坦尼克船体断裂成两截后沉入大西洋底3700米处。2224名船员及乘客中，逾1500人丧生，其中仅333具罹难者遗体被寻回。泰坦尼克号沉没事故为和平时期死伤人数最惨重的海难之一，其残骸直至1985年才被再度发现，目前受到联合国教育、科学及文化组织的保护。</p>
</div>
<div id='buttons' class='cat_button' style='text-align:left;'>
<button id='btn_sex' class='gender'> 按性别分类</button>
<button id='btn_embarked' class='embarked' >按登船地分类</button>
<button id='btn_default' class='default' >按舱位等级分类</button>
</div>
<div id="wrapper">
<div id='chartcontainer'></div>
<div id='chartnotes'></div>
</div>
</body>
</html>