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
Our data is only sourced from the city's benchmarking data:
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.
python and pandas for data processing
Leaflet and Leaflet Google mutant for maps (e.g. the map page)
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.
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
When you see the above output, it means the site is now running and now you can browse to http://localhost:8080
docker-compose down
docker-compose stop
docker-compose up
To run linting with auto-fix, run the following command:
docker-compose run --rm electrify-chicago yarn lint-fix
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.
To then process a new CSV file (at src/data/source/ChicagoEnergyBenchmarking.csv
), you need to run the following command:
docker-compose run --rm electrify-chicago bash run_all.sh
docker-compose run --rm electrify-chicago bash create_test_data.sh
docker-compose run --rm electrify-chicago python -m pytest
test_clean_all_years
):docker-compose run --rm electrify-chicago python -m pytest tests/data/scripts/unit/YOUR_FILE_NAME.py
If there's a new large building owner to add, simply:
BuildingOwners
constant in buildings-custom-info.constant.vue
-
this defines metadata about the owner like their name and logo URLsExample:
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',
}
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},
BuildingOwnerIds
(in
gridsome.server.js
) - this tells Gridsome to create a route for this given slugExample:
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.
This site deploys automatically via Netlify by running gridsome build
.