Visualization Typography:Designing Legends, Labels, Titles, and Text

Trina Chiasson | @trinachi | infoactive.co

I’m a web nerdI like to make things

I geek out on infographics

I’ve been thinking about responsive dataviz.

Our data capacity is changing

For my parents, data collection was deliberate.

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

Hand-crafted dataviz takes time.

Not everyone is blessed with the innate ability to make

brilliant data visualizations.

If you don’t identify theworst-case scenario,

someone else will.

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

Typography usually refers to...

The arrangement of type involves selecting typefaces, point size, line length, line-spacing (leading), letter-

spacing (tracking), and kerning

In visualization, text supportsdata comprehension.

It’s about the interactionbetween shapes and text.

In an ideal world,

you start with data collection.

Examples of survey questions:Concise vs. Ridiculous

Category labels

Here’s a column chart without labels

Simple category labels from our concise survey

Here’s the same chart with longer category labels.

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

What if the extra-long label comes first?

You could use line breaks instead.

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

Too many columns or not enough screen width

will complicate things.

You could combine line breaks with text rotation.

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

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

You could use a bar chart instead.

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

But it’s not so cool whenhorizontal space it limited.

You could conceivably color-code the bars.

Please don’t ever do this.

Ah, this is readable.

And it’s okay to have healthy boundaries.

You shouldn’t need to show a whole paragraph in a single label.

What about otherchart types?

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

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

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

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

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

In this case, hover interactions might help.

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

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

This breaks down when space is limited.

Pies are especially tricky because the chartwidth and height can’t be re-sized at will.

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

But this breaks down whenyou have a lot of textor a lot of pie slices.

Another good reason not to make pie charts with lots of slices :)

Data labels

Data labels can replace gridlines and add clarity.

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

You can place the data labels inside the bars.

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

All data labels need a minimum bar height or column width

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

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

Gridlines to the rescue!

How it all fits together

Text should be easy to read.

Text should help you

understand the data.

Questions?

Trina Chiasson | @trinachi | infoactive.co