-
Notifications
You must be signed in to change notification settings - Fork 0
/
index1.html
207 lines (169 loc) · 6.2 KB
/
index1.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="Jude moon">
<title>Titanic Data Visualization</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<link href="https://www.jasondavies.com/parallel-sets/d3.parsets.css" rel="stylesheet" />
<script src="https://www.jasondavies.com/parallel-sets/d3.parsets.js"></script>
<!--<script src="/lib/d3.v4.3.0.js"></script>-->
<!--<script src="http://dimplejs.org/dist/dimple.v2.3.0.min.js"></script>-->
<!--<script src="http://d3js.org/d3.v4.min.js"></script>-->
<style>
h1 {
background-color: black;
color: floralwhite;
font-family: Helvetica, sans-serif;
width: 100%;
height: 80px;
text-align: center;
padding-top: 30px;
}
h2 {
font-size: 1.4em;
text-transform: uppercase;
font-family: Helvetica;
color: #000;
margin-top: 0;
}
h3 {
font-family: Helvetica, sans-serif;
text-align: center;
}
div.text {
font-family: Helvetica;
padding: 5px;
margin: 20px;
border-radius: 10px;
}
.dimension {
font-family: Helvetica;
}
</style>
<script type="text/javascript">
function draw_bar(data) {
"use strict"; // enforce a restricted subset of JavaScript within this function
var margin = 75,
width = 1000 - margin,
height = 600 - margin;
var svg = d3.select("#plotContainer1")
.append("svg")
.attr("width", width + margin)
.attr("height", height + margin)
.append('g') // group
.attr('class','chart');
//debugger; //javascript debugger
/*
Dimple.js Chart construction code
*/
var chart = new dimple.chart(svg, data);
chart.defaultColors = [
new dimple.color("#d6242d"),
new dimple.color("#1179db"),
];
var x = chart.addCategoryAxis("x", ["Class","Sex"]);
x.fontSize = "20px";
x.title = "Socio-Economic Class";
var y = chart.addMeasureAxis("y", "Percent");
y.fontSize = "20px";
y.title = "Survival Percentage (%)";
chart.addSeries("Sex", dimple.plot.bar);
var legend = chart.addLegend(500, 80, 380, 20, "right");
legend.fontSize = "20px";
chart.draw();
};
function draw_pie(data) {
"use strict";
var margin = 75,
width = 1000 - margin,
height = 600 - margin;
var svg = d3.select("#plotContainer3")
.append("svg")
.attr("width", width + margin)
.attr("height", height + margin)
.append('g') // group
.attr('class','chart');
//debugger;
/*
Dimple.js Chart construction code
*/
var chart = new dimple.chart(svg, data);
chart.defaultColors = [
new dimple.color("#6f757a"),
new dimple.color("#1179db"),
];
var x = chart.addCategoryAxis("x", "Class");
x.fontSize = "20px";
x.title = "Socio-Economic Class";
var y = chart.addCategoryAxis("y", "Sex");
y.fontSize = "20px";
var z = chart.addMeasureAxis("z", "Count");
var pies = chart.addSeries("Survived", dimple.plot.bubble);
var legend = chart.addLegend(500, 80, 380, 20, "right");
legend.fontSize = "20px";
chart.draw();
};
</script>
</head>
<body>
<h1 class="main-title">Titanic Survivors</h1>
<h3 class="main-author">by Jude Moon</h3>
<h3 class="main-date">June 2017</h3>
<div class="summary">
<h2 class="text-title">Summary</h2>
<div class="text">
<p>The objective of this project is to create effective visualizations of Titanic dataset, which contains samples (891 out of total 2,224 people including passengers and crew on board) of demographics and passenger information such as passenger class, sex, age, survived (0: dead and 1: survived), etc.</p>
<p>The key story I would like to convey is that females and higher socio-economic status (1st and 2nd classes) more likely survived from the Titanic disaster than males and lower socio-economic status (3rd class). The groups of 1st and 2nd class females had a survival rate greater than 92%. This was far greater than the average survival rate of the sample, which was 38%.</p>
<p>Considering that females were 35% and females with 1st and 2nd classes were only 24% of total sample size, the evidence that such minor group showed greater survival infers that the people put on lifeboats was not randomly taken but selectively. This supports that features of being female and higher classes were top priorities to be put on lifeboats.</p>
</br>
</br>
</br>
</div>
<h2 class="text-subtitle">Which chart do you think is the best choice for this story?</h2>
</div>
<div class="plot">
<h2 class="plot-title">Choice1: Bar Chart</h2>
<div id="plotContainer1"> </div>
<script type="text/javascript">
d3.csv("titanic_bar.csv", draw_bar);
</script>
</br>
</br>
</br>
</br>
</br>
</br>
</div>
<div class="plot">
<h2 class="plot-title">Choice2: Parallel Sets Plot</h2>
<div id="plotContainer2"> </div>
<script type="text/javascript">
var chart = d3.parsets()
.dimensions(["Survived", "Sex", "Class"]);
var vis = d3.select("#plotContainer2").append("svg")
.attr("width", chart.width())
.attr("height", chart.height());
d3.csv("titanic_parsets.csv", function(error, csv) {
vis.datum(csv).call(chart);
});
</script>
</div>
</br>
</br>
</br>
</br>
</br>
</br>
</div>
<div class="plot">
<h2 class="plot-title">Choice3: Pie Matrix</h2>
<div id="plotContainer3"> </div>
<script type="text/javascript">
d3.csv("titanic_pie.csv", draw_pie);
</script>
</div>
</body>
</html>