# CitiBike DeckGL and Heatmap Visualization

**URL:** <https://talk.observablehq.com/t/citibike-deckgl-and-heatmap-visualization/4226>\
**Category:** Show and tell\
**Created:** [November 28, 2020, 6:39am UTC](https://talk.observablehq.com/t/citibike-deckgl-and-heatmap-visualization/4226 "2020-11-28T06:39:01Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![cornhundred](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cornhundred/32/1705_2.png) [@cornhundred](https://talk.observablehq.com/u/cornhundred)\
**Post date:** [November 28, 2020, 6:39am UTC](https://talk.observablehq.com/t/citibike-deckgl-and-heatmap-visualization/4226/1 "2020-11-28T06:39:01Z")

</div>

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)

> **[CitiBike Clustergrammer-GL and Deck.gl](https://observablehq.com/@cornhundred/citibike-clustergrammer-gl-and-deck-gl)**
>
> Data Deck.gl Setup Clustergrammer-GL Setup Imports Functions References https://observablehq.com/@nharrisanalyst/deck-gl References: https://medium.com/vis-gl/automatic-gpu-based-object-highlighting-in-deck-gl-layers-7fe3def44c89...

Next steps:

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

#### References

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

The data can be obtained from [https://www.citibikenyc.com/system-data](https://www.citibikenyc.com/system-data)