Electrify Chicago

A site to publicize some of the most polluting buildings based on the Chicago Energy Benchmarking data published in the City of Chicago Data Portal.

It's powered by VueJS 2 and GridSome

Data Import

Sources:

• Chicago Energy Benchmarking - Covered Buildings Data

Cleanup

GraphQL requires data key names to have no spaces or special characters, so there's a raw data file (only filtered by GHG emissions > 1,000 tons and year = 2020) and a cleaned file that just hast he headers renamed for GraphQL.

General To-Do List

• Pick a framework - statically built VueJSS, maybe VitePress
• Setup landing page with SCSS working
• Get CSV data usable and on homepage
• Setup domain and build process
• Setup Typescript
• Setup linting in CI (ESLint ✅️, Prettier, Stylelint)
• Setup unit tests

Feature To-Do List

• Show property owner (manually tagged)
• Pre-process data to calculate things like averages for each property and rank of each building overall, in their class (TODO), and in their ward (TODO)
• Add colors/emoji to table view to give more context (e.g. so people know Keating is super bad)
• Show % of energy use from the four sources (electric, gas, district chilled water, district steam)
• Create ward page that shows data by ward (needs new data source)
• Figure out a way to rank buildings by opportunity for improvement (perhaps higher than avg. in category, uses a lot of natural gas?)

Development

Setup

Make sure you have Yarn installed, cd into the project directory (after cloning it) and run:

yarn install

Known Issues

macOS libvips Error

If you encounter an error on macOS such as sharp Prebuilt libvips 8.10.5 binaries are not yet available for darwin-arm64v8, you'll need to install these dependencies separately. Install the Brew package manager, then run the following commands:

brew install --build-from-source gcc
xcode-select install
brew install vips

Running

Run yarn develop to start a local dev server at http://localhost:8080

Happy coding 🎉🙌

Run Linting

To run linting with auto-fix, run:

yarn lint-fix

Deploys

This site deploys automatically via Netlify by running gridsome build.

Tools

python and pandas for data processing

Leaflet and Leaflet Google mutant https://www.npmjs.com/package/leaflet.gridlayer.googlemutant

Run Data Processing

If you update the raw data CSVs or the data scripts that post-process them (like if you are adding a new statistical analysis), you need to re-run the data processing.

This requires:

• pip
• python 3.9

Run the following commands:

cd src/data
pip install --no-cache-dir -r requirements.txt
bash run_all.sh

Important! When you update the data, make sure to update the LatestDataYear in globals.vue, as well as the filter year in all page queries.