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.
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.
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.
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.
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.