Skip to content

Instantly share code, notes, and snippets.

Chris Whong chriswhong

Block or report user

Report or block chriswhong

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
chriswhong / index.html
Last active Sep 9, 2019
Qri blob loading spinner prototype
View index.html
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/ >
<title>Qri Loading Spinner Prototype</title>
<script src=""></script>
<!-- jQuery -->
<script src=""></script>
<!-- Bootstrap 3 -->
chriswhong /
Last active Sep 8, 2019
Run open trip planner docker container for NYC

This set of commands is for setting up an open trip planner instance for New York City. OTP requires GTFS data and OSM streets data to build a graph, which it uses for trip planning.

Lucky for us, someone here dockerhub has left a nice CLI command to build the graph and run the container, but we need to get the data first.

The data are downloaded on the host machine. For me, this is a digitalocean droplet running ubuntu 14.

First, get GTFS for the New York City Subway from the MTA's downloads page: wget Next, get OSM city extract for NYC. Thanks Mapzen!

Finally, run the following docker command: docker run -it -v $(pwd):/var/otp/graphs opentripplanner/opentripplanner --build /var/otp/graphs --analyst

chriswhong / index.html
Last active Aug 28, 2019
Time block charts wth D3
View index.html
<!DOCTYPE html>
<html class="html">
<meta charset="UTF-8">
<link href="" rel="stylesheet">
.axis text {
font: 10px sans-serif;
chriswhong / RadiusMode.js
Created Mar 1, 2018
RadiusMode, a custom mode for mapbox-gl-draw for drawing a radius
View RadiusMode.js
// custom mapbopx-gl-draw mode that modifies draw_line_string
// shows a center point, radius line, and circle polygon while drawing
// forces draw.create on creation of second vertex
import MapboxDraw from 'mapbox-gl-draw';
import numeral from 'numeral';
import lineDistance from 'npm:@turf/line-distance';
const RadiusMode = MapboxDraw.modes.draw_line_string;
chriswhong / docker-cartodb.txt
Created Jun 21, 2016
Steps to get docker-cartodb working with a real domain
View docker-cartodb.txt
#Notes for getting docker-cartodb to run on a digitalocean droplet
As of 21 June 2016, the Dockerfile at sverhoeven/docker-cartodb is not up to date, and the build will fail. It seems to fail at step 39, when it goes to create a user, but was not able to update it to get it working. Hopefully someone else can get it going with the latest cartodb code.
However, running `docker run -d -p 3000:3000 -p 8080:8080 -p 8181:8181 sverhoeven/cartodb` will pull a complete docker image that is a few months old.
Running this image will get you a container that expects to run at the domain `cartodb.localhost`, and per the installation instructions you are told to update your hosts file to point cartodb.localhost to the IP of your docker host.
I wanted to run this with a real domain, so here are some notes on the steps involved.
- run the image using `docker run -d -p 3000:3000 -p 8080:8080 -p 8181:8181 sverhoeven/cartodb`

Keybase proof

I hereby claim:

  • I am chriswhong on github.
  • I am cwhong ( on keybase.
  • I have a public key ASCScIKKKJdJewGrjgHOzYmnx7P7j7d2Bxdxs4E3qVopBQo

To claim this, I am signing this object:

chriswhong / scrape.js
Created Apr 22, 2019
Decrypting Amtrak's real-time train location geoJSON feed
View scrape.js
// decrypting Amtrak's real-time train location geoJSON feed
// based on
const fetch = require('node-fetch');
const CryptoJS = require('crypto-js');
// this is the xhr call done by containing encrypted train location data
const dataUrl = '';
// these constants are pulled from RoutesList.v.json, which is an object with keys 'arr', 's', and 'v'
const sValue = '9a3686ac'; // found at s[8]
chriswhong /
Last active May 30, 2019
Clickable Markers in MapboxGL

This example shows how to extend mapboxGL's Marker class to add custom functionality on click.


MapboxGL has a very convenient Marker class that can be used to quickly get markers on the map with a few lines of code (versus the more complex method of adding sources and layers). They behave a bit differently from the rest of the map features because they are actually HTML elements overlaid on the map canvas.

The stock markers are great, and they are SVG so you can color them by passing in a color option! However, the only interactivity you can easily set up is a popup. When you google 'clickable markers', the examples you find are all using symbol layers with queryRenderedFeatures.

I wanted to trigger navigation in a single page app using the stock Markers and determined a simple extension of the class would help me accomplish this. You can also see these markers in action at

chriswhong / .DS_Store
Last active May 29, 2019
Animated D3 Clock in Torque
chriswhong / maputnik-push.js
Last active Feb 13, 2019
Push any mapboxGL map style to maputnik using planning labs' maputnik-push service
View maputnik-push.js
// this will only work if === your mapboxgl map instance
// we usually set = map in the callback using map.on('style.load', function () { ... })
fetch('', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
body: JSON.stringify(,
You can’t perform that action at this time.