Talk at Strata+Hadoop Conference in New York City

1. Visualization Typography:
Designing Legends, Labels, Titles, and Text
Trina Chiasson | @trinachi | infoactive.co

2. I’m a web nerd
I like to make things

3. I geek out on infographics

4. I’ve been thinking about
responsive dataviz.

7. Our data capacity is changing

8. For my parents, data collection was deliberate.

9. But I don’t have to think about data collection.
It just magically happens.

10. Hand-crafted dataviz takes time.

11. Not everyone is blessed with
the innate ability to make
brilliant data visualizations.

12. If you don’t identify the
worst-case scenario,
someone else will.

13. What if we don’t have that luxury?
• We don’t know what the source data looks like
• We don’t know where it will be viewed (desktop, mobile, print)
• Change is a constant

16. Typography usually refers to...
The arrangement of type involves selecting typefaces,
point size, line length, line-spacing (leading), letter-spacing
(tracking), and kerning

17. In visualization, text supports
data comprehension.

18. It’s about the interaction
between shapes and text.

19. In an ideal world,
you start with data collection.

20. Examples of survey questions:
Concise vs. Ridiculous

21. Category labels

22. Here’s a column chart without labels

23. Simple category labels from our concise survey

24. Here’s the same chart with longer category labels.

25. 45-degree rotation on labels. Shorter columns; limited vertical space.

26. What if the extra-long label comes first?

27. You could use line breaks instead.

28. But remember to include margin, or it might look awkward.

29. Too many columns
or not enough screen width
will complicate things.

30. You could combine line breaks with text rotation.

31. Or you could truncate extra long labels. But is this chart easy to understand?

32. You can expose the full label on hover. But that’s not ideal.

33. You could use a bar chart instead.

34. This is okay when you have a lot of horizontal real estate

35. But it’s not so cool when
horizontal space it limited.

36. You could conceivably
color-code the bars.
Please don’t ever do this.

37. Ah, this is readable.

38. And it’s okay to have healthy
boundaries.
You shouldn’t need to show a
whole paragraph in a single label.

39. What about other
chart types?

40. It’s best to place labels near the things they represent

41. But this isn’t always easy. Can you read this?

42. Apps usually use legends to handle this challenge on line charts.
It’s okay, I suppose.

43. Apps usually use legends to handle this challenge on line charts.
It’s okay, I suppose.

44. This can spiral out of control. The text is legible, but the chart is not.

45. In this case, hover interactions might help.

46. Yet again, we should place labels near the things they represent

47. This isn’t the most amazing chart. But the category labels are clear.

48. This breaks down when space is limited.
Pies are especially tricky because the chart
width and height can’t be re-sized at will.

49. You can move the legend based on the
width/height ratio of the containing box.

50. But this breaks down when
you have a lot of text
or a lot of pie slices.
Another good reason not to make
pie charts with lots of slices :)

51. Data labels

52. Data labels can replace gridlines and add clarity.

53. But be careful. Labels can make the bar length look too long.

54. You can place the data labels inside the bars.

55. This only works if the shortest bar isn’t too short

56. All data labels need a minimum bar height or column width

57. You can make the text smaller. But you can only go so far.

58. Sometimes the data labels are too long to fit in your chart

59. Gridlines to the rescue!

60. How it all fits together

62. Text should be easy to read.

63. Text should help you
understand the data.

64. Questions?
Trina Chiasson | @trinachi | infoactive.co