Skip to content

Instantly share code, notes, and snippets.

View Pessimistress's full-sized avatar
🚀
MaxQ

Xiaoji Chen Pessimistress

🚀
MaxQ
View GitHub Profile
const deckgl = new deck.DeckGL({
views: [
new deck.OrbitView() // Viewport type
],
viewState: {
distance: 10,
rotationX: 45,
rotationOrbit: 30,
zoom: 1
}, // Initial camera state
// Make a layer interactive: set `pickable` to `true`
new deck.ScatterplotLayer({
// ...
pickable: true
});
// You can confirm that it works by turning on autoHighlight.
// The circles should change color when hovered over:
new deck.ScatterplotLayer({
// ...
function updateLayers(data) {
const scatterplot = new deck.ScatterplotLayer({
/* unique id of this layer */
id: 'checkins',
/* data: an array of objects */
data,
/* data accessors */
getPosition: d => d.coordinates, // returns longitude, latitude, [altitude]
getRadius: d => Math.sqrt(d.count), // returns radius in meters
getColor: d => [255, 0, 0] // returns R, G, B, [A] in 0-255 range
@Pessimistress
Pessimistress / index.html
Last active May 24, 2018 22:03
deck.gl Starter Kit
<html>
<head>
<script src="https://unpkg.com/deck.gl@~5.2.0/deckgl.min.js"></script>
<!-- only if base map is needed -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css" rel="stylesheet" />
</head>
<body>
<div id="container" style="width: 100vw; height: 100vh;"></div>
</body>

Keybase proof

I hereby claim:

  • I am Pessimistress on github.
  • I am pessimistress (https://keybase.io/pessimistress) on keybase.
  • I have a public key whose fingerprint is 4C9D B35F E912 DCFC 66CD C0ED 5261 B7F8 578F FDD8

To claim this, I am signing this object: