Skip to content

Instantly share code, notes, and snippets.

View Pessimistress's full-sized avatar
🚀
MaxQ

Xiaoji Chen Pessimistress

🚀
MaxQ
852 followers · 0 following
View GitHub Profile
@Pessimistress
Pessimistress / keybase.md
Created March 30, 2017 08:46

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:

@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>
@Pessimistress
Pessimistress / update-layers.js
Last active April 12, 2018 06:07
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 / interaction.js
Created April 12, 2018 06:11
// 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({
// ...
@Pessimistress
Pessimistress / non-geospatial.js
Created April 12, 2018 06:20
const deckgl = new deck.DeckGL({
views: [
new deck.OrbitView() // Viewport type
],
viewState: {
distance: 10,
rotationX: 45,
rotationOrbit: 30,
zoom: 1
}, // Initial camera state
@Pessimistress
Pessimistress / index.html
Last active December 19, 2019 19:51
Deck.gl + Mapbox Brushing Arcs
<html>
<head>
<title>US County-to-County Migration</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="https://unpkg.com/deck.gl@^6.2.0/deckgl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
<link rel="stylesheet" type="text/css" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css">
<script src="https://d3js.org/d3.v5.min.js"></script>
@Pessimistress
Pessimistress / index.html
Last active October 30, 2018 19:44
deck.gl + Mapbox HexagonLayer Example
<html>
<head>
<title>Road Accidents in UK</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="https://unpkg.com/deck.gl@^6.2.0/deckgl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
<link rel="stylesheet" type="text/css" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css">
<script src="https://d3js.org/d3.v5.min.js"></script>
@Pessimistress
Pessimistress / index.html
Last active October 30, 2018 19:44
deck.gl + Mapbox: Get Started (Demo)
<html>
<head>
<title>deck.gl + Mapbox Integration</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="https://unpkg.com/deck.gl@^6.2.0/deckgl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
<link rel="stylesheet" type="text/css" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css">
</head>
<body>
<div id="map" style="width: 100vw; height: 100vh"></div>
@Pessimistress
Pessimistress / map.js
Created October 8, 2018 03:36
deck.gl + Mapbox: Get Started
import {ScatterplotLayer} from '@deck.gl/layers';
import {MapboxLayer} from '@deck.gl/mapbox';
import mapboxgl from 'mapbox-gl';
// Get a mapbox API access token
mapboxgl.accessToken = '<your access token here>';
// Initialize mapbox map
const map = new mapboxgl.Map({
container: 'map',
@Pessimistress
Pessimistress / app.js
Created October 8, 2018 03:40
deck.gl + Mapbox: Get Started (React)
import React from 'react';
import DeckGL, {ScatterplotLayer} from 'deck.gl';
import {StaticMap} from 'react-map-gl';
import {MapboxLayer} from '@deck.gl/mapbox';
const INITIAL_VIEW_STATE = {
longitude: -74.50,
latitude: 40,
zoom: 9