generated from NEU-DS-4200-F20-Staff/Project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
238 lines (196 loc) · 11 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
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
<!DOCTYPE html>
<html lang='en'>
<!-- Metadata -->
<head>
<meta charset='utf-8'>
<!-- Title -->
<title>Project Team 9: Environment, 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-9-environmental.git'>Fork me on GitHub</a></span>
<!-- Writeup -->
<div class='content-column'>
<h1>Project Team #9: Environment, DS4200 F20</h1>
<p><strong>Derek Brenner</strong>, <strong>Julia Nitschke</strong></p>
<!-- <strong>Samyak Jain</strong> -->
<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>This project is about the relationship between economic behavior, education, and outcomes,
and particularly their relation to environmental concern. The idea that people should become
more aware of environmental issues is not enough; we need pro-environmental action.
We are particularly interested in what kind of information impacts people's perceptions
of their actions, and the trigger points that make people act on their knowledge and awareness.
In this project, we compare survey respondents' recycling perceptions to actual recycling data
from public data sets. We also look at how people's recycling actions relate to their overall
environmental concern, as well as willingness to participate in other positive environmental
action. Our partner is a research team at Northeastern led by economics professor Dr. Venkatesan.
The data used in this project is from a survey conducted by Dr. Venkatesan and a group
of Northeastern students.</p>
<h1>Visualization</h1>
<p>You can interact with the public dataset graphs by highlighting either points on the line graph or rows in the table.
The corresponding data points in the other graph will be highlighted as well. <br>
<br>
You can interact with the Northeastern University survey result graphs by hovering over the pie chart sections or bars to get
details on the precise values in the dataset.
</p>
</div>
<!-- Visualization goes here -->
<h2> Public Dataset Results </h2>
<h5> Data on Plastics in Municpal Solid Waste (MSW) by Weight (in thousands of U.S. tons) </h5>
<h6> Data from <a href='https://www.epa.gov/facts-and-figures-about-materials-waste-and-recycling/plastics-material-specific-data'>Envrionmental Protection Agency</a></h6>
<p>In 2018, only around 8.5% of plastics produced were recycled. A majority of these plastics ended up in landfills.</p> <br>
<br>
<div class='vis-holder'>
<div class='linechart-holder' id='linechart'></div>
<div class='table-holder' id='table'></div>
<!-- Change viewbox to whatever you want, e.g., '0 0 1000 6000' This determines your aspect ratio and coordinate system -->
<!-- Delete all the sample SVG code below after the viewbox to before the closing tag. Populate this part of the SVG with D3. -->
</div>
<p>* Note that the time between years is not consistent and is based on the data that is publicly available.</p>
<h2> Northeastern University Survey Results </h2>
<div class='vis-holder2'>
<div class='piechart-holder' id='piechart'></div>
<div class='stacked-holder' id='stacked'></div>
</div>
<div class='vis-holder3'>
<div class='stacked2-holder' id='stacked2'></div>
<div class='stacked3-holder' id='stacked3'></div>
</div>
<!-- Further writeup -->
<div class = 'content-column'>
<h1>Demo Video</h1>
<video controls width='100%'>
<source src='EnvironmentalAction.mp4' type='video/mp4'>
<p>Your browser doesn't support HTML5 video. Here is
a <a href='https://www.youtube.com/watch?v=HOUt-Sxe7u0&feature=youtu.be'>link to the video</a> instead.</p>
</video>
<h1>Visualization explanation</h1>
<p> Public Data Visualizations: <br>
<br>
For our public data visualizations, we chose to include a line
graph and a table with correlating data for the viewer to visualize
how much waste has been recycled over time. For the first visualization, it is a line graph depicting the percentages of waste recycled
over time. The data we used here was parsed from the existing
public data set, using a simple division calculation for ease of understanding for the audience. We chose a line graph because they best
depict trends over time, which is the most important factor for this
visualization. The line graph also changes in size depending on the
size of the browser, so that it is always easily readable no matter the
dimensions. When viewing the line graph, there are several points
that are shown as small circles, which are the exact data points used
to construct the graph. These circles can then be selected by the user
to see the corresponding data in the adjacent table (more information
below). The encodings we used were the y-coordinate of a point as
a representation of the percentage, and the progression of the x-axis
as the change in time.<br>
<br> The second visualization pertaining to the public data set was a
table showing all of the values given from this data set, including
the year, how much waste was generated and recycled, and the percentage of recycled waste. The table provides clarity to the audience
on the exact number of tons that were generated and recycled, and
can provide context for the line graph right beside it. Users can
also analyze and link the data from the line graph to the table using
brushing and linking, where if the user clicks and drags, they can
create a box that will match data from the table to the line graph, or
vice versa. This method makes it easy for users to draw analyses
based on the information from the line graph and the table with the
public data, as well as understanding which data points are linked to
each other.<br>
<br>
<br>
Northeastern University Survey Results Visualizations:<br>
<br>
To visualize the Northeastern survey results, we used a series
of pie charts and stacked bar charts. The data is mostly qualitative
and proportions matter, so these graphs satisfy both of these data
elements. We kept the color encoding consistent across the visualizations,
with the light red/pink color denoting not routeinely recycling and the
light green meaning routinely recycling. We used light colors
so saturation isn’t too high and the text is easy to read. We kept the colors
consistent across graphs because they represent the same attribute.
We made these specific color decisions because of the general association
of red meaning stop/no and green meaning go/yes, but also
because green has an association with positive environmental action.<br>
<br>In each graph, the user hover over the pie chart sections or bar
chart sections to see more detail. The more precise values associated
with that section will show to provide more information. The user
can compare how answers to the questions change based on whether
or not the respondent routinely recycles, and also look at overall
sentiment toward the questions.<br>
<br>
Link to presentation: <a href='https://docs.google.com/presentation/d/1nb-UOFND3C7FYfOCnFffYX11PiQjngy98p3pqMwgzI0/edit?usp=sharing'>
Google Slides</a>
</p>
<h1>Acknowledgments</h1>
<p>
List here where any code, packages/libraries, text, images, designs, etc. that you leverage come from.
</p>
<ul>
<li><a href="http://www.d3noob.org/2013/02/add-html-table-to-your-d3js-graph.html">
Add an HTML table to your d3.js graph</a>
by an anonymous source to create a table in d3.
</li>
<li><a href="http://bl.ocks.org/jonahwilliams/cc2de2eedc3896a3a96d">
Example of an interactive HTML Table</a>
by Jonah Williams
</li>
<li><a href="https://stackoverflow.com/questions/15709304/d3-color-change-on-mouseover-using-classedactive-true">
Color Change on Mouseover</a>
by stackoverflow. Example of mousedown and mouseover events used to select elements in the table.
</li>
<li><a href="https://stackoverflow.com/questions/322378/javascript-check-if-mouse-button-down">
Check if Mouse Button Down?</a>
by stackoverflow. Answer to how to use a mousedown and mouseup event.
</li>
<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://www.d3-graph-gallery.com/graph/barplot_stacked_basicWide.html#'>
Most basic stacked barplot in d3.js</a>
tutorial is used for learning how to create a basic stacked bar chart.
</li>
<li><a href='https://observablehq.com/@ericd9799/learning-stacked-bar-chart-in-d3-js#'>
Learning Stacked Bar Chart in D3</a>
is used to connect Mike Bostock's model to the stacked bar chart.
</li>
<li><a href='http://bl.ocks.org/mstanaland/6100713#'>
Stacked bar chart with tooltips</a>
is used to learn how to implement hover-over functionality in the stacked bar chart.
</li>
<li><a href='https://www.tutorialsteacher.com/d3js/create-pie-chart-using-d3js#'>
Create Pie Chart using D3</a>
is used to learn how to implement a basic pie chart.
</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/visualization.js'></script>
<script src='js/table.js'></script>
<script src='js/piechart.js'></script>
<script src='js/stacked1.js'></script>
<script src='js/linechart.js'></script>
<script src='js/stacked2.js'></script>
<script src='js/stacked3.js'></script>
</body>
</html>