-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (100 loc) · 4.12 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SDV CW - Songyi Yang</title>
<script src="https://d3js.org/d3.v6.js"></script>
<script src="scripts/util.js"></script>
<script src="scripts/data.js"></script>
<script src="scripts/vis-bars.js" type="module"></script>
<script src="scripts/vis-circles.js" type="module"></script>
<style>
.main {
display: flex;
flex-flow: column;
align-items: center;
}
p {
font-family: -apple-system, sans-serif;
width: 60ch;
}
button {
display: inline-block;
font-family: -apple-system, sans-serif;
font-size: 1rem;
}
svg {
display: block;
}
text {
font-family: -apple-system, sans-serif;
font-size: 12px;
}
rect, circle {
stroke-linejoin: round;
}
rect.bar-block:hover, circle:hover {
stroke-width: 4;
}
</style>
</head>
<body>
<div class="main">
<p><em><strong>Welcome</strong></em> to my visualisation on COVID-19 Mutations Data Analysis.</p>
<p>
This visualisation is about the spread of different SARS-CoV-2 variants in the United Kingdom, between Jan 2020
and Feb 2021.
</p>
<p>
You can view the data
<button id="by-month">by Month</button>
, or
<button id="by-week">by Week</button>
</p>
<p>
The two charts are linked by the same data. <strong>Hover your mouse</strong> over the bars or
circles, and the other chart will also respond. <strong>The legend</strong> works in a similar way as well.
</p>
<p>
This paragraph shows the last selected bar/circle:
<br>
Date: <strong id="date">______</strong>
Clade: <strong id="clade">______</strong>
Count: <strong id="count">______</strong>
</p>
<p>Data source: <a href="https://nextstrain.org/groups/neherlab/ncov/united-kingdom">Nextstrain</a></p>
<svg id="bar-chart"></svg>
<svg id="circle-chart"></svg>
<p><strong>How the data is processed:</strong> (This part is also included in the PDF.)</p>
<p>
All data processing is done in JavaScript. The original data from Nextstrain is a <code>.tsv</code>
(tab-separated values) file. Each row of the file is a separate genome sample record containing many attributes.
Only two of the attributes are of concern here: the date when the sample is collected, and the clade that the
identified virus belong to. The file is read using <code>d3.tsv()</code>, resulting in a JavaScript <code>Promise</code>
object. The actual data is a list (JS <code>Array</code>) of objects containing two attributes:
<code>date</code> and
<code>clade</code>, and can be accessed in the <code>.then()</code> function of the <code>Promise</code>. The
<code>date</code> attribute is also transformed into a string representing either a month (yyyy-mm) or a week
(yyyy-Www).
</p>
<p>
The data is then grouped first by month/week, and second by clade, using <code>d3.group()</code>. And we count
the number of samples in each group. This step also sorts the date in ascending order, and the clades in
the order of appearance.
</p>
<p>
To draw the stacked bars, monthly/weekly data is then aggregated within each date group to compute a
"baseline" for each bar. This step is similar to
<a href="https://github.com/d3/d3/blob/master/API.md#stacks"><code>d3.stack</code></a> but is written in vanilla
JavaScript. The baselines will serve as the Y positions of the stacked bars. Padding is added to the bars for
clarity.
</p>
<p>
To draw the bubble chart, the X and Y positions of the date and the clade of each group respectively. The radius
of the circle is computed using <code>Math.sqrt()</code>. The radius is also adjusted with a minimum value of 2
to
avoid circles that appear too small.
</p>
</div>
</body>
</html>