Our story about biking in Toronto told through data visualizations. Final Project submission for CSC316.
This project was built using D3.js, Bootstrap, and vanilla JS, HTML, CSS. Deployment was on an Azure Static Web App via Github Actions.
This web application features several interactive visualizations that each look at a certain aspect about biking in Toronto (e.g. the Bike Share network) as well as several comparisons to Montreal and Vancouver. Most maps and charts are clickable and update according to selected variables and various toggles. For a quick example on usage, check out the demo below!
A two-minute video demoing the project can be found here.
The project can be accessed here.
- Navigate through the visualization by scrolling, using the arrow keys, or using the navigation dots (along the right side).
- Click the buttons on the top right side to toggle the view between Montreal and Vancouver.
- Click the buttons on the top right side to toggle the view between Montreal and Vancouver.
- Hover over each station dot to see the station name and capacity.
- Hover over a category (cluster of bars) to learn more about the category.
- Click on any of a city's bars or the city entry in the legend to highlight that city's scores.
- Click again on any of a city's bars or the city entry in the legend to un-highlight that city's scores and restore the original view.
- Use the dropdowns to change the variable being displayed on either of the 2 maps.
- Use the checkboxes to toggle the Bike Share Station & Bike Rack dots on and off.
- Hover over a neighbourhood to see its name, and its values for the two displayed variables.
- Use the dropdowns to change the variable being displayed on the x or y axis.
- Click on a neighbourhood in the mini-map in the top right corner to zoom in on that neighbourhood on the big left-hand map and display its summary.
- Click on a neighbourhood in the big left-hand map to zoom in on it and display its summary.
- Scroll on the big left-hand map to zoom in and out.
- Use the checkboxes to toggle the Bike Share Station dots, Bike Rack dots, and Bike Paths on and off.
- Use the dropdown to choose the statistic being displayed in the bar chart.
- Click on a Bike Share Station to zoom in on it and view its statistics.
- Click on a bar in the bar chart to zoom in on that corresponding Bike Share Station.
- Click again on a selected station/bar to unselect it and zoom out to view the whole map.
- Scroll on the big left-hand map to zoom in and out.
In case the above link is no longer accessible at the time of reading this (resource may be torn down in the future), you can alternatively build the project on your local machine. The only prerequisite is that your system has Node v18 installed along with npm v10. Steps to get up and running locally:
- Clone the project to your local directory
- Install dependencies
npm install - Run the local server
npm run dev
The class responsible for loading data (js/util/dataManager.js) will attempt to read data from an external API to
retrieve station status data. If the API is down at the time of reading this, please use the provided file under
public\data\bike_share_stationStatus.json to load a subset of that data. Otherwise, all other data used in the project
can be found directly within the public\data folder and should work as-is when running the project.
The sources to all data used in this project are as follows:
- Toronto Bike Share
- Toronto Bike Share Station Status*
- Toronto Bike Paths Data
- Toronto Bicycle Thefts
- Toronto Bicycle Collisions
- Toronto Bike Share Ridership Data
- Toronto Neighbourhoods GeoJson Data
- Toronto Demographics Data
- Toronto Bike Racks Data
- Montreal Bike Paths Data
- Montreal Neighbourhoods GeoJson Data
- Montreal Bike Share Data
- Vancouver Bike Paths Data
- Vancouver Neighbourhoods GeoJson Data
- Vancouver Bike Share Data
- Bicycle Network Analysis Scores Data
*Data returned by this API is automatically sampled every 6 hours via an Azure Function, starting from March 12, 2025 @ 8PM UTC.
Authors: Amiel Nurja, Dihan Niloy, Mieko Yao
Special thanks to Yunfu (Chris) Xu for his contributions in ideating for our project.