Hi, I’m

Amelia Wattenberger

I write code, think about data, and create digital experiences.
Currently Principal Research Engineer doing R&D on developer experience on the Github Office of the CTO team.

Listen to podcasts I've been on, or read articles I've written.

Projects

Development & Data Visualization

Debate Games

Tools Used
D3.js
React.js
SVG

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.

Check it out ⇛
Development & Data Visualization

Intro to D3.js

Tools Used
D3.js
React.js
SVG

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!

Check it out ⇛
Development & Data Visualization

Interactive Charts with D3.js

Tools Used
D3.js
React.js
SVG

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.

Check it out ⇛

Fullstack D3 and Data Visualization

Tools Used
D3.js
SVG
Words

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.

Check it out ⇛

Illegal Foreign Fishing

Tools Used
SVG
D3.js
Python

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.

Check it out ⇛

What makes a Good Country?

Tools Used
SVG
D3.js
Three.js

A brief dive into combining many metrics to decide what makes a country Good. There are three distinct visualizations here, exploring:

  • What countries are similar (below)
  • How can we group countries based on 27 metrics
  • How countries rank along your own custom Axis of Goodness
Check it out ⇛
Countries similar to
United States
Most Similar
Australia,Japan,Chile...Laos,Eritrea,East Timor
Least Similar
Distinctive metrics
GDP (billions PPP),health expenditure per person,civil liberties score,health expenditure % of GDP,population

Dog Names in NYC

Tools Used
d3.js
SVG

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!

Check it out ⇛

Dog Breeds

Tools Used
d3.js
SVG

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!

Check it out ⇛

Sketches

Tools Used
HTML Canvas
D3.js

Once code sketch a day, usually dealing with HTML canvas animations and quick generative art.

Check it out ⇛

Weather Circle

Tools Used
Angular
D3.js
Dark Sky Forecast API

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.

Design & Development

Unbiased News Aggregator

Tools Used
Sentiment
React.js
RSS parsing

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.

  • Stories are often biased towards the viewpoint of a political parties.
    Solution: I aggregate stories from the most un-biased, fact-based publishers (based on Ad Fontes Media's Media Bias Chart).
  • One story has the tendency to flood public attention.
    Solution: I added a filter to hide stories with specific words in their title or description.
  • News stories are overwhelmingly sad and upsetting, which can be compelling to avoid all news.
    Solution: I added a sentiment filter so a reader can only see stories within a specific range -- only happy stories, or only sad stories (but why).
Check it out ⇛

Umbel SXSW Party Photobooth

Tools Used
C++
Xcode
Open Frameworks
React.js
Amazon Web Services
SCSS

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.

Other

Foosball Table

Tools Used
3D Printer (Ultimaker 2)
Laser Cutter
Cinema 4D
Blender

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.