I teamed up with a friend on a game for people to play during the 2020 United States Democratic Primary Debates. While they watched, users could click on a candidate's balloon when they agreed with what they were saying.
At the end, we have a quantified metric for how well each candidate resonated with players. It was really fun to create an in-browser game, and figuring out the best ways to sync the game with an external video.
D3.js is the de facto library for drawing data visualization on the web. Unless you are very intimately familiar with the API, you probably view it as a monolithic framework, and make charts by copy + pasting code from bl.ocks.
In this extensive article, I talk about every individual D3.js module, and how they factor into your goals. Writing this article was really rewarding, since I got to delve into parts of the API that I had never looked at before. For example, the different geographic projections and polygon methods will definitely come in handy in the future!
This article is the first in a series, showing how to make your web charts interactive. It runs through two ways to add a tooltip to a histogram, while trying to show how to generalize this knowledge to create your own custom interactions.
I love experimenting with taking advantage of the web to innovate on teaching. I experimented with ways to consistently keep the main code to the right of the article, which really helps keep changes in context.
There are some really interesting bits of code involved in making this article - check them out in this website's repo.
Having spent ten years teaching myself D3.js and designing dashboards and data visualizations, I wrote the book that I wish I could have read.
While most books teach data visualization design or development or theory, my book combines all three while walking through practical examples. You'll create your first chart by the end of the first chapter - download the first chapter for free right now.
A weekend exploration of fishing in foreign waters - most of the work was analyzing a 7 million row dataset!
Each circle is a unique profile of a country that illegally fishes in other, often poorer, countries’ waters. Data collected by Global Fishing Watch which used AIS tracking devices, among other data sources, to monitor commercial fishing activity and larger boats.
A brief dive into combining many metrics to decide what makes a country Good. There are three distinct visualizations here, exploring:
I found this great dataset of registered dog names in New York City and had to dig in. Did you know that Yorkies are the most common NYC dog? Or that a dog named Molly is most likely a Lab from Staten Island? Explore for more important dog facts!
I found another great doggy dataset of breed popularity over time from the American Kennel Club. This chart was an experiment to test out a new kind of tooltip that scrolls a list - check it out and tell me what you think!
Once code sketch a day, usually dealing with HTML canvas animations and quick generative art.
After Umbel moved into its new office in the old Power Plant, we wanted to make a great first impression with our entrance screens. I wanted to build an interface that keeps visitors and employees informed about the weather, especially useful for planning the best bike ride home.
I built a standalone web app that pulls current weather data from the Dark Sky Forecast API and displays today's temperature, precipitation, and sunset forecast. A clock-like layout keeps the interface familiar and easy to understand.
There are many issues with how we receive our news (in the United States). I created a news aggregator (largely for personal use) that attempts to solve three core issues.
In 2015, Umbel hosted an official SXSW party (with Spoon!). To incorporate our brand and liven up the VIP section, I build a virtual photobooth that superimposes a luchador mask on guests’ faces.
I built a C++ app that detects faces from a webcam feed in real-time and renders a mask over anything that looks like a face (based on some training data). The face is broken into sections, and the mask is stretched to fit the different parts of the face, which makes it pretty realistic, even when someone is talking. The user can use a foot pedal to either cycle through the faces or take a picture.
If you look closely, you can see people’s concentration as they try to balance and take a picture. Additionally, I built a web app to show the photos in real-time and allow people to share on social media.
Read more about the construction on the Umbel Engineering blog.
From time to time, I find myself being more ambitious than I have time for. In Fall 2015, I started with the idea of scanning coworkers and replacing the players on a foosball field with their 3d-printed heads, and ended up building a whole table from scratch.
I used Adobe Illustrator to create a design for the table, and reproduced it in Cinema 4D to get an idea of how it would look when finished. A coworker, who happens to be an amazing woodworker, turned the bed design into a real, wooden table. Along with another coworker, I cut and etched the field out of a sheet of brand-colored acrylic, using a laser cutter.
All 26 foosball players’ bodies have been 3d printed, with a threaded hole in the top for the heads to screw into. One by one, I am molding 3D scans of coworkers and printing them with screws on the bottom. Sometime in the next month, the players will be installed, along with LED lights around the field that change color when the ball is hit.