Episode 07: How to Annotate Like a Boss! Featured Viz by Susie Lu

Susie Lu. Image via  LinkedIn .

Susie Lu. Image via LinkedIn.


Welcome to episode 7 of Data Viz Today. How can you annotate your chart like a boss? This episode features Susie Lu's data visualization where she visualized Emmy nominations in a clear and concise way. Susie is the Queen of annotations - she's the creator of the popular D3.js library that gives you the ability to customize annotations and labels. In this episode, we dive into the important aspects of an annotation, and how you can best implement them in your work.

Listen on Apple Podcasts, Google Play, Google PodcastsStitcher, SoundCloud & Spotify.

"Netflix Challenges HBO at the 2017 Emmys" via Susie's  website .

"Netflix Challenges HBO at the 2017 Emmys" via Susie's website.

  • Welcome! I'm Alli Torban.

  • 00:22 - Today’s featured viz “Netflix Challenges HBO at the 2017 Emmys” by Susie Lu

  • 01:00 - Her punchy viz made me wonder what are some guidelines around using annotations? How can we effectively annotate our work?

  • 01:10 - Susie Lu is a Senior Data Visualization Engineer in the San Francisco Bay Area

  • 01:25 - Question that Susie wanted to answer: How do the emmy nominations for HBO compare to Netflix?

  • 02:00 - Her inspiration was a bar chart and she did a makeover by changing it into a line chart. Making the story the nominations over time rather than a snapshot of the 2017 results made her line chart really effective. Consider: is your story about the snapshot of data, or is your story really about how the values are changing over time?

  • 03:00 - Biggest challenge was gathering the data, but her colleague Noah Veltman gave her some tips on how to gather it using JavaScript scripts.

  • 03:25 - She changed the lines for the other networks into dotted lines so that your attention would immediately be on HBO and Netflix, but that data would still be there for comparison.

  • 03:38 - She also removed the legend and added the names of the networks at the end of the line on the right-hand side. Greatly improves readability.

  • 04:00 - Chart was built using d3.js and another version with React and Semiotic.

  • 04:15 - She utilized a great “takeaway title” as Cole Knaflic calls it.

  • 04:37 - She removed the horizontal grid lines and y-axis labels to make it look cleaner

  • 04:50 - She added circles with the number of Emmy nominations inside to the HBO and Netflix lines so you can quickly absorb the information.

  • 05:14 - She moved the x-axis labels up to be within the chart.

  • 05:40 - All of these changes result in a frictionless viz.

  • 06:50 - What is an annotation? Nathan Yau’s book Data Points says that annotations are an extra layer of information on top of a visualization that provides context and directs readers to points of interest.

  • 07:20 - Keep in mind the visual hierarchy of your annotations to direct the reader to what’s important (use size, color and placement).

  • 07:30 - Options for annotations: headers (your takeaway title), lead-in text (below the header that describes more details about the data), subheader and explanatory text within the chart that can use circles/arrows/lines to call attention to points of interest.

  • 08:08 - Make sure your annotation is explaining the context of your data; consider what your audience might not understand graphically or statistically.

  • 09:10 - Other ideas of things to annotate: high/low values, outliers, averages, events in time, group items with similar attributes, totals/subtotals, note with an expert’s interpretation, or how to interpret the axes.

  • 09:40 - Ask someone outside your field to read your chart to see what they don’t understand and try to annotate based on their confusion.

  • 10:25 - Annotations can be hard in tools. Datawrapper, ChartAccent, and Tableau are good options but each with their limitations.

  • 10:45 - If you’re using d3.js, you might have been frustrated with the difficulty of customizing annotations. Susie built a popular library that allows you to manually position annotations and move labels around.

  • 11:15 - Susie uses the framework of subject (thing you’re annotating), note (your text), and connector (the line/arrow).

  • 11:25 - Check out her library and amazing documentation here!

  • 11:50 - My inspired viz is a line chart on D.C. residents’ means of transportation to work.

  • 12:10 - Implemented a takeaway title, lead-in text, made the unimportant lines grey, removed the legend and added the labels to the ends of the lines, added an annotation to the car/walk/bike lines describing how much the value has changed over time, and moved the x-axis labels up into the chart. Final viz below.

  • 13:30 - Summary: use annotations to provide context and point readers to points of interest. Keep it simple, and create a clear visual hierarchy.

  • 14:30 - Susie’s advice to designers just starting out: “To me data viz is a subset of design. Go through the design process of sketching out wireframes and making prototypes before building anything. This separation of design and implementation allows you to iterate, get feedback, and in the end mitigate time lost on building out poorly designed prototypes.”

  • 14:56 - Susie’s looking forward to trying out Observable, which is a creation of Mike Bostock that launched earlier this year. It’s a web-first interactive notebook for data analysis, visualization, and exploration.

  • 15:10 - Susie’s website and twitter @DataToViz

  • 15:35 - Follow me on twitter @DataVizToday!

  • 15:45 - Subscribe to the show so you never miss an episode. :)

New episodes are released every Tuesday at 6 AM EST. 

My inspired viz.

My inspired viz.