-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
206 lines (196 loc) · 7.45 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
h2 {
text-align: left;
color: black;
}
h3 {
text-align: center;
color: black;
}
div.type_buttons {
position: fixed;
top: 145px;
left: 730px;
}
div.type_buttons div {
background-color: rgb(251, 201, 127);
padding: 3px;
margin: 7px;
}
div.type_buttons2 {
position: fixed;
top: 300px;
left: 730px;
}
div.type_buttons2 div {
background-color: rgb(255, 182, 193);
padding: 3px;
margin: 7px;
}
</style>
<script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
<script type="text/javascript">
function draw(data) {
/*
D3.js setup code
*/
"use strict";
var margin = 50,
width = 800 - margin,
height = 500 - margin;
// header
d3.select("body")
.append("h2")
.text("Survival Chart of the Titanic");
d3.select("body")
.append("h3")
.text("All Passengers");
//debugger;
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin)
.attr("height", height + margin)
.append('g')
.attr('class','chart');
var button_labels = ['All Passengers','Children','Men','Women'];
var button_labels2 = ['Absolute Value','Percentage'];
/*
Dimple.js Chart construction code
*/
// update chart when button 1 are clicked
function update_group(wg,ct) {
create_chart(wg,ct)
return wg
};
// update chart when button 2 are clicked
function update_chart_type(ct,wg) {
create_chart(wg,ct)
return ct
};
// update chart which category of data to show
function create_chart(group,plot_type){
var chart1 = svg.selectAll('*').remove();
// filter the data base on different categories
if (group==="All Passengers"){
d3.select("h3")
.text("All Passengers"); // update the titles
var data2 = data;
}
if (group==="Children"){
d3.select("h3")
.text("Children");
var data2 = dimple.filterData(data, "Type", 'Children');
}
if (group==="Men"){
d3.select("h3")
.text("Men");
var data2 = dimple.filterData(data, "Type", 'Men');
}
if (group==="Women"){
d3.select("h3")
.text("Women");
var data2 = dimple.filterData(data, "Type", 'Women');
}
chart1 = update_chart("Class",plot_type,data2);
chart1.assignColor('Perished', "#000066", "black", 0.7);
chart1.draw();
}
// update chart type absoulte value or pecentage
function update_chart(x_var,s_var,data2) {
var myChart1 = new dimple.chart(svg, data2);
var x = myChart1.addCategoryAxis("x", x_var);
x.addOrderRule(["1st class","2nd class","3rd class"])
myChart1.addLegend(200, 10, 380, 20, "right");
// add y axile as absolution value
if (s_var === 'Absolute Value') {
myChart1.addMeasureAxis("y", "Count");
var mySeries = myChart1.addSeries("Survived", dimple.plot.bar);
mySeries.addOrderRule(["Perished","Survived"])
}
// add y axile as percentage
if (s_var === 'Percentage') {
myChart1.addPctAxis("y", "Count");
var mySeries = myChart1.addSeries("Survived", dimple.plot.bar);
mySeries.addOrderRule(["Perished","Survived"])
}
return myChart1
}
var data2 =data;
var chart_type = 'Absolute Value';
var group = 'All Passengers';
var myChart = new dimple.chart(svg, data2);
d3.select("h3")
.text("All Passengers");
// create inicial chart
create_chart('All Passengers','Absolute Value')
//create buttons 1
var buttons = d3.select("body")
.append("div")
.attr("class", "type_buttons")
.selectAll("div")
.data(button_labels)
.enter()
.append("div")
.text(function(d) {
return d;
});
buttons.on("click", function(d) {
d3.select(".type_buttons")
.selectAll("div")
.transition()
.duration(500)
.style("color", "black")
.style("background", "rgb(251, 201, 127)");
d3.select(this)
.transition()
.duration(500)
.style("background", "lightBlue")
.style("color", "white");
//debugger;
group = update_group(d,chart_type);
});
//create buttons 2
var buttons2 = d3.select("body")
.append("div")
.attr("class", "type_buttons2")
.selectAll("div")
.data(button_labels2)
.enter()
.append("div")
.text(function(d) {
return d;
});
buttons2.on("click", function(d) {
d3.select(".type_buttons2")
.selectAll("div")
.transition()
.duration(500)
.style("color", "black")
.style("background", "rgb(255, 182, 193)");
d3.select(this)
.transition()
.duration(500)
.style("background", "lightBlue")
.style("color", "white");
// update chart when button are clicked
chart_type = update_chart_type(d,group);
//debugger;
});
}
</script>
</head>
<body>
<script type="text/javascript">
/*
Use D3 (not dimple.js) to load the TSV file
and pass the contents of it to the draw function
*/
d3.csv("train.csv", draw); // load data
</script>
</body>
</html>