-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
193 lines (154 loc) · 6.94 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Data Visulization | Nightingale Rose Chart</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<!--Custom CSS-->
<link rel="stylesheet" type="text/css" href="coxcomb.css" />
<!--D3.js Library-->
<script src="https://d3js.org/d3.v5.min.js"></script>
<!-- Lodash-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
<!--Custom JS-->
<script src="coxcomb.js"></script>
</head>
<body>
<div class="container" style="margin-top: 30px;">
<div class="container" id="diagramContainer">
<div class="row" id="legendImage">
<div class="col-12">
<h5>Causes of Mortality</h5>
</div>
<div class="col-4">
<span class="" aria-hidden="true" id="dot1"></span>
<span class="fontDot">Zymotic Disease</span>
</div>
<div class="col-4">
<span class="" aria-hidden="true" id="dot2"></span>
<span class="fontDot">Wounds & Injuries</span>
</div>
<div class="col-4">
<span class="" aria-hidden="true" id="dot3"></span>
<span class="fontDot">All Other Causes</span>
</div>
</div>
<div class="row" id="imageContainer">
<div class="col-12" id="heading"></div>
<div class="col-6" id="subHeading1"></div>
<div class="col-6" id="subHeading2"></div>
<div class="col-6" id="aprilToMarch1856"></div>
<div class="col-6" id="aprilToMarch1855"></div>
</div>
<div class="row">
<div class="col-12">
<h4 id="imageDescription">Nightingale's Rose Chart</h4>
</div>
<div class="col-12">
<h5 id="imageDescriptionLast">Hover over the chart to see specific data!</h5>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// define tooltip
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
// Heading
d3.select("#heading")
.append("h2")
.html(
'Diagram <span class="lower">of the</span> Causes <span class="lower">of</span> Mortality <span class="lower"></br>in the</span> Army <span class="lower">of the</span> East<hr>'
);
// Sub-Heading 1:
d3.select("#subHeading1")
.append("h4")
.html("April 1855 - March 1856<hr>");
// Sub-Heading 2:
d3.select("#subHeading2")
.append("h4")
.html("April 1854 - March 1855<hr>");
// Using csv as there is no support for xlsx in D3.js
d3.csv("nightingale-data.csv").then(function (data) {
data = formatDate(data);
data = sortDataASC(data);
var maximumValue = getMaximumValue(data);
var maximumRadius = getMaximumRadius(maximumValue);
// divide the dataset into two parts April 1854 - March 1855 & April 1855 - March 1856
var dataAprilToMarch1855 = data.slice(0, 12);
var dataAprilToMarch1856 = data.slice(12, 24);
// Create chart for dataset 'aprilToMarch1855'
createChart(maximumRadius, dataAprilToMarch1855, '#aprilToMarch1855', 'chart1855');
// Create chart for dataset 'aprilToMarch1856'
createChart(maximumRadius, dataAprilToMarch1856, '#aprilToMarch1856', 'chart1856');
// Add description
d3.select("#aprilToMarch1856")
.append("figcaption")
.attr("class", "caption")
.html(
"<p>The Areas of the blue, red, & black wedges are each measured from the</p><p class='shiftLittle'>centre as the common vertex.</p><p>The blue wedges measured from the centre of the circle represent area for</p><p class='shiftLittle'>area the deaths from Preventible or Mitigable Zymotic Diseases, the red</p><p class='shiftLittle'>wedges measured from the center the deaths from wounds, & the black</p><p class='shiftLittle'>wedges measured from the center the deaths from all other causes.</p><p>In September 1854, & May 1855, the black area coincides with the red, in</p><p class='shiftLittle'>January & February 1856, the blue coincides with the black.</p><p> The entire areas may be compared by following the blue, the red & the</p><p class='shiftLittle'>black lines enclosing them.</p>"
);
});
// function to format date
function formatDate(data) {
var dateTimeParse = d3.timeParse("%b %Y");
var yearLabels = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
data.forEach(function (d) {
d.date = dateTimeParse(d.month);
d.label = yearLabels[d.date.getMonth()];
});
return data;
}
// function to sort data based on date
function sortDataASC(data) {
data = data.sort(function (a, b) {
return d3.ascending(a.date, b.date);
});
return data;
}
// function to return maximum value from death type
function getMaximumValue(data) {
maximumValue = d3.max(data, function (d) {
return d3.max([parseFloat(d.diseases_mortality), parseFloat(d.wounds_mortality), parseFloat(d.others_mortality)]);
});
return maximumValue;
}
// function to calculate maximum radius from maximum value
function getMaximumRadius(maximumValue) {
return Math.sqrt((maximumValue * 12) / Math.PI);
}
// function to create chart
function createChart(radius, data, figureID, chartID) {
var coxcomb = Chart.coxcomb();
figure = d3.select(figureID).append("figure");
coxcomb.setParameter('domain', [0, radius]);
coxcomb.setParameter('angle', function (d) {
return d.date.getMonth();
});
coxcomb.setParameter('area', function (d, i) {
return [parseFloat(d.diseases_mortality), parseFloat(d.wounds_mortality), parseFloat(d.others_mortality)];
});
// Bind the data and generate a new chart
figure
.datum(data)
.attr("class", chartID)
.call(coxcomb);
}
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
crossorigin="anonymous"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
crossorigin="anonymous"></script>
</body>
</html>