-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
194 lines (151 loc) · 15.9 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
<!DOCTYPE html>
<html lang="en">
<!-- Metadata -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<!-- Title -->
<title>Team Undergrad8: 2021 New England Police Expenditure, COSI 116A F23</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/COSI116A-Brandeis-InfoVis-Fall23/cosi-116a-final-project-code-undergrad8">Fork me on GitHub</a></span>
<!-- Your writeup goes here -->
<div class = "content-column">
<h1>Team Undergrad8: 2021 New England Police Expenditure, COSI 116A F23</h1>
<p><strong>Eliora Kruman</strong>, <strong>Harry Cheng</strong>, <strong>Grant Gu</strong>, <strong>Cole Simmons</strong></p>
<p>Project-long Course Project as part of COSI 116A: Information Visualization</a>, taught by <a href="https://cs.brandeis.edu/~dylan/">Prof. Dylan Cashman</a>, <a href="https://cs.brandeis.edu/">Brandeis University</a>.</p>
<h1>Motivation</h1>
<p><em>Summary of user needs and motivating questions.</em></p>
<p>Our motivation was to explore the relationship between state/local budgets and police expenditure. Do state and local budgets correspond with each other? Are there clear trends between police expenditure and economic brackets or population size? What does police expenditure look like across specific regions?</p>
<p> Our visualization was primarily developed for the user to discover this information themselves. With this visualization, we hope to be able to identify discrepancies and analyze trends among state revenue and police expenditure. We focused our data on New England states to provide users with a deeper understanding of a specific region. This data isn't meant for fun — it's meant to help identify how these fundings are allocated. We believe that users will not necessarily know the results or the specific breakdowns, so we hope to allow them the opportunity to discover this data, and perhaps to confirm or disprove pre-existing notions, by interacting with our visualization.</p>
<p>The primary consumer of our visualization will be U.S. citizens and taxpayers. We hope that this visualization will be accessed by people interested in politics in order to better understand where their money is going and to get a fuller picture of the budget. Hopefully, people will find this a more accessible way of engaging with their local government and understanding how their taxes are spent for the community.</p>
<p><em>Expectation: There is a clear focus, and a developed explanation of the problem, and a reasonable response is proposed.</em></p>
<h1>Visualization</h1>
<p><em>Include the interactive visualization as part of this page. Static example follows.</em></p>
</div>
<!-- Your visualization here -->
<div class="vis-holder">
<div class="vis-container">
<div class="map-holder" id="map">
<h3>2021 New England, Police Expenditure per capita</h3>
<svg class="vis-1" viewBox = "0 0 1200 500" id="vis-1">
<g id="states" ></g>
</svg>
</div>
<br>
<div class="treemap-holder" id="treemap">
<h3>Revenue per capita</h3>
<svg id="vis-2"></svg>
</div>
</div>
<br>
<div class="chart-holder" id="sp">
<svg class="chart-1" id="scatterplot-1"></svg>
<svg class="chart-2" id="scatterplot-2"></svg>
<svg class="chart-3" id="scatterplot-3"></svg>
<svg class="chart-4" id="scatterplot-4"></svg>
</div>
<br>
</div>
<!-- Your writeup goes here -->
<div class = "content-column">
<div class = "write-up">
<div class = "empty-space">
<!-- <h1>hi</h1>
<h1>hi</h1>
<h1>hi</h1> -->
</div>
<h1>Demo Video</h1>
<video controls width="100%">
<source src="https://drive.google.com/file/d/196p_n7w9o5p7xxm_RgsX73P6zdhvh0cX/view?usp=drive_link" type="video/mpr">
<p>Your browser doesn't support HTML5 video. Here is
a <a href="https://drive.google.com/file/d/196p_n7w9o5p7xxm_RgsX73P6zdhvh0cX/view?usp=drive_link">link to the video</a> instead.</p>
</video>
<p><em>Embedded MP4 demo video using the HTML5 <video> tag. For example, this screen recording Prof. Cody Dunne made of Mike Bostock's flexible transitions in D3 slide:</em></p>
<h1>Visualization explanation</h1>
<p>Our goal was to create three visualizations for our users. Since our data is focused on New England, our immediate thought was to create a map—maps are great for comparing the different states, and they’re also a fun, recognizable visualization for users to interact with. We wanted a monochromatic color scheme, since the data is sequential. Since we want to analyze trends and outliers, we then decided that we should create a scatterplot. It’s a simple-to-read visualization that emphasizes many of the comparisons we’re looking to make (position is a strongly identifiable channel). There’s no chart junk and it’s a direct representation of the data. But since we have multiple components to analyze, we determined that it would be best to create four linked scatterplots. This has the benefit of not overwhelming the user with a complicated number of encodings, and also creating an honest representation of the data with axes that minimize the lie factor. By adding brushing and linking, we can make it so that the states a user selects stand out on the neighboring charts. Lastly, we chose to create a treemap. We wanted to create context for our visualizations, and give the user a broader understanding of how much revenue these states are receiving. While the scatterplots show the local and state revenues, we thought it was important to show the total police expenditure per total revenue. We also thought this was an integral enough piece of information that it warranted its own new visualization. A treemap uses area to proportionately encode which states are spending the most on police given their individual revenue. We used the same monochromatic color scheme so that the comparisons would be consistent across the board.</p>
<p><em>Final visualization screenshots (PNG images), design justifications, UI walk-through, and linked presentation slides.</em></p>
<h1>Data Analysis</h1>
<p><em>Summary of data, data types, and data preprocessing.</em></p>
<p>This <a href="https://www.census.gov/data/datasets/2021/econ/local/public-use-datasets.html">data</a> is collected from an annual survey as a census for the 2021 fiscal year of state government finances. The Census Bureau derives the state financial statistics from administrative records provided to them by state governments, and merges this data with any additional financial forms the Bureau reaches out to collect.
The first column of data is categorical, and it describes the data found in each row (police expenditure, federal revenue, etc.). There are then 51 additional columns, 1 for each state plus the U.S. total. Each of these columns are further divided into 5 columns: state & local government, state government CV, state government, local government CV, local government. This means that each state column is divided into categorical data, with each data entry being the name of the subcolumn. Each of these subcolumns are also assigned a quantitative number ID. Then, each of these sub columns contains quantitative data.
Much of this data was superfluous for our research, so we created a smaller dataset focused on only police expenditure and revenue for states in the New England region. We combined this data with state population (categorical data sourced from Wikipedia), and personal income per capita (categorical data from <a href="https://www.bea.gov/data/income-saving/personal-income-by-state">an additional datasource</a>).
</p>
<p>
The first trend we spotted was that the state government spends a significantly larger amount of funding on welfare than on policing. However, the average local government spends about twice as much on policing than welfare. This could be interpreted in one of two ways: Either there is a discrepancy between the state and local governments’ goals, or, this is reasonable because the state already spends so much on welfare that it makes sense for the local government to spend more on policing. The other trends we saw were not surprising. States with higher populations spent more on policing, and states with higher revenue spent more on policing as well. We then examined the police budget in comparison to the personal income per capita of states, and found no specific trend.
</p>
<p><em>Expectation: Data sources match the problem statement and are appropriate. These descriptions should be very explicit so someone could read your page and properly reproduce your results.</em></p>
<h1>Task Analysis</h1>
<p><em>Summary of task table.</em></p>
<p>We had five initial tasks for our users, ranked in order of descending priority:
<ol>
<li>Compare police funding between regions - highlighting differences</li>
<li>Correlation between economic brackets and police budgeting</li>
<li>Correlation between population size and police budgeting</li>
<li>Do local budgets correspond to state budgets?</li>
<li>Change of police funding over time - is funding increasing/decreasing similarly across the nation, with points of interest such as the ‘80s and the recent Defund the Police Movement?</li>
</ol>
At a low-level abstraction, all five of these tasks are comparison queries. Comparing police funding between regions also falls under identifying points of interest.
At a mid-level abstraction, tasks 2 through 5 focus on exploration, while task 1 focuses on browsing.
At a high-level abstraction, all of these tasks focus on discovering and deriving information.
Our visualization accomplishes all of these tasks except for the fifth, which we considered to be the lowest priority, since we did not want to overwhelm the user with information.
We also found in our Data Analysis section that local budgets in proportion to state budgets was exactly what you’d anticipate, so that is lower in our priority as well.
</p>
<p>
Overall, our main goal is to create visualizations which are good at comparing categorical data, and to place an emphasis on the regional (state-based) aspect of this data. We want the visualizations to be easy for users to comprehend, and we want to give users the ability to discover the data themselves through interacting with the multiple components.
</p>
<p><em>Expectation: Clearly describes domain tasks, processes, goals and abstract tasks for domain problems.</em></p>
<h1>Design Process</h1>
<p><em>Sketches and design choices to justify final visualization.</em></p>
<p>The tasks we prioritized were to compare police funding between states, as well as identify its correlations with economic brackets and population size. We also sought to compare this on a state and local level, so as to show potential discrepancies and similarities between the two. To accomplish this, we created a map of New England states which compares police expenditure per capita through a monochrome color scale. We think this design will be quick for users to grasp and creates a strong visual representation for the user to compare which states provide more funding. Next, we have a set of linked scatter plots which show more detailed comparisons of economics, populations, and state/local revenues. Users might select a state of interest based on the map and look into it in more detail using the scatter plots, which is a strong tool for identifying trends and outliers. The user could also start with the scatter plots and move to the map. Lastly, the treemap provides additional context of which states spend the most on police given their total revenue. We’ve linked our map and scatterplots so that users can compare a subset of states with all the information provided. The most significant difference from our original plans is that we previously considered focusing on change over time. However, from the data we’ve explored so far, there hasn’t been a significant change in police funding. In addition, we don’t want to give the user too much to focus on.</p>
<p><em>Expectation: Evidence of iterative improvement.
Logical discussion of design choices grounded in theory from course.
Discusses feedback from usability testing.</em></p>
<h1>Conclusion</h1>
<p><em>Short summary of work completed and areas for improvement/future-work.</em></p>
<p>We have successfully implemented brushing and linking between all of our scatterplots and the map. We have also implemented brushing and linking from the scatterplots and map to the treemap. We have a consistent blue color encoding across visualizations (which also matches the topic of policing!). We have tooltips for the map and treemap so that the user can view more details on demand to discover the exact values represented by these visualizations. We have created a meaningful display of data to help users explore police budgeting in the New England region, with an emphasis on population, revenue, and average household income. This effectively responds to tasks one through four from our task table. We think this visualization is not overly complex and is well suited for the average taxpayer who wants to learn about their state’s budget.</p>
<p>In the future, some things we would like to do are:
<ul>
<li>Make the color legends update with brushing and linking, as opposed to a set scale</li>
<li>Enable additional brushing and linking from the treemap</li>
<li>Allow you to reload your webpage with a region you choose!</li>
<li>Allow users to select the year they'd like to examine, or perhaps move through time on a scale so that they can see the change over time</li>
</ul>
</p>
<p><em>Expectation: Meaningfully wraps up project and has good future directions.</em></p>
<h1>Acknowledgments</h1>
<p><em>List here where any code, packages/libraries, text, images, designs, etc. that you leverage come from.</em></p>
<ul>
<li><a href="https://d3js.org/">D3: Data-Driven Documents</a> by Mike Bostock.</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.</li>
<li>Class assignments: brushing and linking based on homework 4, map based on in-class map assignment</li>
<li><a href="https://www.visualcinnamon.com/2016/05/smooth-color-legend-d3-svg-gradient/">Color gradient tutorial</a> by Visual Cinnamon</li>
</ul>
</div>
</div>
<!-- Scripts at the end avoid need for dealing with async, defer, or onload event handlers -->
<script src="lib/d3.v4/d3.v4.js"></script>
<script src="js/visualization.js"></script>
<script src="js/treemap.js"></script>
<script src="js/map.js"></script>
<script src="js/char.js"></script>
</body>
</html>