-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathIndex_final.html
159 lines (128 loc) · 3.5 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
<!DOCTYPE html>
<html>
<head>
<title>Visualization of Titanic dataset - Abhishek Chhibber</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.3.0.min.js"></script>
<style>
body {
font: 12px sans-serif;
}
svg text{
fill:grey;
font-size:12px;
}
svg .values text{
pointer-events:none;
stroke-width: 0.5px;
}
.groups:hover{
cursor:pointer;
font-weight:bold;
}
</style>
</head>
<!--This is the final HTML file that I have prepared from the the Titanic dataset.
I have considered the four ordered features (Sex, Passenger Class, Port of Embarkation and survival),
and tried to depict relationship between them using only one chart.
-->
<!--I have done the JavaScript coding in this HTML only, and have used external hosted sources
for calling d3js and dimplsjs files and datasets - so that this HML file can be viewed independently,
without copying/dowloading any other file.
-->
<body>
<h1 align="middle">Visualization of Titanic Dataset</h1>
<p>
<h3>About Titanic</h3>
<i>RMS Titanic, during her maiden voyage on April 15, 1912, sank after colliding with an iceberg, killing 1502 out of 2224 passengers and crew. The tragedy is considered one of the most infamous shipwrecks in history and led to better safety guidelines for ships.
</i>
</p>
<br>
<p>
In this visualization, I have considered a dataset with details of only 891 passengers.
</p><p>
This visualization analyzes the Titanic dataset, and depicts the relation between four categorical features:
<ul>
<li>Passenger Survival</li>
<li>Seat/Berth class of passengers</li>
<li>Sex of Passengers</li>
</ul>
</p>
<p>
<h3>Key finding from the dataset:</h3>
<ul>
<li>More males and females survived from Class-I, than Class-II and Class-III</li>
</ul>
</p>
<p>
Please hover over specific charts to see the data
</p>
<hr>
<div id="chartContainer">
<!--Creating the chart -->
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 790, 600);
d3.tsv("titanic_dataset.tsv", function (data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(95, 25, 675, 535);
myChart.addCategoryAxis("x", "passenger_class");
myChart.addCategoryAxis("y", "Sex");
myChart.addMeasureAxis("p", "PassengerId");
var pies = myChart.addSeries("survival_status", dimple.plot.pie);
pies.radius = 65;
myChart.getTooltipText = function (e) {
return [
e.aggField[0]
]};
myChart.addLegend(240, 10, 330, 20, "right");
myChart.ease = "bounce";
myChart.staggerDraw = true;
myChart.draw(1000)
});
<!--SVG to add title for legend -->
svg.selectAll("title_text")
.data(["Survival Status"])
.enter()
.append("text")
.attr("x", 440)
.attr("y", 40)
.style("font-family", "sans-serif")
.style("font-size", "10px")
.style("color", "Black")
.text(function (d) { return d; });
function drawAnimatedRingChart(config) {
var pie = d3.layout.myChart().value(function (d) {
return d.count;
});
}
</script>
</div>
<!--Adding table for Key -->
<table cellpadding="2">
<tbody>
<tr>
<td><strong>Key:</strong></td>
<td> </td>
</tr>
<tr>
<td>Survived:</td>
<td>1 = Yes, 0= No </td>
</tr>
<tr>
<td>Pclass (Passenger Class):</td>
<td> 1, 2, 3</td>
</tr>
<tr>
<td>Sex:</td>
<td> Male, Female</td>
</tr>
</tbody>
</table>
<br>
<hr>
<p>
- Abhishek Chhibber
</P>
</body>
</html>