Annotations establish context, and direct our users to insights and anomalies. I made d3-annotation to tackle this problem, however most of our apps are built in React. The design is heavily based on d3-annotation, with a few differences, two new annotation types, and easy to compose annotations.

Go to the full documentation , see the code on github, or edit an example on CodePen.


d3-annotation 2.0

Updates 8/3/17

The goal of this upgrade is to make the library easier to use. The main change is custom styling is built in, no longer needing a css file, and you can set a color property to change the color of the entire annotation for easy styling.


Emmys 2017

Chart Makeover

A makeover of the Emmy nominations in the last five years.


Bundle Buddy

Data Visualization to find code duplication

When building a complex JavaScript application, it is common to minify code and bundle files together to optimize network requests so the app loads faster.


To help with this balancing act, Sam and I made Bundle Buddy (demo) specifically to determine if your bundles are duplicating too much code at the cost of reducing the file count.


d3.annotation: Design & Modes


In today's data visualizations, annotations are few and far between. When you do see them they are all styled the same and only discussed as part of the final product in a context-setting mode.

There are many more ways they could be used to better communicate with our audiences. In this post I discuss two topics Annotation Design and Annotation Modes to explore more uses for annotations.


d3 Annotation

A d3 module

Annotations establish context, and direct our users to insights and anomalies. So why are annotations so few and far between in visualizations on the web? Because implementing annotations is difficult.

But it shouldn't be.

Use d3-annotation with built-in annotation types, or extend it to make custom annotations. It is made for d3-v4 in SVG.

Go to the full documentation or download the code from github.


Flight Delay Circle Pack Labels

Blocks Example

A technique to hack the current d3.layout.pack to add labels by adding a label node into the circle pack data before it is processed.


Radial Weather

Blocks Example

This example uses scales to roll your own radial projection by mapping out the x, y, and r positions.


d3 Legend

A d3 module

Tired of making legends for your data visualizations? This is a legend component for d3 that creates color, size, and symbol legends based on the d3.scale you pass it.

Go to the full documentation or download the code from github.


Getting from Data to Visualization

Explanatory Post


Someone recently asked me about my process from brainstorming through to delivery; it was a great question without a very straightforward answer so I wanted to share my thoughts more broadly and invite others to do the same.

To start, I interview the customer to understand the end goal. (This can also be conversation with yourself if it’s a personal project). Aside from understanding the background information, I always want to learn the following: What is the main point we want to make to our audience? If there are multiple goals, how can we prioritize them? Knowing these answers helps me decide on the hierarchy of ideas to visually emphasize. At this stage, there is very little discussion about the look and feel. That will emerge with time: the longer you can postpone pigeon-holing the design, the better.


U.S. Congressional Districts

Using data visualization to examine gerrymandering in the United States.


History of Rock


One hundred Rock songs from the Guardian sparked an investigation on the influencers of Rock.


Hotshot Charts


Examining NBA teams by assists and each player's shot record.