Boston_Parking_Violations_Demo/index.html at main · code4policy/Boston_Parking_Violations_Demo · GitHub

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
<!DOCTYPE html>
<html>
<head>
        <title>2026 Parking Plan-Boston</title>
        <link rel="stylesheet" type="text/css" href="styles/stylehome.css"> <!-- renamed the css stylesheet to improve code organization -->

        <style>
          .blue-bordered-img {
            border: 12px solid #091f2f;
            border-radius: 8px;
            box-sizing: border-box;
          }
        </style>
</head>

<body>
    <header class="site-header">
        <div class="header-top">
            <img src="images/michelle_wu_sign.png" alt="bostonlogo" width="80" class="logo"> <!--  embedded image of city of boston website to make the head of the website align with brand-->

            <nav class="top-nav">
                <a href="index.html" class="nav-link">Home</a>
                 <a href="https://boston-parking-violations-demo-ckw9.onrender.com/" class="nav-link" target="_blank">Dashboard</a> <!-- embedded link to dashboard on render instead of streamlit -->
                <a href="methodology/methodology.html" class="nav-link">Methodology</a>
                <a href='about_us/about_us.html' class="nav-link">About Us</a>

            </nav>
        </div>
    </header>
    <div class="separator-bar"></div>

<!-- Body Section -->
    <main class="page-body">
        <h1 class="top-placeholder-heading">Parking Enforcement: Violation Hotspots</h1>
        <p class="placeholder-subheader"> Distinguishing between areas where parking regulations are willfully ignored and where they may be misunderstood
            <br>
            <br> <!-- added these breaks to generate some breathing space for the user -->

        </p>

        <section class="full-width-image-section">
            <img src="images/parking.jpg" alt="Vision Zero Image">
        </section>

        <section class="side-by-side-content-section header-top-section">
            <h2>WHERE DO ONE TIME OFFENDERS COMMIT PARKING VIOLATIONS?</h2>
        </section>

        <section class="side-by-side-content-section">
            <!-- Text on the left -->
            <div class="text">
                <p>
                    Using 2024 parking violation data, we identified where one-time offenders committed parking violations across Boston. To inform our analysis we calculated the top 5 most common parking violations issued to one-time offenders. The most common parking violation issued to one-time offenders was "Meter Fee Unpaid." <br><br>We were interested in understanding if one-time offenders were misunderstanding parking regulations. Because parking meters are not a common source of misunderstanding, we focused on the second most common violation; resident-permit only, and mapped out hotspots in Boston.

                </p>
            </div>
            <!-- Image on the right -->
            <div class="image-item">
                <img src="images/top_five_onetime.png" alt="bar chart showing top five parking violations for one time offenders">
            </div>

        </section>
               <section class="side-by-side-content-section header-top-section">
            <h2 class="smaller-header">Allston, MA - Gardner St</h2>
        </section>

        <section class="side-by-side-content-section">
            <!-- Text on the left -->
            <div class="text">
                <p>
                      Based on the heatmap of resident permit only violations, we decided to conduct further exploratory analysis in Allston, MA. A team member traveled to Allston to observe parking signage in the area. We found that <b>Gardner Street</b> was near a Boston University athletic facility and next to a parking garage. The image captured showed that unclear signage and dense car traffic may have contributed to the high number of violations issued to one-time offenders.
                </p>
            </div>
            <!-- Image on the right -->
            <div class="image-item">
                <img src="images/resident_permit_allston.jpeg" alt="map showing resident permit violations for one time offenders" class="blue-bordered-img">
            </div>
        </section>

        <section class="side-by-side-section">
            <div class="image-item allston-image">
                <img src="images/allston_residentpermit_zoom.png" alt="zoomed map of Allston resident permit violations"> <!-- when embedding images, i tried to make the alt readable in case a user needs to reference the image folder -->
            </div>
            <div class="image-item">
                <img src="images/gardner_st.jpeg" alt="Gardner St photo">
            </div>

        </section>

        <section class="side-by-side-content-section header-top-section">
            <h2 class="smaller-header"> <br><br><br>North End - Hanover and Atlantic St</h2>
        </section>

        <section class="side-by-side-content-section">
            <!-- Text on the left -->
            <div class="text">
                <p>
                    Applying the same methodology, we identified a resident-permit violation hotspot in the North End area of Boston. These violations were concentrated in two areas: <b>Hanover St</b> and <b>Atlantic St</b>. A team member visited the area and found that parking signage was confusing, with multiple signs stacked one upon another. In some cases the street signs were faded and difficult to read.
                </p>
            </div>
            <!-- Image on the right -->
            <div class="image-item">
                <img src="images/north_end_resident_hotspot.jpeg" alt="North End resident permit hotspot map" class="blue-bordered-img">
            </div>
        </section>

        <section class="side-by-side-section">
            <div class="image-item">
                <img src="images/multisignatlantic.jpeg" alt="Hanover St photo">
            </div>
            <div class="image-item">
                <img src="images/hanover_st_2.jpeg" alt="Atlantic St photo">
            </div>
            <div class="image-item">
                <img src="images/fededhanover.jpeg" alt="Gardner St photo">
            </div>
        </section> <!-- embedded the 3 images side by side to illustrate signage issues in the North End -->
<br>
<br>
        <div class="blue-background-section">
            <section class="side-by-side-content-section header-top-section">
                <h2>mapping out the top ten repeat offenders</h2>
            </section>

            <section class="side-by-side-content-section">
                <!-- Text on the left -->
                <div class="text">
                    <p>
                        To visualize violation patterns for drivers with high rates of parking violations we mapped the top ten repeat offenders. Each point color represents an individual driver. These drivers exhibited extremely localized behavior, committing the majority of their violations in specific neighborhoods. A large concentration of these violations occur in <b>Back Bay</b>. This pattern indicates that it is possible that persistent repeat offenders knowingly accept the risk of citation.
                    </p>
                </div>
                <!-- Image on the right -->
                <div class="image-item">
                    <img src="images/top_ten_overall_offenders.png" alt="map showing top ten repeat offenders">
                </div>
            </section>
        </div>

        <section class="side-by-side-content-section header-top-section">
            <h2><br>FINDINGS</h2>
        </section>

        <section class="side-by-side-content-section">
            <div class="text">
                <ul>
                    <li>Street-level heat maps are a helpful tool for identifying parking violation hotspots</li> <br>
                    <li>Analyzing data for one-time offenders by violation type can reveal areas where parking regulations are potentially misunderstood.</li> <br>
                    <li>A mix of desk research and site visits can help validate whether violation hotspots are due to poor signage, proximity to <br>high-traffic areas, or other factors.</li>
                </ul>
            </div>
        </section>
    </main>

    <!-- Back to Top Button -->
    <button id="backToTopBtn" class="back-to-top-btn" title="Go to top">
        <div class="button-content">
            <svg class="button-arrow" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
                <polyline points="18 15 12 9 6 15"></polyline>
            </svg>
            <span class="button-text">BACK TO TOP</span>
        </div>
    </button>

    <div class="disclaimer-container">
        <h3> This is not an official City of Boston website. This is an academic project created by Harvard Kennedy School students</h3>
    </div>
    <div class="separator-bar">
        <img src="images/bostonlogo.jpg" alt="bostonlogo" class="separator-logo">
    </div>

    <script>
        // Get the back to top button
        const backToTopBtn = document.getElementById('backToTopBtn');

        // Function to handle scroll events
        function handleScroll() {
            // Get the Allston header element
            const allstonHeader = document.querySelector('h2.smaller-header');

            if (allstonHeader) {
                // Get the position of the Allston header
                const headerRect = allstonHeader.getBoundingClientRect();

                // Show button if the header is above the viewport (no longer visible)
                if (headerRect.top < 0) {
                    backToTopBtn.classList.add('show');
                } else {
                    backToTopBtn.classList.remove('show');
                }
            }
        }

        // Add scroll event listener
        window.addEventListener('scroll', handleScroll);

        // Add click event listener to button
        backToTopBtn.addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    </script> <!-- generated back to top button script so that a user can easily navigate to the top of the page if disoriented. in line 180-182 I set the Allston-Gardner St subheader as the reference point for when to activate/de-activate this feature -->

    </body>
</html>