forked from llSourcell/D3_Data_visualization_live
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index1.html
executable file
·181 lines (154 loc) · 5.45 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/d3.v3.min.js"></script>
<script src="/dimple.v2.1.2.min.js"></script>
<style>
body {
margin: 50px;
}
</style>
</head>
<body>
<div id='chartContainer2'>
<h2>Survivors by Passenger Class (Bar)</h2>
<script type="text/javascript">
var svg2 = dimple.newSvg('#chartContainer2', 600,400);
d3.csv('titanic1.csv', function(data) {
var ChartInstance = new dimple.chart(svg2,data);
ChartInstance.setBounds(60,30,510,305);
var x = ChartInstance.addCategoryAxis('x', 'Passenger Class');
// x.addOrderRule('Type');
var y = ChartInstance.addPctAxis('y', 'Count');
//y.showbycent = true;
//var y = ChartInstance.addMeasureAxis('y', 'Count');
var s = ChartInstance.addSeries("Status", dimple.plot.bar);
ChartInstance.addLegend(60, 10, 510, 20, "right");
ChartInstance.draw(1000);
});
</script>
</div>
<div id='PiechartContainer12'>
<h2>Passenger Share By Class 1, Class 2, Class 3 </h2>
<h4><i>*The share of class 3 passengers was highest </i><h4>
<script type="text/javascript">
var svg12 = dimple.newSvg("#PiechartContainer12", 590, 400);
d3.csv("titanic_train.csv", function (data) {
var ChartInstance = new dimple.chart(svg12, data);
ChartInstance.setBounds(20, 20, 460, 360)
ChartInstance.addMeasureAxis("p", "Passenger Class");
ChartInstance.addSeries("Passenger Class", dimple.plot.pie);
ChartInstance.addLegend(500, 20, 90, 300, "left");
ChartInstance.draw();
});
</script>
</div>
<div id='PiechartContainer1'>
<h2>Survivors by Gender (Pie chart)</h2>
<h4><i>*Females were given priority during the rescue</i><h4>
<script type="text/javascript">
var svg1 = dimple.newSvg("#PiechartContainer1", 590, 400);
d3.csv("titanic_train.csv", function (data) {
var ChartInstance = new dimple.chart(svg1, data);
ChartInstance.setBounds(20, 20, 460, 360)
ChartInstance.addMeasureAxis("p", "Survived");
ChartInstance.addSeries("Sex", dimple.plot.pie);
ChartInstance.addLegend(500, 20, 90, 300, "left");
ChartInstance.draw();
});
</script>
</div>
<div id='chartContainer4'>
<h2>Survivors by Age </h2>
<h4><i>*Senior passengers were given priority to Life-Boats as seen in the movie</i><h4>
<script type="text/javascript">
var svg4 = dimple.newSvg('#chartContainer4', 600,400);
d3.csv('titanic1.csv', function(data) {
var ChartInstance = new dimple.chart(svg4,data);
ChartInstance.setBounds(60,30,510,305);
var x = ChartInstance.addCategoryAxis('x', 'Age');
// x.addOrderRule('Type');
var y = ChartInstance.addPctAxis('y', 'Count');
//y.showbycent = true;
//var y = ChartInstance.addMeasureAxis('y', 'Count');
var s = ChartInstance.addSeries("Status", dimple.plot.bar);
ChartInstance.addLegend(60, 10, 510, 20, "right");
ChartInstance.draw(1000);
});
</script>
</div>
<div id='chartContainer8'>
<h2>Survivors by Embarked </h2>
<h4><i>*Most 1st Class passengers aboarded the ship at Southampton UK</i><h4>
<script type="text/javascript">
var svg8 = dimple.newSvg('#chartContainer8', 600,400);
d3.csv('titanic1.csv', function(data) {
var ChartInstance = new dimple.chart(svg8,data);
ChartInstance.setBounds(60,30,510,305);
var x = ChartInstance.addCategoryAxis('x', 'Embarked');
// x.addOrderRule('Type');
var y = ChartInstance.addPctAxis('y', 'Count');
//y.showbycent = true;
//var y = ChartInstance.addMeasureAxis('y', 'Count');
var s = ChartInstance.addSeries("Status", dimple.plot.bar);
ChartInstance.addLegend(60, 10, 510, 20, "right");
ChartInstance.draw(1000);
});
</script>
</div>
<div id='PiechartContainer2'>
<h2>Survivors by Embarked (Pie chart)</h2>
<h4><i>*Most 3rd Class passengers aboard the ship at Cherbourg , who were mostly from southern france & North Africa </i><h4>
<script type="text/javascript">
var svg9 = dimple.newSvg("#PiechartContainer2", 590, 400);
d3.csv("titanic_train.csv", function (olddata) {
data =modify_data(olddata);
var ChartInstance = new dimple.chart(svg9, data);
ChartInstance.setBounds(20, 20, 460, 360)
ChartInstance.addMeasureAxis("p", "Survived");
ChartInstance.addSeries("Embarked", dimple.plot.pie);
ChartInstance.addLegend(500, 20, 90, 300, "left");
ChartInstance.draw();
});
</script>
<script type="text/javascript">
var ctr = 0;
function modify_data(data){
data.forEach(myFunction);
return data;
};
function myFunction(item) {
if((item["Embarked"])=='S'){
(item["Embarked"])='Southampton';
}
else if((item["Embarked"])=='C'){
(item["Embarked"])='Cherbourg';
}
else if((item["Embarked"])=='Q'){
(item["Embarked"])='Queenstown';
}
else {
(item["Embarked"])='NA';
};
}
</script>
</div>
<div id="chartContainer10">
<h2>Passenger survival rate By </h2>
<h4><i>*shows that first class passengers were given priority to Life-Boats</i><h4>
<script type="text/javascript">
var svg10 = dimple.newSvg("#chartContainer10", 590, 400);
d3.csv("titanic_train.csv", function (data) {
var myChart = new dimple.chart(svg10, data);
myChart.setBounds(60, 45, 510, 315)
myChart.addCategoryAxis("x", "Passenger Class");
myChart.addMeasureAxis("y", "Fare");
myChart.addSeries("Survived", dimple.plot.bar);
myChart.addLegend(200, 10, 380, 20, "right");
myChart.draw();
});
</script>
</div>
</body>
</html>