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 / 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 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 / 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 / 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 / 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
Created March 22, 2019 18:52
Mapbox iframe bug
<!DOCTYPE html>
<html>
<body>
<iframe></iframe>
<script>
var content = unescape(`%3C%21DOCTYPE%20html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A%3Cscript%20src%3D%27https%3A//api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js%27%3E%3C/script%3E%0A%3Clink%20href%3D%27https%3A//api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css%27%20rel%3D%27stylesheet%27%20/%3E%0A%3C/head%3E%0A%3Cbody%3E%0A%3Cdiv%20id%3D%27map%27%3E%3C/div%3E%0A%3Cscript%3E%0Amapboxgl.accessToken%20%3D%20%27%3Cyour%20access%20token%20here%3E%27%3B%0Avar%20map%20%3D%20new%20mapboxgl.Map%28%7B%0Acontainer%3A%20%27map%27%2C%20//%20container%20id%0Astyle%3A%20%27mapbox%3A//styles/mapbox/streets-v11%27%2C%20//%20stylesheet%20location%0Acenter%3A%20%5B-74.50%2C%2040%5D%2C%20//%20starting%20position%20%5Blng%2C%20lat%5D%0Azoom%3A%209%20//%20starting%20zoom%0A%7D%29%3B%0A%3C/script%3E%0A%3C/body%3E%0A%3C/html%3E`);
var blob = new Blob([content], {type: 'text/html'});
document.querySelector('iframe').src = URL.createObjectURL(
@Pessimistress
Pessimistress / index.html
Last active April 26, 2019 01:35
deck.gl GoogleMapsOverlay Code Sample
<html>
<head>
<script src="https://unpkg.com/deck.gl@^7.0.0/dist.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=<google_maps_api_key>&libraries=visualization&v=3.34"></script>
<style type="text/css">
body {margin: 0; padding: 0;}
#container {width: 100vw; height: 100vh;}
</style>
</head>