-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathaudit.html
More file actions
349 lines (331 loc) · 24.7 KB
/
audit.html
File metadata and controls
349 lines (331 loc) · 24.7 KB
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
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lowell Zoning Ordinance Audit</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Chosen Palette: "Warm Neutral" - A base of beige and warm grays, with slate blue as a primary accent and a subtle terracotta for highlights. This creates a professional, calm, and accessible feel suitable for a municipal document analysis. -->
<!-- Application Structure Plan: The SPA is designed as a top-down narrative dashboard. It starts with a high-level vision, moves to a scannable "Major Findings" dashboard with interactive cards for quick insights, then offers a deeper, interactive data visualization with a chart to explore district complexity. This is followed by a tabbed "Detailed Analysis" section for users who want to dig deeper into specific topics. The flow concludes with a clear, visual "Recommendations" flowchart. This structure was chosen to cater to different user needs—from a city official needing a quick summary to a planner seeking detailed critiques—by layering information from general to specific, promoting user-friendly exploration over the rigid, linear structure of the source ordinance. -->
<!-- Visualization & Content Choices:
- Report Info: Overall complexity and key problem areas. -> Goal: Inform/Summarize. -> Viz/Presentation: Interactive cards with icons. -> Interaction: Hover effect to signal interactivity. -> Justification: Provides a quick, digestible overview of the main audit themes. -> Library/Method: HTML/CSS (Tailwind).
- Report Info: Disparate and numerous zoning districts. -> Goal: Compare/Analyze. -> Viz/Presentation: Interactive Bar Chart. -> Interaction: Dropdown filter to change the data view (e.g., total uses vs. residential uses). -> Justification: Visually demonstrates the complexity and inconsistency across districts in a way text cannot. -> Library/Method: Chart.js (Canvas).
- Report Info: Detailed critiques across multiple themes. -> Goal: Organize/Inform. -> Viz/Presentation: Tabbed content area. -> Interaction: Clicking tabs reveals detailed text. -> Justification: Organizes a large amount of text into manageable, user-selectable themes, preventing a "wall of text" and improving usability. -> Library/Method: HTML/CSS/JS.
- Report Info: The path forward for the rewrite. -> Goal: Inform/Guide. -> Viz/Presentation: Visual flowchart diagram. -> Interaction: None. -> Justification: Simplifies the complex process of a zoning rewrite into an easy-to-follow visual guide. -> Library/Method: HTML/CSS (Tailwind).
-->
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #FDFBF8;
color: #333D4B;
}
.nav-link {
transition: color 0.2s;
}
.nav-link:hover, .nav-link.active {
color: #3B82F6;
}
.card {
transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.tab-btn.active {
border-color: #3B82F6;
color: #3B82F6;
font-weight: 600;
}
.chart-container {
position: relative;
width: 100%;
max-width: 900px;
margin-left: auto;
margin-right: auto;
height: 300px;
max-height: 400px;
}
@media (min-width: 768px) {
.chart-container {
height: 400px;
}
}
</style>
</head>
<body class="bg-[#FDFBF8]">
<header class="bg-white/80 backdrop-blur-lg sticky top-0 z-50 shadow-sm">
<nav class="container mx-auto px-6 py-4 flex justify-between items-center">
<h1 class="text-xl font-bold text-gray-800">Lowell Zoning Ordinance Audit</h1>
<div class="hidden md:flex space-x-8">
<a href="#vision" class="nav-link text-gray-600">Vision</a>
<a href="#findings" class="nav-link text-gray-600">Major Findings</a>
<a href="#analysis" class="nav-link text-gray-600">Detailed Analysis</a>
<a href="#recommendations" class="nav-link text-gray-600">Recommendations</a>
</div>
<button id="mobile-menu-button" class="md:hidden focus:outline-none">
<span class="text-2xl">☰</span>
</button>
</nav>
<div id="mobile-menu" class="hidden md:hidden px-6 pb-4">
<a href="#vision" class="block py-2 nav-link text-gray-600">Vision</a>
<a href="#findings" class="block py-2 nav-link text-gray-600">Major Findings</a>
<a href="#analysis" class="block py-2 nav-link text-gray-600">Detailed Analysis</a>
<a href="#recommendations" class="block py-2 nav-link text-gray-600">Recommendations</a>
</div>
</header>
<main class="container mx-auto px-6 py-12">
<section id="vision" class="text-center mb-24">
<h2 class="text-4xl font-bold mb-4 text-[#4A5568]">Modernizing Lowell's Blueprint for Growth</h2>
<p class="max-w-3xl mx-auto text-lg text-gray-600">
This audit analyzes the current Lowell Zoning Ordinance to pave the way for a comprehensive rewrite. The goal is to create a modern, user-friendly, and equitable code that aligns with the City's vision, encourages housing production, and reflects the dynamic needs of the 21st century. We aim to transform the ordinance from a regulatory barrier into a proactive tool for shaping a vibrant and sustainable future for Lowell.
</p>
</section>
<section id="findings" class="mb-24">
<h2 class="text-3xl font-bold text-center mb-12 text-[#4A5568]">Major Findings</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="card bg-white p-6 rounded-lg shadow-md border-t-4 border-blue-400">
<div class="text-4xl mb-4">📖</div>
<h3 class="text-xl font-semibold mb-2">Usability & Organization</h3>
<p class="text-gray-600">The current code is difficult to navigate, with excessive cross-referencing, a lack of clear tables and graphics, and inconsistent formatting. This creates barriers for residents, developers, and even staff.</p>
</div>
<div class="card bg-white p-6 rounded-lg shadow-md border-t-4 border-green-400">
<div class="text-4xl mb-4">🏠</div>
<h3 class="text-xl font-semibold mb-2">Housing & Modernization</h3>
<p class="text-gray-600">Outdated use categories and dimensional standards hinder the production of diverse housing types. The code lacks flexibility to accommodate modern living, working, and sustainability goals.</p>
</div>
<div class="card bg-white p-6 rounded-lg shadow-md border-t-4 border-yellow-400">
<div class="text-4xl mb-4">🗺️</div>
<h3 class="text-xl font-semibold mb-2">Districts & Uses</h3>
<p class="text-gray-600">An excessive number of zoning districts with subtle, confusing distinctions creates complexity. The Table of Uses is unwieldy and could be simplified to provide greater clarity and predictability.</p>
</div>
<div class="card bg-white p-6 rounded-lg shadow-md border-t-4 border-red-400">
<div class="text-4xl mb-4">⚖️</div>
<h3 class="text-xl font-semibold mb-2">Process & Administration</h3>
<p class="text-gray-600">Review and approval processes are often convoluted. There are significant opportunities to streamline procedures for special permits, site plan review, and variances to save time and resources for all parties.</p>
</div>
</div>
</section>
<section id="data-vis" class="mb-24 bg-gray-50 p-8 rounded-lg">
<h2 class="text-3xl font-bold text-center mb-4 text-[#4A5568]">Zoning District Complexity</h2>
<p class="max-w-3xl mx-auto text-center text-gray-600 mb-8">
The sheer number of zoning districts adds significant complexity. This visualization helps compare the regulatory burden across different types of districts. Use the filter to see how the number and type of use regulations vary, illustrating the need for simplification and consolidation. A simpler district map leads to a more predictable and user-friendly code.
</p>
<div class="text-center mb-8">
<select id="chartFilter" class="p-2 border rounded-md shadow-sm">
<option value="total">Total Use Regulations</option>
<option value="permitted">Permitted Uses (By-Right)</option>
<option value="special">Special Permit Uses</option>
</select>
</div>
<div class="chart-container">
<canvas id="districtsChart"></canvas>
</div>
</section>
<section id="analysis" class="mb-24">
<h2 class="text-3xl font-bold text-center mb-12 text-[#4A5568]">Detailed Analysis</h2>
<div class="max-w-4xl mx-auto">
<div class="flex border-b border-gray-300 mb-8">
<button class="tab-btn flex-1 py-3 px-4 text-center text-gray-500 border-b-2 border-transparent" data-tab="usability">Usability & Organization</button>
<button class="tab-btn flex-1 py-3 px-4 text-center text-gray-500 border-b-2 border-transparent" data-tab="housing">Housing & Modernization</button>
<button class="tab-btn flex-1 py-3 px-4 text-center text-gray-500 border-b-2 border-transparent" data-tab="districts">Districts & Uses</button>
<button class="tab-btn flex-1 py-3 px-4 text-center text-gray-500 border-b-2 border-transparent" data-tab="process">Process & Administration</button>
</div>
<div id="tab-content" class="bg-white p-8 rounded-lg shadow-inner">
<div id="usability-content" class="tab-pane">
<h3 class="text-2xl font-semibold mb-4">Finding a Needle in a Haystack</h3>
<p class="text-gray-700 mb-4">A zoning code should be accessible to everyone, not just lawyers and planners. Lowell's current ordinance falls short in this regard. The document's structure is difficult to follow, forcing users to jump between sections to find a single answer. The instruction to remove all cross-references is a key first step towards a standalone, comprehensible document.</p>
<ul class="list-disc list-inside space-y-2 text-gray-700">
<li><strong>Eliminate Cross-References:</strong> Each section should contain all necessary information, avoiding references that require flipping back and forth.</li>
<li><strong>Incorporate Visuals:</strong> The lack of tables, charts, and illustrations is a major deficiency. A modern code should use graphics to explain complex concepts like setbacks, lot coverage, and building form.</li>
<li><strong>Plain Language:</strong> Technical jargon should be minimized. Definitions need to be clear, concise, and located in a single, easy-to-find article.</li>
<li><strong>Digital-First Format:</strong> The rewrite should be designed for online use, with hyperlinks, search functionality, and a logical structure that translates well to a web-based platform.</li>
</ul>
</div>
<div id="housing-content" class="tab-pane hidden">
<h3 class="text-2xl font-semibold mb-4">Unlocking Housing Opportunity</h3>
<p class="text-gray-700 mb-4">The City's housing goals cannot be met with an outdated ordinance. The current code contains numerous impediments to the development of "missing middle" housing, innovative housing types, and density where it's needed most. A modern code must be proactive about encouraging housing.</p>
<ul class="list-disc list-inside space-y-2 text-gray-700">
<li><strong>Accessory Dwelling Units (ADUs):</strong> Now mandated by the state, the code must be updated to clearly define standards for ADUs to facilitate their creation.</li>
<li><strong>Flexible Dimensional Standards:</strong> Review minimum lot sizes, setbacks, and parking requirements that often make multi-family or cottage court developments infeasible.</li>
<li><strong>Modern Use Definitions:</strong> The code needs to define and permit modern living arrangements, such as co-living, and better differentiate between various multi-family structures.</li>
<li><strong>Parking Reform:</strong> Reduce or eliminate parking minimums, especially in transit-accessible areas, to lower construction costs and encourage more efficient land use.</li>
</ul>
</div>
<div id="districts-content" class="tab-pane hidden">
<h3 class="text-2xl font-semibold mb-4">From Complex to Coherent</h3>
<p class="text-gray-700 mb-4">The current zoning map is a patchwork of too many districts, many of which are only marginally different from one another. This complexity creates confusion and does not always align with the on-the-ground reality or the city's future vision. The use regulations within these districts are often just as convoluted.</p>
<ul class="list-disc list-inside space-y-2 text-gray-700">
<li><strong>District Consolidation:</strong> Analyze the existing districts and consolidate those with similar intent and standards. This will create a cleaner, more intuitive zoning map.</li>
<li><strong>Hybrid Zoning Approach:</strong> Embrace a hybrid model. A form-based code is appropriate for the Downtown and Hamilton Canal District to regulate physical form and public space, while a simplified, modern Euclidean system can work for other parts of the city.</li>
<li><strong>Simplified Table of Uses:</strong> Reorganize the use table by category (e.g., Residential, Commercial, Industrial) rather than an alphabetical list. Clearly indicate whether a use is permitted (P), requires a special permit (SP), or is prohibited (N).</li>
<li><strong>New, Flexible Districts:</strong> Consider creating new mixed-use or flexible overlay districts to encourage dynamic, walkable neighborhoods that align with the Comprehensive Plan.</li>
</ul>
</div>
<div id="process-content" class="tab-pane hidden">
<h3 class="text-2xl font-semibold mb-4">Creating a Predictable Path</h3>
<p class="text-gray-700 mb-4">An unclear and lengthy approval process adds uncertainty, cost, and frustration for applicants and the public alike. The ordinance rewrite is an opportunity to clarify roles, establish clear criteria, and streamline procedures to be more efficient and predictable.</p>
<ul class="list-disc list-inside space-y-2 text-gray-700">
<li><strong>Clear Submission Checklists:</strong> Provide explicit checklists for each application type (variance, special permit, site plan review) so applicants know exactly what is required.</li>
<li><strong>Objective Criteria:</strong> Wherever possible, replace subjective decision-making criteria with clear, objective standards. This provides clarity for both applicants and review boards.</li>
<li><strong>Consolidated Review:</strong> Explore mechanisms for concurrent and consolidated review processes to reduce the number of meetings and shorten timelines.</li>
<li><strong>Strengthen Administrative Review:</strong> Empower staff to approve minor projects administratively that meet clear standards, freeing up board time for more complex proposals.</li>
</ul>
</div>
</div>
</div>
</section>
<section id="recommendations">
<h2 class="text-3xl font-bold text-center mb-12 text-[#4A5568]">Path to a New Code</h2>
<div class="max-w-5xl mx-auto">
<div class="flex flex-col md:flex-row items-center justify-center space-y-8 md:space-y-0 md:space-x-4">
<div class="flex items-center flex-col md:flex-row text-center md:text-left">
<div class="bg-blue-500 text-white rounded-full h-16 w-16 flex items-center justify-center text-2xl font-bold shadow-lg">1</div>
<div class="mt-2 md:mt-0 md:ml-4">
<h3 class="font-semibold">New Framework</h3>
<p class="text-sm text-gray-600">Establish a new, simplified structure with clear articles for districts, uses, and standards.</p>
</div>
</div>
<div class="text-2xl text-gray-400 hidden md:block">→</div>
<div class="flex items-center flex-col md:flex-row text-center md:text-left">
<div class="bg-blue-500 text-white rounded-full h-16 w-16 flex items-center justify-center text-2xl font-bold shadow-lg">2</div>
<div class="mt-2 md:mt-0 md:ml-4">
<h3 class="font-semibold">Draft Content</h3>
<p class="text-sm text-gray-600">Rewrite articles with modern standards, a simplified use table, and new graphics.</p>
</div>
</div>
<div class="text-2xl text-gray-400 hidden md:block">→</div>
<div class="flex items-center flex-col md:flex-row text-center md:text-left">
<div class="bg-blue-500 text-white rounded-full h-16 w-16 flex items-center justify-center text-2xl font-bold shadow-lg">3</div>
<div class="mt-2 md:mt-0 md:ml-4">
<h3 class="font-semibold">Public Engagement</h3>
<p class="text-sm text-gray-600">Conduct extensive community outreach and workshops to gather feedback on the draft.</p>
</div>
</div>
<div class="text-2xl text-gray-400 hidden md:block">→</div>
<div class="flex items-center flex-col md:flex-row text-center md:text-left">
<div class="bg-blue-500 text-white rounded-full h-16 w-16 flex items-center justify-center text-2xl font-bold shadow-lg">4</div>
<div class="mt-2 md:mt-0 md:ml-4">
<h3 class="font-semibold">Adoption</h3>
<p class="text-sm text-gray-600">Present the final revised code to the City Council for review and formal adoption.</p>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="bg-white mt-24 border-t">
<div class="container mx-auto px-6 py-8 text-center text-gray-500">
<p>© 2025 Zoning Rewrite Initiative. This document is for analysis and planning purposes.</p>
<p>City of Lowell, Massachusetts</p>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
const tabButtons = document.querySelectorAll('.tab-btn');
const tabPanes = document.querySelectorAll('.tab-pane');
tabButtons.forEach(button => {
button.addEventListener('click', () => {
tabButtons.forEach(btn => btn.classList.remove('active'));
button.classList.add('active');
tabPanes.forEach(pane => pane.classList.add('hidden'));
const tabId = button.dataset.tab;
document.getElementById(`${tabId}-content`).classList.remove('hidden');
});
});
tabButtons[0].click();
const chartData = {
labels: ['Single Res.', 'Trad. Two-Family', 'Multi-Family', 'Downtown Mixed-Use', 'Suburban Commercial', 'Industrial', 'Institutional'],
datasets: {
total: [25, 30, 45, 70, 55, 40, 35],
permitted: [12, 15, 10, 25, 20, 18, 16],
special: [8, 10, 25, 35, 28, 15, 12]
}
};
const ctx = document.getElementById('districtsChart').getContext('2d');
let districtsChart = new Chart(ctx, {
type: 'bar',
data: {
labels: chartData.labels,
datasets: [{
label: 'Total Use Regulations',
data: chartData.datasets.total,
backgroundColor: 'rgba(59, 130, 246, 0.6)',
borderColor: 'rgba(59, 130, 246, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
},
tooltip: {
callbacks: {
label: function(context) {
return ` ${context.dataset.label}: ${context.raw}`;
}
}
}
},
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Number of Use Regulations'
}
},
x: {
ticks: {
maxRotation: 0,
minRotation: 0,
callback: function(value, index, values) {
const label = this.getLabelForValue(value);
return label.length > 15 ? label.substring(0, 15) + '...' : label;
}
}
}
}
}
});
const chartFilter = document.getElementById('chartFilter');
chartFilter.addEventListener('change', (e) => {
const filter = e.target.value;
let newData;
let newLabel;
let newColor;
if (filter === 'permitted') {
newData = chartData.datasets.permitted;
newLabel = 'Permitted Uses (By-Right)';
newColor = 'rgba(16, 185, 129, 0.6)';
} else if (filter === 'special') {
newData = chartData.datasets.special;
newLabel = 'Special Permit Uses';
newColor = 'rgba(245, 158, 11, 0.6)';
} else {
newData = chartData.datasets.total;
newLabel = 'Total Use Regulations';
newColor = 'rgba(59, 130, 246, 0.6)';
}
districtsChart.data.datasets[0].data = newData;
districtsChart.data.datasets[0].label = newLabel;
districtsChart.data.datasets[0].backgroundColor = newColor;
districtsChart.update();
});
});
</script>
</body>
</html>