Larger Works

Live Light Concert Visualizer
May 2018
Live Light Concert Visualizer
A realtime visualization using client-side audio / video stream APIs and rendered to canvas at 64fps
Apple Keynote Bingo
September 2016
Apple Keynote Bingo
Randomly generated bingo board generator to play along with during the Apple keynote event
Income Analyzer
November 2015
Income Analyzer
Input your salary to see how it compares against the rest of the 147,351,299 tax filers in America.
Uber Analytics
December 2014
Uber Analytics
Visualizing pricing information retrieved from Uber
August 2014
Interactive game where you eat green food and Watchout! for enemies

Smaller Works

Adaptive Line Chart Scaling (D3.js v5)
Funnel Analysis
California Neighborhoods Icicle
Team Building Activity Completion Times from Average
Uber Logo
Vertical Force Beeswarm with Voronoi
Generative Patterns
Animated Hexagram (Inner Lines)
Animated Hexagram (No Inner Lines)
Hexagram (Inner Lines)
Hexagram (No Inner Lines)
Bl.ocks Layout
Nonlinear Color Scales
South Napa Earthquake
Uber Loading 4
Uber Loading 3
Uber Loading 2
Super Random!
Mapping LA
TopoJSON Map of Los Angeles
Uber Loading 1
Dot wallpaper
Generative art with dashes
Generative art
Individual to stacked area charts
Rock Paper Scissors (Animated)
Kadane's Algorithm
Loading Indicator for Donut Chart
Stretched Chord Headcount vs Requisitions
Linked List
Rock Paper Scissors
Slack loading bubbles
Lever Love (Taskqueue2)
Lever Love (Hire2)
Time to Hire
Conversion rates
Binomial Probability Density
Simple Dots Example
Interactive donut chart with transitions
Adaptive Line Chart Scaling
Layering svg Experiment
Playing with d3.timer()

Written Works

  • All Tags
  • API
  • D3.js
  • JavaScript
  • jQuery
  • MongoDB
  • UX / UI
August 2018/D3.jsJavaScript
How to create live updating and flexible D3.js line charts using D3.js v5 and pseudo-data (interactive tutorial and example)

One of the bigger challenges in visualizing data is making your charts responsive so that they can resize no matter what range of data is thrown at it. Things get even more complicated when the dataset is actually a collection of many individual sets…

May 2018/JavaScript
How to debug an issue in Chrome for iOS using remote debugging

I recently had the opportunity to implement some new visualizations for Uber City Guides . Before launch, we discovered a strange bug that only occurred on Chrome for iOS. Even though there are some helpful guides online on how to debug Chrome…

February 2016/D3.jsJavaScript
Choosing the best numbers in nfl football squares to beat your friends

The Super Bowl Square gambling game is all luck, right? Not according to our calculations. An analysis of all 2,312 NFL games since 2009 revealed guessing certain numbers each quarter can increase your chances of winning. Your best bets are 0,…

October 2015/JavaScriptMongoDB
How to generate time series aggregations in MongoDB using Unix / Epoch timestamps (week over week, year over year, etc. tutorial and example)

ECMAScript5 introduced , a method that returns the milliseconds elapsed since 1 January 1970 00:00:00 UTC up until now as a Number . is the fastest way to record a timestamp in JavaScript [1] , [2] and as such, usage…

June 2015/JavaScript
How to write data to the beginning of a file with Node.js / JavaScript (tutorial and example)

Recently I have had to do a lot of work building infrastructure converting data from .json to .csv . One challenge that presented itself was figuring out a way to prepend / write data to the beginning of the .csv file. There are plenty of use…

January 2015/UX / UI
How Apple can catch up to Google ratings and Yelp reviews overnight

Yelp. The word is synonymous with ratings. Although Yelp is very powerful and has millions of reviews, they have not gained my trust. There are tales of paid Yelp reviews, compromised Yelp reviews, even extortion. To use Yelp, I need to stop…

December 2014/APID3.jsJavaScript
Best and worst times to take an Uber in San Francisco, Los Angeles, and New York

About two months ago, Nicolas and I were curious to see if we could nail down the cheapest and priciest hours to order an Uber. To do this, we requested pricing data from Uber’s developer API at ten minute intervals in three major cities (San…

October 2014/D3.jsJavaScript
How to create adaptive pie donut charts with transitions in D3.js (interactive tutorial and example)

Following up with my last blog post about adaptive line chart graphs ( link ), I decided to apply this same concept of adaptive charts to a pie / donut chart. The goal is to create a chart similar to the one below, which updates to any new data…

October 2014/D3.jsJavaScript
How to create live updating and flexible D3.js line charts using D3.js v3 and pseudo-data (interactive tutorial and example)

NOTE: Looking for the newest version of this tutorial using the latest version of D3.js (v5)? See it here One of the bigger challenges in visualizing data is making your charts responsive so that they can resize no matter what range of data is…

October 2014/jQueryJavaScript
How to modify, filter, and save JSON files locally using jQuery

3/19/2015 Update: I went ahead and created a little application to help make things easier which can be found here There are many API’s available for use, many of which are free and provide lots of fun data…

September 2014/D3.jsJavaScript
How to quickly create randomly generated datasets in JavaScript with D3.js

Often times in JavaScript and D3.js, we want to quickly create randomly-generated, "fake" data on the fly for testing and iterative development. To help speed things up, we can combine the d3.range() operator and the native prototype…

September 2014/JavaScript
Using .reduce() to create arrays and objects in JavaScript

I love functional programming and things just got better because of reduce and reduceRight. In ECMAScript5.1, the Ecma integrated some really common array mutation operations from some popular libraries (underscore, lodash, etc.) and made them…

August 2014/APIJavaScript
How to use the Uber API to get pricing data

Uber opened up their API to developer and as a fun experiment, I decided to play around with the Uber API, collect a few days worth of data and see if any trends were apparent ( ). To make a successful pricing…

August 2014/JavaScript
Fight on! The power of JavaScript closures

The term closure is often thrown around a lot in the JavaScript community however there seems to be a misunderstanding of what this term really means. A closure in JavaScript does not refer to a specific function, but rather the way in which that…

August 2014/JavaScript
Prototypal and pseudoclassical instantiation in JavaScript

In JavaScript, there are four ways to instantiate a new object. This blog post will cover the differences between the prototypal and pseudoclassical instantiation patterns; functional decorator and functional-shared instantiation patterns will not be…

August 2014/D3.jsJavaScript
Type coercion in D3.js

D3.js is an amazing platform that allows software engineers to bind data to each DOM element that exists, or will be, created. This data can then be used to compile graphs, charts, or any other visual means. Last week, I had the opportunity to play…

July 2014/JavaScript
Supercharge your falsey && conditional statements in JavaScript

Over the past few days, I have discovered the large potential of falsey values ( false , 0 , "" , null , undefined , NaN ) to provide direction and simplify code in javascript. If used correctly, one can replace multi-line logical expressions…

See all tags