🏠 back to Observable

CitiBike DeckGL and Heatmap Visualization

Hi, I’m working on a dashboard to explore CitiBike Data from NYC and would appreciate any feedback. The map is made with Deck.gl and the heatmap is made with our library Clustergrammer-GL. The basic idea of the dashboard is that we can calculate the probability distributions of where bikes departing from each station will arrive (we also Z-scored destinations in our heatmap). Using this matrix, we can perform unbiased clustering and identify neighborhoods in NYC and other interesting patterns through linked views (e.g. select cluster in the heatmap and visualize the stations on a map).

The visual can be interacted with in the following ways (works best after clicking the fullscreen button):

  • clicking on a column/row highlights departing/arriving rides to/from the selected station
  • clicking on the dendrogram highlights the group of stations
  • clicking on a heatmap cell highlights a path between two stations (colored by how frequently that path is taken)
  • clicking on a station in the map highlights departing (red) and arriving (blue) paths that are most common
  • moving the UMAP slider morphs the positions of the heatmap into a UMAP representation (the map fades away to a yellowish color to represent UMAP space)

Next steps:

  • add animated trip layer
  • improve fullscreen functionality
  • clean up stuff


The initial data processing has been done here https://github.com/cornhundred/citibike-clustergrammer2

The data can be obtained from https://www.citibikenyc.com/system-data