Text and Visualization Workshop at ESAD Vallence

I had the good fortune to be invited to speak at a workshop late last year at the ESAD design school in Valence France:

ESAD Valence. It’s an awesome roof!

The workshop was titled sous le texte la carte: La visualisation du texte en cartographie. Although the title focused on text and cartography, the presentations were a bit broader, extending to visualization and other applications.

Before the start of the workshop, I was invited to a design review for a variety of student projects using interactive type. I was expecting to see some videos or maybe some processing: instead, it was all HTML5 + Javascript. As explained to me later: there are no jobs for processing – all the employers want Javascript, so they have shifted a lot of the interactive typography to Javascript now. Projects experimented with techniques such as interleaved text, animated blurs, superimposed scrolling text, interactive hierarchies, and so on within dynamic layouts.

Interactive type projects by students at ESAD Valence.

With regards to the workshop, there were a number of good presentations. However, my French isn’t great, so I wasn’t able to follow the discussions closely. Here’s a great slide regarding typography on historic french maps by Jean-Luc Arnaud (http://www.cartomundi.fr/site/#): note the use of different sizes, allcaps/lowercase and italics, to create an ordering of labels for use on different maps.

Labels for maps varying in size, capitalization and italics.

Jean Luc also presented some of his contemporary typographic maps. Not quite like Axis Maps that some readers may be familiar with, these maps superimpose text over other text and don’t repeat labels:

Small portion of one of Jean Luc Arnaud’s typographic maps.

This was followed by a highly interesting presentation on the use of standardized symbols on shipping navigation maps by Anais Déal. Being important navigational aids, one would hope that these international symbols would be consistently implemented by various national map makers. Unfortunately, they are not. Here’s some examples:

Standard international symbols on marine navigation maps don’t quite follow the standards.

Sophie Boiron and Pierre Huyghebaert showed some historic heavily labelled maps and then showed this fantastic typographic map they created. At a distance, it’s a map of Brussels (left). Zoomed way in, each block is a sentence of text (right):

Boiron and Huyghebaert’s thematic map, with each polygon made of a descriptive sentence.

I find this example particularly compelling from a text visualization perspective. One can imagine using the same technique with choropleth maps, cartograms, treemaps, hierarchical pies or any space filling visualization technique. At a macro level, the areas are highly visible and you can use color to indicate a thematic variable. At a micro level, you’ve got detailed text — not just labels, but the opportunity for explanations, descriptions, details and even a few icons.

Antoine Gelgon and Pierre Huyghebaert presented an extremely detailed analysis of all the variation in the lettering of the famous belgish comic Gaston, going deep into the technical constraints of pens that were used, touch-ups with whiteout and so on. Then, super interesting, they created a parametric font following the same approach as Don Knuth’s Metafont. The result is a variety of tweakable parameters to create computer-generated hand-lettered text for future comics and presumably merchandise:

Gelgon and Huyghebaert’s parametric font for recreating lettering for the comic Gaston.

The final presentation the very important topic of type legibility in visualizations and more broadly user interface design. Specifically, the design task was to revise the font used in displays in aircraft and air traffic control systems. The presentation showed a number of interfaces with various issues, such as low contrast, glare and other real-world operational issues with the existing displays:

Left: visual display in cockpit under ideal conditions. Right: same display with glare.

Furthermore, the existing font had the potential for confusion as the displays often had codes that combined alphabetic characters with numeric characters. With detailed user testing, the design team identified the most confusable glyphs (e.g. B/8) and iteratively designed a new font to minimize these issues, suitable for use on industrial display screens even with low pixel density. The result is the font B612. A subset of the font is freely available for download (e.g. google fonts).

Left: example glyph confusion matrix. Right: example design adjustments to reduce confusion between similar shapes.

All-in-all, a highly relevant workshop to visualization dealing with text visualization issues ranging from interaction techniques, novel layouts, to parametric text, to type legibility. And, Valence is a pretty town, worth adding a stop if you’re visiting southern France. Here’s a couple of tourist photos of the market on Saturday morning and a typographic sculpture:

About richardbrath

Richard is a long time visualization designer and researcher. Professionally, I am one of the partners of Uncharted Software Inc. I have recently completed a PhD in data visualization at LSBU. The opinions on this blog are related to my personal interests in data visualization, particularly around research interests related to my PhD work- this blog is about exploratory aspects of data visualization not proven principles.
This entry was posted in Data Visualization, Design Space, Legibility, parametric fonts, Text Visualization, Thematic Map. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s