Dashboard based Visualization of Boston BLUEBikes Trips Data using D3 and Leaflet JS libraries
The dashboard was strongly inspired by Adil Moujahid work and re-uses parts of the repository in adopted way for plotting and mapping the data. The way the data is parsed and processed, however, was developed independently from his work as well as the possibility to switch between two sample datasets.
More information can also be found in the provided report.
Using this dashboard, it is possible to visualize and analyze trip data provided by BLUEBikes in space and time. In addition to a heat map that shows where a particularly large number of trips took place, information about the users (age, gender, temporal distribution of trips over the day, and average trip duration) is displayed using diagrams. Leaflet and D3 are used for this. The trip data is made publicly available by BLUEBikes for (scientific) analysis via Amazon Web Services.
Two sample datasets are available by default:
- one dataset covering a typical weekday
- one dataset covering a typical weekend day
To use the example shown here, all you need to do is clone the repository and then open the html in root with a common web browser. The data for the example is provided as JSON via Github and read in accordingly. The data was downloaded from BLUEBikes for October 2019 and pre-processed using this Python script. Incomplete entries were removed and only the relevant data (age, gender, user type, start time, geographic positions and trip duration) were kept and stored as JSON. Then only one day is exported by the script to JSON since larger amounts of data cause the browser to fail loading the page. Therefore, the two sample datasets only cover one day each.
However, it is also possible to call up the dashboard with other data. To do this, simply alter the download link to customize BLUEBikes (about another month) in the Python script and host the JSON document on any server so that it is accessible via the Internet. Then adjust the URL in the Javascript and the **div-togle**element in the HTML file.