d3.annotation: Design & Modes

4/20/2017

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.

post

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.

d3-annotation-updated

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.

flight-delay

Radial Weather

Blocks Example

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

weather-radial

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.

d3-legend

Getting from Data to Visualization

Explanatory Post

figure3

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.

Gerrymandering

U.S. Congressional Districts

Using data visualization to examine gerrymandering in the United States.

gerrymandering-small

History of Rock

Viz

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

rock

Hotshot Charts

Viz

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

hotshot