generated from NEU-DS-4200-F20-Staff/Project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
128 lines (96 loc) · 8.01 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
<!DOCTYPE html>
<html lang='en'>
<!-- Metadata -->
<head>
<meta charset='utf-8'>
<!-- Title -->
<title>Project Team 07: Visualizing Chemical and Genetic Data of Boston Tap Water, DS 4200 F20</title>
<!-- CSS Styling -->
<link rel='stylesheet' href='style.css'>
<!-- Favicons -->
<link rel='apple-touch-icon' sizes='180x180' href='favicons/apple-touch-icon.png'>
<link rel='icon' type='image/png' sizes='32x32' href='favicons/favicon-32x32.png'>
<link rel='icon' type='image/png' sizes='16x16' href='favicons/favicon-16x16.png'>
<link rel='manifest' href='favicons/site.webmanifest'>
<link rel='shortcut icon' href='favicons/favicon.ico'>
<meta name='msapplication-TileColor' content='#da532c'>
<meta name='msapplication-config' content='favicons/browserconfig.xml'>
<meta name='theme-color' content='#ffffff'>
</head>
<!-- Main page content -->
<body>
<!-- Update this with your GitHub repo URL -->
<span id='forkongithub'><a href='https://github.com/NEU-DS-4200-F20/project-group-07-boston-tap-water'>Fork me on GitHub</a></span>
<!-- Writeup -->
<div class='content-column'>
<h1>Project Team 07: Visualizing Chemical and Genetic Data of Boston Tap Water, DS 4200 F20</h1>
<p><strong>Emily Chen</strong>, <strong>Meera Ravichandran</strong>, <strong>Fangyi Zhao</strong></p>
<p>Service-Learning Course Project as part of
<a href='https://canvas.instructure.com/courses/1781732'>DS 4200 F20: Information Visualization</a>,
taught by <a href='https://cody.khoury.northeastern.edu/'>Prof. Cody Dunne</a>,
<a href='https://visualization.khoury.northeastern.edu/'>Data Visualization @ Khoury</a>,
<a href='https://www.khoury.northeastern.edu/'>Northeastern University</a>.</p>
<h1>Abstract</h1>
<p>The Massachusetts Water Resources Authority supplies water to over 2.5 million people in the Boston area. The Pinto lab investigates the characteristics of the microbiome in this tap water in order to ensure safe drinking water is being distributed, focusing on the complete ammonia oxidizer bacterial communities in tap water. This project seeks to visualize characteristics of tap water, creating a visual “story” which combines data from all characteristics, both chemical and genomic, taken of tap water over a time series. We produced a webpage encoding three visualizations – a stacked bar chart, table and heatmap – with the goal of discovering patterns to help scientist and researchers model the behavior of bacterial communities in order to improve water filtration and distribution systems.</p>
<h1>Visualization</h1>
<ul>
<li>Hover over bars on the barchart to view the precise cell counts.</li>
<li>Hover over cells on the heatmap to view the exact bacteria phyla percentages.</li>
<li>Select a bar or bars and brush over a row or multiple rows to see the corresponding data represented in the other two charts.</li>
</ul>
<p> * NOTE: The Membrane Non-Intact Cells represents the amount of cells with non-intact membranes, while the Membrane Intact Cells represents the amount of cells with intact membranes. These values add up to equal the total cell count in the water.</p>
</div>
<!-- Visualization goes here -->
<div class='vis-holder'>
<div class='barchart-holder' id='barchart'> </div>
<div class='heatmap-holder' id='heatmap'> </div>
</div>
<div class='table-holder text-unselectable' id= 'table'></div>
<div class='content-column'>
</div>
<!-- Further writeup -->
<div class = 'content-column'>
<h1>Demo Video</h1>
<video controls width='100%'>
<!-- <source src='video.mp4.mp4' type='video/mp4'> -->
<source src='DS4200_final_video.mp4' type='video/mp4'>
<p>Your browser doesn't support HTML5 video :( </p>
<!--<p>Your browser doesn't support HTML5 video. Here is
a <a href='http://www.ccs.neu.edu/home/cody/courses/shared/d3-flexible-transitions.mp4'>link to the video</a> instead.</p> -->
</video>
<h1>Visualization Explanation</h1>
<p><a href='https://docs.google.com/presentation/d/1eaeB_yK6aa-en1W-NkbdkcuR9NtAcL1NckwAI2Lhipg/edit?usp=sharing'>Presentation Slides</a></p>
<p>We created three visualizations: a bar chart, heatmap, and table. Our main view is the stacked bar chart, and it illustrates the total cell concentration over time. The membrane intact cell count is encoded in a darker purple, while the membrane non-intact cell count is encoded in a lighter purple. We used colors of the same hue but of different saturations because they are parts of the same total cell count. Users can hover over each bar to see the exact cell counts. The stacks allow comparison between the membrane intact cells and membrane non-intact cells within each run or date.</p>
<p>For our details on demand feature, users can click on any of the bars, brush over a series of bars on the bar chart, or brush over rows on the table to view a corresponding heatmap. The heatmap uses a green-white sequential colormap to encode the percentages of the ten most prevalent bacterial phyla overall: Betaproteobacteria, Nitrospira, Gammaproteobacteria, Planctomycetia, Actinobacteria, Oligoflexia, Gemmatimonadetes, Chlamydiia, Flavobacteriia, and Deltaproteobacteria. We also included a legend to the left of the heatmap to illustrate the range of percentages. Additionally, upon hovering over each box in the heatmap, users are able to view the exact percentages for each of the phyla.</p>
<p>For the table, we showed an overview of the chemical data: Date, Season, Temperature, pH, Chlorine, Ammonium, Nitrate, and Nitrite. Our brushing and linking functionality will allow users to brush over rows in the table, highlighting them as well as outlining the corresponding bars in the main bar chart.</p>
<p>Finally, our brushing and linking feature connects the bar chart to the table. When a user brushes over rows in the table, the selected rows are highlighted, the corresponding bars are outlined in red. When a user brushes over bars in the bar chart or clicks on certain bars, the selected bars are outlined in red and the corresponding rows are highlighted. In both cases, the corresponding heatmap for the selected dates is displayed. When no data is selected in the other two charts, the full heatmap with all dates and phyla is shown.</p>
<h1>Acknowledgments</h1>
<ul>
<li><a href='https://d3js.org/'>
D3: Data-Driven Documents</a>
by Mike Bostock is used for manipulating the DOM to create visualizations.
</li>
<li><a href='https://codepo8.github.io/css-fork-on-github-ribbon/#'>
Pure CSS responsive 'Fork me on GitHub' ribbon</a>
by Chris Heilmann is used to create the banner that links back to the source code repository.
</li>
<li><a href='https://stackoverflow.com/questions/52821117/how-to-append-multiple-rectangles-in-d3'>How To Append Multiple Rectangles in D3?</a>by 'i alarmed alien' on Stack Overflow
was used to construct the stacked rectangles on the barchart.</li>
<li><a href='http://bl.ocks.org/mstanaland/6100713'>Stacked Bar Chart with Tooltips</a> by Michael Stanaland
was used to generate the legend for the stacked barchart.</li>
<li><a href = "https://bl.ocks.org/melt6457/712da3556e18fa517e2cd9d432933bce">A5 - Heatmap in D3</a> by Kory Melton
was used to create the details-on-demand heatmap visualization.</li>
<li><a href = "https://d3-legend.susielu.com">d3 SVG Legend</a> by Susie Lu
was used to build the vertical legend for the heatmap.</li>
<li><a href = "https://bl.ocks.org/d3noob/180287b6623496dbb5ac4b048813af52">Simple Tooltips in V6</a> by d3noob on bl.ocks.org
was used to implement the tooltip feature on the barchart and heatmap.</li>
</ul>
</div>
<!-- Scripts at the end avoid need for dealing with async, defer, or onload event handlers -->
<script src='lib/d3.v6.1.1/d3.min.js'></script>
<script src='js/barchart.js'></script>
<script src='js/heatmap.js'></script>
<script src='js/table.js'></script>
<script src='js/visualization.js'></script>
</body>
</html>