Larger Works

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

Smaller Works

  • All Sources
  • Bl.ocks
  • Observable
Adaptive Line Chart Scaling (D3.js v5)
Filled Multiplication Table
Multiplication Table
Inputs
Sierpinski triangle
Shaded Pascal's Triangle
Pascal's Triangle
Funnel Analysis
California Neighborhoods Icicle
Hershey Vector Font Explorer
Lévy C curve
Poincaré disk
Circle-Line Intersection
Line-Line Intersection
Poincaré disk with straight lines
Vertical Force Beeswarm with Voronoi
Mapping LA
South Napa Earthquake
Super Random!
Team Building Activity Completion Times from Average
Generative Patterns
Hershey Vector Font Visualizer
Binomial Probability Density
Uber Logo
Generative Patterns
Uber Loading 3
Animated Hexagram (Inner Lines)
Animated Hexagram (No Inner Lines)
Hexagram (Inner Lines)
Hexagram (No Inner Lines)
Time to Hire
Nonlinear Color Scales
Bl.ocks Layout
TopoJSON Map of Los Angeles
Generative art with dashes
Uber Loading 1
Uber Loading 2
Uber Loading 4
Generative art
Dot wallpaper
Individual to stacked area charts
Rock Paper Scissors (Animated)
Simple Dots Example
Loading Indicator for Donut Chart
Slack loading bubbles
Rock Paper Scissors
Playing with d3.timer()
Kadane's Algorithm
Layering svg Experiment
Stretched Chord Headcount vs Requisitions
Interactive donut chart with transitions
Linked List
Adaptive Line Chart Scaling
Lever Love (Taskqueue2)
Lever Love (Hire2)
Conversion rates

Written Works

  • All Tags
  • API
  • D3.js
  • JavaScript
  • jQuery
  • MongoDB
  • UX / UI
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…

Read
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…

Read
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,…

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

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

Read
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…

Read
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…

Read
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…

Read
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…

Read
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…

Read
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 https://github.com/jonsadka/jsonReducer There are many API’s available for use, many of which are free and provide lots of fun data…

Read
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 Array.map() prototype…

Read
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…

Read
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 ( http://jonsadka.github.io/uberAnalytics/ ). To make a successful pricing…

Read
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…

Read
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…

Read
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…

Read
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…

Read
See all tags