https://github.com/do-me/deckgl-label-collision

A scatterplot example with deck.gl and dynamic label collision settings
https://github.com/do-me/deckgl-label-collision

canvas deckgl labelcollision scatterplot

Last synced: about 14 hours ago
JSON representation

A scatterplot example with deck.gl and dynamic label collision settings

• Host: GitHub
• URL: https://github.com/do-me/deckgl-label-collision
• Owner: do-me
• License: mit
• Created: 2024-04-02T18:06:38.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-04-03T15:29:45.000Z (8 months ago)
• Last Synced: 2024-04-23T00:17:52.274Z (7 months ago)
• Topics: canvas, deckgl, labelcollision, scatterplot
• Language: JavaScript
• Homepage: https://do-me.github.io/deckgl-label-collision/
• Size: 1.21 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Deckgl Label Collision

A basic scatterplot example with deck.gl avoiding label collision.

Two sliders dynamically set the label font size and the label collision size (the "buffer" around the labels). 

## Examples

### Visualizing tSNE for 169 SDG targets

Interactive App: https://do-me.github.io/deckgl-label-collision/sdg

![sdg_labels](sdg_labels.png)

### Generating arbitrary sample data 

Interactive App: https://do-me.github.io/deckgl-label-collision

![deckgl_label_collision](deckgl_label_collision.png)

## Why? 

Due to deck.gl's reactive paradigm, updating deck.gl is not as straight forward as e.g. Leaflet. Working examples are sometimes even more useful than the docs. I hope I'll save you some dev time!

I created this repo mostly for myself for testing labels in:

- [SemanticFinder](https://github.com/do-me/SemanticFinder) 

- [Qdrant Frontend](https://github.com/do-me/qdrant-frontend/)