-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
244 lines (234 loc) · 9.47 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
239
240
241
242
243
244
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Volunteering</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src='js/colorbrewer.js'></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
<h1>Volunteering in the United States</h1>
<p><em>Presentation slides:
<a href='files/GEOG3540.pdf' target='_blank'>pdf</a>
<a href='files/GEOG3540.pptx' download>pptx</a>
</em>
</p>
<p>In 2017, over $400 billion dollars was donated to charities and organizations
in the United States, with 70% coming from individual donors. Religious organizations
are the greatest benefactors with donations totaling $127 billion, followed by
educational ($59 billion) and human services ($50 billion). While donations have
reached record highs, the percentage of people donating has been declining
over the years, dropping from 66% in 2000 to 55% in 2014. This trend has resulted
in nonprofit organizations turning towards wealthier donors
<a target='_blank' href="https://www.usatoday.com/story/money/nation-now/2018/06/12/charity-charitable-giving-philanthropy-foudnations/693212002/">(Carrig 2018)</a>.
</p>
<p>
Besides donating, volunteers play a large part in supporting the services
of nonprofits. In 2017, around 77 million individuals (about 30% of the US adult
population) contributed nearly 7 billion hours towards volunteer work, accounting for an
estimated $167 billion worth of service. The demographic distribution of who volunteered
in 2017 is given in the table below <a target='_blank' href="https://www.nationalservice.gov/serve/via/">(Volunteering in America)</a>:
</p>
<table class='demotab'>
<thead>
<tr>
<th>Demographic</th>
<th>Volunteer Rate (%)</th>
</tr>
</thead>
<tbody>
<tr class='odd'>
<td>Men</td>
<td>26.5</td>
</tr>
<tr class='even'>
<td>Women</td>
<td>33.8</td>
</th>
<tr class='odd'>
<td>Generation Y</td>
<td>26.1</td>
</tr>
<tr class='even'>
<td>Millennials</td>
<td>28.2</td>
</tr>
<tr class='odd'>
<td>Generation X</td>
<td>36.4</td>
</tr>
<tr class='even'>
<td>Baby Boomers</td>
<td>30.7</td>
</tr>
<tr class='odd'>
<td>Silent Generation</td>
<td>24.8</td>
</tr>
</tbody>
</table>
<p>In this project, we'll look at the spatial and demographic aspects of Volunteering in the
United States at the state level, using data collected from the
<a href="https://data.nationalservice.gov/Volunteering-and-Civic-Engagement/Volunteering-in-America-State-Data/pvrw-bwct">Volunteering and Civic Life in America</a>
2017 survey. This survey was conducted by the U.S. Census Bureau and the Bureau of Labor
Statistics and published by the Corporation for National and Community Service. About 60,000
households (100,000 individuals) were surveyed, with respondents asked to indicate the
type of volunteer activities they participate in as well as the type of volunteer organizations.
</p>
<p>
A couple factors to keep in mind is the presence of sampling and response bias,
as well as rounding to the nearest percent.
</p>
</div>
<div class='container'>
<h2>Choropleth</h2>
<p>Perhaps the simplest way to represent the spatial distribution of the rates of
volunteer activities and organizations across the US is a choropleth map. For the
choropleth map below, select whether you want to look at the volunteer activities
or organizations, then select from the list of options available in the second dropdown
menu to generate a choropleth map.
</p>
<p>
If you hover over a state, the percentage of volunteers who indicated that they
participated will be displayed.
</p>
<div class='flex-container'>
<div style='flex-grow:1'>
<select id='selectGroupUV' class='selectGroup'>
<option class='acts'>Activity</option>
<option class='orgs'>Organization</option>
</select>
</div>
<div style='flex-basis:75%'>
<select id='selectTypeUV' class='selectType'>
</select>
</div>
</div>
<svg id='choroplethUV'></svg>
</div>
<div class='container'>
<h2>Radar Chart</h2>
<p>One limitation to using a (univariate) choropleth map is that one can only view a single
variable at any given moment, making it difficult to directly compare volunteer rates
across several different activities or organizations. One non-spatial visualization
method that can better aid such a comparison is a radar chart.
</p>
<p>For the radar chart below, you can select whether to plot the distribution of Volunteering
activities or organizations by selecting "Activity" or "Organization" from the dropdown menu respectively.
The two color palettes can be used for changing the colors used on the graph. The first one corresponds to the states
that are not selected, while the second color option sets the color for the selected state.
To highlight a particular state, just select it from the list of states to the left of the chart.
</p>
<div class='flex-container stretch'>
<div style='flex-basis: 50%'>
<select id='selectGroupRC' class='selectGroup'>
<option class='acts'>Activity</option>
<option class='orgs'>Organization</option>
</select>
</div>
<div style='flex-basis: 25%'>
<input type="color" id='background' name="c1" value="#0073FF">
</div>
<div style='flex-basis: 25%'>
<input type="color" id='highlight' name="c2" value="#FF8C00">
</div>
</div>
<div style='margin: 10px'></div>
<div class='flex-container'>
<div>
<select id='selectStateRC' size=15>
</select>
</div>
<div class='radarChart' style='flex-basis: 80%'>
<svg id='radarChart'></svg>
</div>
</div>
</div>
<div class='container'>
<h2>Bivariate Choropleth</h2>
<p>As seen in the introduction, the volunteer rate has a demographic dependence,
where the oldest and youngest tend to volunteer the least and women more than
men. One way to visualize the demographic dependence of volunteering is through
the use of a bivariate choropleth map.
</p>
<p>In the bivariate choropleth map below, the states are split by quantile
for both the demographic variable and the volunteer variable and assigned
a color based on its quantile rank for each variable. These colors are then
blended together, as illustrated in the legend below.
</p>
<p>For this plot, the demographic data was largely pulled from Wikipedia.</p>
</p>
<div class='flex-container'>
<div style='flex-basis: 10%'>
<select id='selectSchemeBV'>
</select>
</div>
<div style='flex-basis: 15%'>
<select id='selectDemographicBV'>
</select>
</div>
<div style='flex-basis: 15%'>
<select id='selectGroupBV' class='selectGroup'>
<option class='acts'>Activity</option>
<option class='orgs'>Organization</option>
</select>
</div>
<div style='flex-basis: 60%'>
<select id='selectTypeBV' class='selectType'>
</select>
</div>
</div>
<svg id='choroplethBV'></svg>
</div>
<div class='container'>
<h2>Scatter Plot</h2>
<p>For this last visualization, a simple scatter plot is made based on the data used
for making the bivariate choropleth map. A log/linear option was added for the couple
cases where an extreme value exists in the demographic data, such as the very large
population of California or the population density of Washington D.C. If you hover
over a data point, the state will be displayed.
</p>
<p>The volunteer rates have been rounded to the nearest percent in the downloaded file,
which is why the scatter plot will often have a grid pattern to it.
</p>
<div class='flex-container'>
<div style='flex-basis: 12%'>
<select id='selectScaleSP'>
<option class='linear'>Linear</option>
<option class='log'>Log</option>
</select>
</div>
<div style='flex-basis: 19%'>
<select id='selectDemographicSP'>
</select>
</div>
<div style='flex-basis: 19%'>
<select id='selectGroupSP' class='selectGroup'>
<option class='acts'>Activity</option>
<option class='orgs'>Organization</option>
</select>
</div>
<div style='flex-basis: 50%'>
<select id='selectTypeSP' class='selectType'>
</select>
</div>
</div>
<svg id='scatPlot'></svg>
</div>
<footer>
<p>Copyright © Brandon Bergerud 2019</p>
</footer>
</body>
</html>
<script src='js/base.js'></script>
<script src='js/schemes.js'></script>
<script src='js/labels.js'></script>
<script src='js/labels_init.js'></script>
<script src='js/d3/univariate.js'></script>
<script src='js/d3/radar.js'></script>
<script src='js/d3/bivariate.js'></script>
<script src='js/d3/scatterplot.js'></script>
<script src='js/load_data.js'></script>