gaylem / electrify-chicago

Learn about Chicago's most polluting buildings, and what they can do to clean up their act!

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.

Tools

python and pandas for data processing

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

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?)

Environment setup

1. Set up Docker

Docker is the recommended approach to quickly getting started with local development. Docker helps create a version of the Electrify Chicago website on your computer so you can test out your code before submitting a pull request.

• The recommended installation method for your operating system can be found here.
• Get started with Docker

2. Start Docker

Important

Please make sure the Docker Desktop application is running on your computer before you run the bash commands below.

This command starts server locally. To start it, cd into the project directory in your terminal then run the following command:

 docker-compose up

Running the above command will result in the following output in your terminal

Click here to see an example terminal output

When you see the above output, it means the site is now running and now you can browse to http://localhost:8080

3. Stop Docker

• To stop and completely remove the server (i.e. the running Docker container), run docker-compose down
• To stop the server, but not destroy it (often sufficient for day-to-day work), run docker-compose stop
• Bring the same server back up later with docker-compose up

Open Bash Shell

Important

To run any of the commands below, you'll need to do the following:

1. Open a new terminal and cd into the root project directory after spinning up your Docker container
2. Open up a bash shell inside the Docker container with the following command:

docker-compose exec electrify-chicago bash

Run Front-End Linting

To run linting with auto-fix, run the following command inside the Docker bash shell:

yarn lint-fix

Run Data Processing

1. 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.

2. To then process a new CSV file (at src/data/source/ChicagoEnergyBenchmarking.csv), you need to run the following command inside the Docker bash shell:

bash run_all.sh

Run Data Processing Tests

1. Make sure test data is created/replaced before running tests by running the following script from the Docker bash shell (it will overwrite the existing test data file if it exists):

bash create_test_data.sh

2. To run all tests in the project directory, enter the following command inside the Docker bash shell:

python -m pytest

3. Run the following command for individual unit test suite (where YOUR_FILE_NAME is something like test_clean_all_years) in the Docker bash shell:

python -m pytest tests/data/scripts/unit/YOUR_FILE_NAME.py

Managing The Data

Adding a Building Owner

If there's a new large building owner to add, simply:

1. Add the building owner in the BuildingOwners constant in buildings-custom-info.constant.vue - this defines metadata about the owner like their name and logo URLs

Example:

iit: {
  key: 'iit',
  name: 'Illinois Institute of Technology',
  nameShort: 'Illinois Tech',
  logoSmall: '/building-owners/iit/logo-small.png',
  logoLarge: '/building-owners/iit/logo-large.svg',
}

2. Tag buildings they own in the BuildingsCustomInfo constant (in the same buildings-custom-info.constant.vue file) - this associates a given building (by its numeric unique ID, found under its address on its details page), with a given owner.

Example:

// Keating Hall
'256434': {owner: BuildingOwners.iit.key},

3. Setup their route by adding the new owner's ID (key) to BuildingOwnerIds (in gridsome.server.js) - this tells Gridsome to create a route for this given slug

Example:

const BuildingOwnerIds = [
  'iit',
  // ...
]

Note: You'll have to restart your yarn develop after step 3 to see changes, since gridsome.server.js just runs once.

Deploys

This site deploys automatically via Netlify by running gridsome build.