Skip to content

Instantly share code, notes, and snippets.

View chriswhong's full-sized avatar

Chris Whong chriswhong

692 followers · 47 following
View GitHub Profile
@chriswhong
chriswhong / chart.js
Last active July 27, 2018 20:14
A D3 Stacked Bar Chart showing NYC Planning Labs' Weekly Commits on Major Projects between July 2017 and July 2018
// based on https://bl.ocks.org/mbostock/3886208
const svg = d3.select('svg');
const margin = {
top: 20, right: 20, bottom: 100, left: 40,
};
@chriswhong
chriswhong / maputnik-push.js
Last active February 13, 2019 03:01
Push any mapboxGL map style to maputnik using planning labs' maputnik-push service
// this will only work if window.map === your mapboxgl map instance
// we usually set window.map = map in the callback using map.on('style.load', function () { ... })
fetch('https://maputnik-push.planninglabs.nyc/style', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(window.map.getStyle()),
@chriswhong
chriswhong / sparklines.js
Last active December 3, 2018 16:31
Creating weekly commit sparklines using JQuery and D3.js
$.getJSON('https://home-api.planninglabs.nyc/github/repo-activity', (labsData) => {
const yMax = d3.max(labsData, d => d3.max(d.data, e => e.total));
labsData
.sort(function(a, b) {
if (a.name < b.name) {
return -1;
}
if (a.name > b.name) {
return 1;
@chriswhong
chriswhong / Maputnik.png
Last active February 7, 2019 21:57
Custom buffersize param on carto maps api tile instantiation
Maputnik.png
@chriswhong
chriswhong / scrape.js
Created April 22, 2019 03:58
Decrypting Amtrak's real-time train location geoJSON feed
// decrypting Amtrak's real-time train location geoJSON feed
// based on https://github.com/Vivalize/Amtrak-Train-Stats
const fetch = require('node-fetch');
const CryptoJS = require('crypto-js');
// this is the xhr call done by https://www.amtrak.com/track-your-train.html containing encrypted train location data
const dataUrl = 'https://maps.amtrak.com/services/MapDataService/trains/getTrainsData';
// 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
chriswhong / README.md
Last active October 18, 2023 09:37
Clickable Markers in MapboxGL

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

Why?

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 https://paintthetown.chriswhong.com

@chriswhong
chriswhong / keybase.md
Created July 1, 2019 13:39

Keybase proof

I hereby claim:

  • I am chriswhong on github.
  • I am cwhong (https://keybase.io/cwhong) on keybase.
  • I have a public key ASCScIKKKJdJewGrjgHOzYmnx7P7j7d2Bxdxs4E3qVopBQo

To claim this, I am signing this object:

@chriswhong
chriswhong / index.html
Last active September 9, 2019 15:57
Qri blob loading spinner prototype
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/ >
<title>Qri Loading Spinner Prototype</title>
<script src="https://d3js.org/d3.v3.min.js"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Bootstrap 3 -->
@chriswhong
chriswhong / Qmf6Vfs78CeKHsWus2gXjBkvha93acBXN3FB7DtEFha4oj.csv
Created January 23, 2020 14:57
NYC Plaza Program Sites from Qri Dataset chriswhong/nyc_plaza_program_sites@/ipfs/Qmf6Vfs78CeKHsWus2gXjBkvha93acBXN3FB7DtEFha4oj.csv
We can make this file beautiful and searchable if this error is corrected: It looks like row 5 should actually have 13 columns, instead of 9. in line 4.
plaza,boro_community_district_1,boro_community_district_2,level,area_sf,on_street,cross_street_1,cross_street_2,partner,partner_info_url,longitude,latitude,cecm_map
Albee Square Plaza,BK02,,C,25200,Dekalb Ave,Bond Street,Fulton Mall,Fulton Mall Improvement Association,http://downtownbrooklyn.com/about/fulton-mall-improvement-association,-73.983171,40.689973,https://www1.nyc.gov/assets/cecm/downloads/plaza-maps/bk-albee-square.pdf
Ave C Plaza,BK12,,D,5600,McDonald Ave,Avenue C,Church Ave,Kensington Stewards,https://bklyner.com/want-a-new-pedestrian-plaza-in-kensington-attend-this-public-workshop-on-wednesday-april-29-kensington/,-73.979094,40.640571,https://www1.nyc.gov/assets/cecm/downloads/plaza-maps/bk-avenue-c-plaza.pdf
Brooklyn Plaza,BK02,,B,50000,Jay Street,High Street,Manhattan Bridge,DOT,https://www1.nyc.gov/html/dot/html/home/home.shtml,-73.986569,40.699203,https://www1.nyc.gov/assets/cecm/downloads/plaza-maps/bk-brooklyn-plaza.pdf
Cadman Plaza East,BK02,,,,Cadman Plaza East,Tillary St,Johnson St,Down
@chriswhong
chriswhong / README.md
Created February 28, 2020 17:55
Using ogr2ogr to load a CSV into Postgres

The absolute easiest way to get a CSV into a postgresql table is to use ogr2ogr with AUTODETECT_TYPE=YES.

I learned a while back that this is what cartoDB uses to import your CSV into postgis (with a lot of other parameters added)

ogr2ogr -f PostgreSQL PG:"host=localhost user=postgres dbname=postgres password=password"  docs.csv -oo AUTODETECT_TYPE=YES