This post describes the role of abstractions, and the importance of creating landmarks between layers of abstraction in data visualization.
Part 1 of 3 from my Data Visualization Retrospective talk at Visfest 2019
A summary of the design, the process, and the reception of a side project where I re-designed the receipt with data visualization.
Designed and implemented the remake of Semiotic's Documentation site. Semiotic is a React data visualization library created by Elijah Meeks used extensively in the visualization apps on our team at Netflix.
It was also used to create the Strong Openers and Late Bloomers project.
Born out of a frustration with picking colors for data visualizations. This project is optimized for tweaking, copying, and pasting in and out of JavaScript.
Commonly explanatory data visualization e.g. scrollytelling is framed has having a story, and exploratory data visualization e.g. dashboards is framed as not having a story.
This post examines that framing in three sections:
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.
A remake of The Ebb and Flow of Movies by the New York Times.
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.
A makeover of the Emmy nominations in the last five years.
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.
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.
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.
A series of data visualizations on Farmers' Market data from data.gov
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.
When you're learning Chinese, one method for looking up characters is by their radical ( Wikipedia).
This example uses scales to roll your own radial projection by mapping out the x, y, and r positions.
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.
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.
Using data visualization to examine gerrymandering in the United States.
One hundred Rock songs from the Guardian sparked an investigation on the influencers of Rock.
Examining NBA teams by assists and each player's shot record.
