尚未检测到更新。GitHub 发布版本后会显示在这里。
个人 GitHub 账号下公开仓库的所有者可以登录并验证所有权,自行管理介绍,无需管理员批准。
登录并生成验证文件,在 30 分钟内将其提交到此仓库的默认分支。其他分支或分叉仓库中的文件无效。然后在下方检查文件,即可无需管理员批准直接管理项目。请保留文件以维持管理权限。
如需登录,将前往登录页面。登录后请回到此处,再次点击所选的验证按钮。
在项目文件夹中运行 /nomorevibe verify,即可验证所有权并自行管理介绍。
一分钟完成验证Currently refactoring HawaiiZoningAtlas.com
翻译准备中
取自仓库 README
正在加载完整 README。 以下为已保存的摘录。
Interactive map showing how outdated zoning laws make it hard to build diverse, affordable housing in Hawaii
Developed by Code with Aloha
Note: This project is mainly in maintenance mode, and we are not actively developing new features. We are still maintaining the project and fixing bugs. If you are interested in contributing into issues similar to this project (doing things such as statistical analysis and data visualization), contact Trey Gordner at [email protected].查看完整 README ↗Note: This project is mainly in maintenance mode, and we are not actively developing new features. We are still maintaining the project and fixing bugs. If you are interested in contributing into issues similar to this project (doing things such as statistical analysis and data visualization), contact Trey Gordner at [email protected].
This interactive map shows how outdated zoning laws make it hard to build diverse, affordable housing, and the provided Jupyter Notebooks are meant to help gain insights into the data (statistical analysis, data visualization, etc).
Zoning laws, adopted by thousands of local governments across the country, dictate much of what can be built in the United States. We need to find better ways of helping people understand what zoning codes say, because they have a tremendous impact on our economy, on the environment, and on our society. A zoning atlas that enables users to visualize the prevalence and nature of regulatory constraints, particularly on housing, can be an important tool to achieve that goal.
Our data, and many of the other states is also live on the National Zoning Atlas's Atlas.
~17:00) https://www.hawaiipublicradio.org/podcast/the-conversation/2023-08-11/the-conversation-climate-change-and-natural-disasters-hawai%CA%BBi-zoning-atlas-helps-with-housingThe code can be seen live at hawaiizoningatlas.com
The process of moving the data from the starting point (the datasheet) to the final destination (the website) involves a series of processes that we are hoping to automate.
The goal of the data pipeline is to help decrease the friction between getting data from the spreadsheet to the final form hosted by the website.
In the HZA Research Guide The user can find the starting point for the map which is the datasheet.
This datasheet is manually populated by people going through the various zoning laws (The links for the zoning laws are found in the repo's research guide.) and filling out cells according to the guidelines laid out in How to Make a Zoning Atlas.
After the data sheet is populated, it is then exported to a csv where the following steps need to occur:
hawaii-zoning-data.csvThe hawaii-zoning-data.csv file should then be placed into the data-pipeline folder.
In the data-pipeline folder there is a "gis" folder that holds the output of processing various shape files. These shape files come from the maps given in the HZA Research Guide. The method of processing the shape files is outlined in How to Make a Zoning Atlas.
Open the shape file in the GIS software of your choice, QGIS has been used for this.
Verify the following feature columns are added in addition to the existing columns and match the spreadsheet values
Note: Do not change the geometry columns
Export the result into a gpkg file (This will get read in by the CombineJurisdictions notebook)
Once the data has been aggregated and in the correct form, it is processed by the CombineJurisdictions Jupyter Notebook. The notebook exports the final.geojson file that is placed in the repository's "data" directory. This is the data the populates the website.
GitHub Actions is the tool we are using to automate the various parts of the data processing pipeline.
Different GitHub actions will perform the following tasks:
sequenceDiagram
participant Actions
participant Spreadsheet
Actions->>Spreadsheet: Pull data for all the counties (Maui, Oahu, Big Island, Kauai)
loop Validation
Actions->>Actions: Validate the pulled data against a schema (prevent mistypings, blank lines, ...etc)
end
loop Commit
Actions->>Actions: Commit the validated and changed files to this repository
end
Once the data is ready for processing, another set of actions will perform the following tasks:
CombineJurisdiction notebookfinal.geojson filefinal.geojson file to the repository
final.geojson should include a timestamp and a reference to the original data used to generate it. This will allow us to rollback to different versions if needed.sequenceDiagram
participant Actions
participant Jupyter Notebook
Actions->>Jupyter Notebook: Execute the Jupyter Notebook with all the prerequisite files (`gis/`, `csv/`, ...etc)
Jupyter Notebook->>Actions: Return a `final.geojson` to be served with the map
loop Commit
Actions->>Actions: Commit the generated `final.geojson` to the repository
end
Deployed on Netlify: hawaiizoningatlas.netlify.app
Our research team read the complete zoning codes of all four counties and recorded which kinds of housing each zoning district allows, and under what rules, following the National Zoning Atlas's method. A Python notebook joins that spreadsheet to each county's zoning map, subtracts federal and state land (which counties can't zone), and writes a single GeoJSON file. The website draws that file on a Leaflet map. Choose a housing type, and every district that doesn't allow it turns gray. Click a district to see how much of its county's zoned land meets your filters.
This is a rebuild of Code with Aloha's Hawaii Zoning Atlas on its original static stack. Nothing in the app needs a server: the data is processed ahead of time, and Netlify serves plain HTML, CSS, and JavaScript.
Our research team read each county's zoning code and filled in a spreadsheet with one row per zoning district, following the National Zoning Atlas's How to Make a Zoning Atlas. Each row records:
The county tabs are combined into data-pipeline/hawaii-zoning-data.csv. Each county's zoning map is prepared in QGIS and saved as a GeoPackage in data-pipeline/gis/.
The Jupyter notebook CombineJurisdictions.ipynb turns the spreadsheet and the maps into the one file the website reads:
P-1 becomes HI--MAUI--P1), which links the map to its spreadsheet rowMA), which the area calculator adds up1-Family Treatment: Allowed/Conditional becomes 1F: A), simplifies the shapes to within about 2 m, and snaps every point to a 1 m grid. shrink_geojson.py then writes final.geojson without extra digits or spaces, and it's copied to data/final.geojsonEvery Monday, a GitHub Actions workflow (spreadsheet.yml) keeps the map in sync with the spreadsheet:
The site has two pages, linked by a Home · Map navbar. It's a tab bar along the bottom on phones and a top bar on wider screens.
Home (index.html, at /):
/map/ still works, because scripts/home.js sends it there.The map (map/index.html, at /map/): it holds the sidebar and the map, and scripts/map.js does the rest with Leaflet and jQuery. The sidebar is semantic HTML styled by style.css; only the area panel still uses Tachyons classes.
Loading: loadMapData() fetches the county outlines and the zoning districts in parallel. A status message shows until they arrive, or explains the error if they don't
Filters: one config, data/filters.json, lists each housing type, its options, their labels, and the data values each option matches (1F / AH means 1-family housing allowed only after a public hearing). map.js builds the controls from it, as checkboxes and radio groups with legends. A district keeps its color only if it matches every type that's on; otherwise it turns gray. Options that can't change the map with today's data are hidden until the data can tell districts apart
Area calculator: clicking a district selects its county. The panel adds up the zoned acres of that county's matching districts, shows them as a share of the county's total, and lists the county's Census stats from data/demographics.js
tools/fetchDemographics.js is a Node.js script (built-in fetch, no packages) that pulls each county's numbers from the Census Bureau's API and writes them to data/demographics.js:
It finds each value by its label, because the Census Bureau renumbers variables between releases. Its --check mode compares the site's numbers against several releases and definitions, which showed that the original numbers mixed two releases. The API key stays in .env and never reaches the browser.
| Command | What it does |
|---|---|
python -m http.server 8000 | Serves the site at http://localhost:8000, with the map at http://localhost:8000/map/. The map's data can't load from file:// |
node --env-file=.env tools/fetchDemographics.js --check | Shows which Census release and definitions match the current county stats, without writing anything |
node --env-file=.env tools/fetchDemographics.js 2024 | Rewrites data/demographics.js from the 2020–2024 release. Needs CENSUS_API_KEY in .env (see .env.example) |
python pull_sheet.py (from data-pipeline/) | Pulls the spreadsheet into hawaii-zoning-data.csv and lists what changed |
jupyter execute CombineJurisdictions.ipynb (from data-pipeline/) | Rebuilds final.geojson from the spreadsheet CSV and the county maps. The full steps are in data-pipeline/README.md |
python check_data.py (from data-pipeline/) | Checks the rebuilt map data before you commit it |
dataLayer variable was renamed zonesLayer, because it was overwriting Google Analytics' own dataLayerOverlays: each overlay downloads the first time it's turned on and stays cached after that, so the 11 MB waterways file only loads for visitors who ask for it. A status line reports loading and errors
District labels: each House and Senate label sits at the center of its district's largest piece, or in the widest part of the shape when that center falls outside it. After every zoom, labels are placed largest district first, and each one shows only if its district has room for it on screen and it doesn't overlap another label
Shareable links: the map view and every filter are saved in the URL (#zoom/lat/lng/filters) with URLSearchParams. Opening a link restores only values that match a real filter, and a link with junk in it gets rewritten. Links keep the format they've always had, so older shared links still work
Safe rendering: tooltips and panels are built from text nodes (createTextElement()), never from HTML strings, so text from the spreadsheet or a link can't run as code
Basemaps: CARTO's light basemap or Esri satellite imagery, with CARTO's place names drawn above the zoning districts. There's one CARTO API key for local development and another for the live site
Analytics: Google Analytics loads from scripts/analytics.js and skips local visits
Intro tour: Driver.js walks first-time visitors through the map, and a localStorage flag keeps it from showing again
Phones: at 600px wide and below, the map fills the screen above a "Filters & overlays" bar. The bar opens the sidebar as a drawer over the lower part of the map, and says how many housing filters are on. Tapping a district shows a short card with the county's percentage, the district's name, and the first line of its notes, which expands to everything. Phones also open zoomed out, with every county in view
style.css keeps its colors, fonts, font sizes, and spacing in one set of CSS variables/map/, and old shared links forward there.