This dashboard is a way to show building owners and property managers their building's performance in comparison to other buildings in San Francisco of similar use case and size. Building owners report data about their building to comply with the Existing Commercial Buildings Ordinance. The data for this dashboard is drawn directly from DataSF.
This project is part of Data Science Working Group at Code for San Francisco, a group of volunteers who work on civic tech projects to benefit the community. The original repo for this project can be found here.
- Tyler Field
- Anna Kiefer
- Eric Youngson
- Juliana Vislova
- Peter W
- Sanat Moningi
- Geoffrey Pay
Here's how to get started contributing:
Fork this repo, then clone your repo locally
$ git clone <this-repo> <your-repo-name>
$ cd <your-repo-name>
$ git remote add upstream <this-repo>
Create a feature branch:
$ git checkout -b <feature-branch>
Do some work:
$ vim <some-files>
When you're ready, commit, merge any upstream changes, deal with conflicts, and push your branch (aka, forking workflow)
$ git add <some-files>
$ git commit -m 'my awesome feature'
$ git pull upstream master
# solve conflicts
$ git push
Create a Pull Request from your pushed branch (compare branch) to this repo (base branch)
Install dependencies:
$ npm install
Use Webpack to launch a server and watch files for changes:
$ npm run start
Use Webpack to watch files, but not run a server:
$ npm run watch
Use Webpack to bundle files for production site:
$ npm run build
Now the files in dist/ are all you need to copy to a production server.
The live data is pulled from DataSF using the function Dashboard.startQuery().
Buildings are identified using Assessor Parcel Numbers (APNs). The requested APN is read from url params with the function helpers.getUrlVars(). The AJAX request to DataSF is made using apiCalls.propertyQuery(), which is a wrapper around the soda-js library.
If the APN doesn't exist, the page gives the error message "The record for the chosen building was not found".
If a requested property is of an unsupported use type (supported building types are "Office", "Hotel", or "Retail Store"), the page displays the message "The chosen building type is not supported by this dashboard interface". Supported building types are defined as keys in the Dashboard.groups object.
If a building doesn't have data for the latest year, the page will show the data for the latest year available.
If a building has never complied, the page will display a message saying "{BUILDING NAME} could not be ranked against other {BUILDING TYPE}s using the latest benchmark data."
The code in src/js/ is roughly split into modules by function:
- dashboard.js: form query, make request, handle data, update page.
- apiCalls.js: wrapper around the soda-js library and helper functions for constructing query strings
- dataManipulation.js: functions to manipulate and parse the query response from DataSF
- helpers.js: miscellaneous helper functions
javascript files for individual pages (estar, ghg, eui) in src set options and functions that are unique to each page