We show that many different set visualization techniques can be extended with the addition of labeled elements using font attributes. Elements labeled with font attributes can: uniquely identify elements; encode membership in ten sets; use size to indicate proportions among set relations; can scale to thousands on clearly labeled elements; and use intuitive mappings to facilitate decoding. The approach can be applied to many different set visualization layouts, including Venn and Euler diagrams, graphs, mosaic plots and cartograms.
Alsallakh’s STAR report provides a broad collection of set visualizations, tasks and applications. It identifies 26 set analysis tasks, of which 7 are element related (e.g. A1: find elements that belong to a specific set) and 5 more are related to attributes on elements (e.g. C1: find the attribute values of a certain element). The other 14 tasks are about set and set relations, some of which are also about elements, such as summaries of elements (e.g. B10: comparison of set intersection cardinalities) or element exclusivity (e.g. B12: does one set contain more exclusive elements than another set).
Given the importance of elements to set analysis, it is useful to consider how elements are represented. This includes whether they uniquely identify the element and how they convey multiple data attributes. In the STAR report there are 28 examples with elements. Those elements are represented as:
Dots. Simple dots are often used to represent one or two data attributes, such as
color or brightness to identify set membership. For example, TwitterVenn [
Labels. Labels can uniquely identify items. In all cases additional attributes were
not encoded in labels, but rather other visual attributes such as the background
color, lines connecting labels, etc. e.g. ComED [
Images. In 3 cases, images are used. In two of these the images supplement
otherwise undifferentiated labels (BubbleSets [
Shape. In one case (fig. 1 right) unique shapes of countries identify the individual elements, assuming that the viewer has a reasonable geographic literacy.
In no case do the element representations illustrated in the STAR report use more than two visual attributes. For example EulerGlyphs uses hue and outline to encode memberships. Although there is some use of labels and/or a visual attribute or two to indicate elements in sets, the existing use suggest that much more could be done: Identifiable Elements. Uniquely identifiable elements adds information and context regarding the members of the sets which may be relevant to the task. Viewers can use their existing knowledge regarding the specific elements to augment their understanding of the sets.
Multi-attribute Elements. Adding more data through different visual attributes can help identify elements, membership in sets or other data. 2.2
While identifying individual elements with multiple data attributes per element may not occur frequently in set visualization, other examples can be found more broadly in data visualization.
Borgo et al.’s state-of-the-art report on glyphs [
Brath [
Given the challenges of glyphs, text is an alternative that can be readily used to uniquely identify hundreds to thousands of elements. In cartography, fonts have been used for centuries to uniquely identify geographic features. Text offers some interesting additional capabilities beyond glyphs which we will discuss in the following subsections. 3.1
In paper-based cartography, minimum font sizes are defined as 3 or 4 point [
Historically, text in visualizations was limited due to low resolution displays (72-96 pixels per inch). More recent devices, including phones, tablets and PCs, have significantly increased pixel densities. Current Apple guidelines recommend a minimum size of 13 “CSS points” which renders physically at 3.1 points on an iPhone 6plus.
Text in print environments can go even smaller: microtext is extremely small sized text and originated as an anti-counterfeiting device for banknotes and official government documents as well as archival texts. Microtext can be clear at extremely small sizes, although the ability to decipher the text depends on the eyesight of the viewer. 3.2
Text can be perceived as an even textural tone due to a unique feature of typography
referred to as color by typographers. A well-designed font has an even distribution of
text ink across a sequence of letters regardless if the letters are sparse (e.g. i,v) or dense
(e.g. m, e). In figure 2, the apparent shading behind the large word CANADA in the
center of the banknote can be perceived as text on close inspection. This even density
of type is used in Typographic Maps to indicate lines and regions with blocks of type.
Another unique feature of typography is the use of font-specific attributes, such as bold
and italic, to indicate additional data in text labels such as set membership. In 1920’s
Ordance Survey maps [
Case differentiates between town (uppercase) vs. village (lowercase).
Italics are used to indicate an administrative centre, i.e. a county town. Font size is used to indicate population category.
Font family indicates country: serif for U.K., slab-serif or serif variant for Scotland.
In text visualization, additional visual attributes are used on text in less than half of 249 peer-reviewed text visualizations at Text Visualization Browser (textvis.lnu. se) as of 01/22/2016. 40 have no text, 103 have plain text and 106 use text with visual attributes to encode additional data. Of the 106 using visual attributes, most use either color or hue: typographic specific attributes such as bold, italic and case occur in only 15 examples, and typically only a single additional attribute (e.g. highlight with bold).
Brath and Banissi (e.g. [
Symbols (e.g. ¥; 8; [; ~; \). Unlike alphanumerics, symbols are not orderable. Weight may include variants such as black, bold, book, light or extra light. Italic and Oblique are both sloped fonts but italics have different letterforms. Italics may occur at different slope angles, including reverse (sometimes used on maps). CASE includes UPPER, lower, Mixed and SMALL CAPS.
Typeface indicates font family, e.g.: sans, blackletter, script, source, etc. Underline also has many variants, e.g. w::a:v:e, .d.o.t., dash, double.
Width may be adjusted with font variants (e.g. condensed, expanded), by scaling type (not recommended by typographers), or adjusting inter-character spacing. Baseline shift. Can used together with size change creates subscript and superscript. “Paired delimiters” evoke enclosure by pairing shapes around text, e.g. ({},“ ”,* *) Furthermore, these font attributes are distinct and can be used together in any combination, for example: italic + CASE + UNDERLINE + BOLD + WIDE. However, the authors do not provide any examples with more than 2-4 font attributes in prior work nor application to sets. 4
There are many potential benefits to using text and font attributes in set visualizations: 1. Labels can uniquely depict elements. Furthermore, supplemental graphics, e.g.
dots, image, etc. are not needed (e.g. ComEd in fig. 1). 2. Font Attributes can be used to encode set membership, thereby providing clarification to some types of set visualizations where element membership may be otherwise ambiguous (e.g. graphs, or maps as in fig. 3). Given the large number of font attributes (10) plus traditional visual attributes (e.g. hue, intensity, orientation), a large number of sets can potentially be encoded. This is a unique contribution. 3. Area Proportions can be represented with text-based set elements. At a macrolevel, a block of text can be seen as a texture covering an area. At a micro-level the individual text elements can be read (as in fig. 2). This is a unique contribution. 4. Layout Agnostic. Labeled, font-attribute elements can be used across a wide variety of set visualization approaches, including Venn and Euler diagrams, mosaic plots, graphs, maps and so on.
The following examples show different set visualizations techniques extended with labeled font-attribute elements. 4.1
Slope indicates the political party membership. Right-leaning text indicates Republicans, while left-leaning text indicates Democrats. Independents are represented with no leaning at all.
Bold indicates senators who have served more than one term.
Underline indicates senators who have a graduate or professional degree.
Hue indicates gender: blue for male, magenta for female.
Beyond the four sets depicted by the Venn diagram, additional data is encoded:
Font family indicates ethnicity. Most senators are plain Caucasians (in a sans serif font), with a couple Latinos (in a curvy font), an Asian-American (in a serif) and a couple African-Americans (in a rectangular font).
At the level of individual elements, the names of individual senators are readable. Set memberships can be seen, either by assessing the containment of elements relative to the set outlines, or by the font attributes. For example, MAZIE HIRONO is a female (purple), Democrat (left-leaning italic), over age 65 (all caps), first term senator (not bold), with an advanced degree (underline), and is an Asian-American (serif). BERNIE SANDERS is male (blue), independent (no italics), over age 65 (all caps), multi-term senator (bold), with no advanced degree (no underline), and is Caucasian (plain sans serif font).
At a macro-level, the use of stacked text elements allows stacks to be visually compared similar to bars in a bar chart. The viewer can attend to the stacks without regard to the individual names. Many visual comparisons of quantities can be done at the level of set relations. e.g.
There are no first-term Democratic women without an advanced degree.
Instead of using an area-proportional Venn diagram, the use of stacked text elements
allows for the separation of the depiction of logical relations (i.e. the curved lines and
fills depicting each set) from the quantities of elements (i.e. stacked text). Issues with
attempting to algorithmically size areas of Venn outlines so that areas represent
quantities are easily side-stepped, e.g. [
A larger scale example is the data repository encyclopedia-titanica.org, which provides detailed biographies of 1308 passengers of the Titanic. However, one must either search or browse through lists of names: a macro view of the passengers is not available on this site.
Figure 5 is a typographic mosaic plot of Titanic passengers indicating class (horizontal bands 1,2,3), survivors (vertically: green survive, red death), and differentiates between men (cranberry/forest green) vs. women and children (orange/chartreuse) in horizontal slices. In a mosaic plot, areas represent quantities. In this plot the higher death rate of third class passengers is immediately obvious.
Within each box of the mosaic plot are the passenger names. At a micro-level the names of individual passengers are visible. A small but readable six point font links to biographies. Font attributes redundantly encode data: italics for women and children; plain roman for men. Sans serifs for survivors and serifs for the dead. Figure 6 shows a closeup near the center of the plot.
One problem using text labels to create quantitative areas is the potential bias in sizes that can occur if there is a concentration of particularly long labels in an area. For example, surviving first class women and children names are on average 36.7 characters long while deceased third class men average only 22.0 characters - the names former segment are 67% longer than the latter. In this example, names have been shortened to a familiar name and a surname, so that all passengers are reduced to similar visual length. For example the passenger Cardeza, Mrs. James Warburton Martinez (Charlotte Wardle Drake) is recorded with eight words in the passenger list, and is reduced in the visualization to Charlotte Cardeza; while Bird, Miss Ellen is visualized as Ellen Bird. When the passenger name length is reduced to two words, the above two segments are 13.9 and 13.6 characters respectively - a 2% difference.
Another consideration is box size. The algorithm used here nudges rectangle sizes larger to fit text. As a result, there is a margin of error between the areas if represented accurately compared to areas adjusted to fit text. This is most acute at the smallest sizes (as shown in the fourth column of table 1). For example, the thin orange box in fig. 5 (representing deceased first class women and children) has only 7 members and the height of the box is 8 points tall instead of 6.5 points tall - making this rectangle approximately 20% larger in area than it should be.
There are other considerations as well for using text in the areas. The minimum height for a box is related to the height of a single line of text; whereas the minimum width for a box is related to the width of a word - which is a much larger size than height. The first version of the Titanic passenger mosaic plot (fig. 7 right) created splits in the opposite orientation resulting in many tall narrow boxes. These tall narrow boxes when adjusted for minimum widths, resulted in higher error rates, as shown in the sixth column of table 1.
Node-link diagrams (i.e. graphs) are sometimes used to represent sets. In anchored
maps [
Node-link diagrams have scalability issues. With few elements, links can clearly show which set an element is connected to. However, when the number of elements is high, the many overlapping links makes it difficult distinguish membership.
Instead, element membership in sets can be encoded in font attributes. Links can be de-emphasized to reduce clutter leaving visible clusters of labels. Clusters can be visually inspected. If none of the elements stands-out from other elements in the cluster, all the font attributes are the same across elements and the cluster is homogenous. Furthermore, font attributes can be used to decode memberships.
The typographic graph in figure 8 depicts 4463 words associated with 8 emotions
(based on [
There are 140 unique set relations out of 256 possible. A portion of the graph interior is shown in figure 9. Near the bottom left is a small cluster of words such as SIMMER, SUSPICIOUS and SHARPEN - this entire cluster is homogenous with blackletter caps indicating angry anticipation. To the right is a cluster immediately visible as heterogeneous; with words such as WORRY, WILDERNESS and PLEA in underline lightweight caps indicating fear, sadness and anticipation. However, two other words positionally close to these words have different very memberships as indicated by their attributes: p i o u s, in spaced italics indicates both disgust and trust, while liquor in a blackletter with a shifting baseline indicates both anger and joy - the latter two words both being singlular elements in these particular set intersections.
Unlike the Titanic example, variance in word length was not addressed. The average word length is 7.63 characters. For the 24 largest clusters (each more than 50 words), the standard deviation is 0.36 characters. However as clusters become smaller, there can be wider variation: the 10 words in angry surprise average only 6 characters.
Instead of focusing on area accuracy, the design attempts intuitive encodings. Anger words are in a blackletter font - sometimes associated with angry heavy metal bands. Surprise adds an exclamation mark - literally a mark indicating astonishment. Fear uses an underline - as the word line is associated with emotion fear in the lexicon. Joy uses a baseline shift - making the word appear bouncy. In addition, interactive techniques, such as mouseover links or tooltips, can be used to clearly indicate memberships. 4.4
Set elements are sometimes depicted on a map, such as geographic regions (e.g. countries, states, counties) or points (e.g. gas stations, hospitals, etc.) Set membership might be indicated by textures, icons, overlaid blobs, etc. Figure 10 is a closeup view of a map indicating many different types of risk associated with each country via icons. Long lines of icons require leader lines in congested areas. Countries are coloured by summaries, but tiny countries are teeny dots difficult to see when zoomed out.
Encoding a high number of set memberships can also be done with positional encoding. If labels are constrained to a fixed length (e.g. country ISO codes), then font attributes can be applied to each character separately. For example, USA, CAN, DEU, etc have bold applied to the first, second or third character independently to indicate set membership in three different sets.
Extending this across a variety of font and other visual attributes suggests a possible 20 or more unique indications of set membership into a single label. Figure 11 shows a typographic cartogram, where each country label indicates set membership by the formatting of each character. In this example, nine set attributes are conveyed in the labels, plus the background colour and the literal label. Countries with no risks are plain (e.g.
USA), countries with all risks are completely bold, italic and underline (e.g. Ethiopia ETH) and those in-between have only some combination of attributes (e.g.Brazil BRA). 5
The use of text elements raises additional issues not relevant to simple glyphs. 5.1
Because labels can be different lengths, there can be challenges attempting to use labels to indicate counts. Various strategies can be used:
Height. Typographic Venn (fig. 4) uses stacked labels making perception of
quantities a visual comparison of heights. Height comparison outperforms area estimation
tasks [
Other possible techniques to make string lengths more uniform could include adjusting spacing between characters; using font variants with different width; or padding with additional characters. 5.2
Many authors recognize the importance of establishing a metaphoric association
between a visual attribute and the concept encoded (e.g.[
Gestalt principles indicate that visually similar items are perceived as belonging together. The viewer immediately understands whether the two items are similar or different if their font attributes are similar or different. Showing all attributes simultaneously can be useful: for example, in fig. 9 the use of font attributes readily distinguishes between adjacent elements belonging to the same set relations (homogenous attributes) or different relations (heterogenous attributes).
Decoding font attributes is a second step. Short-term working memory only holds
a small amount of information (3-7 items, e.g. [
Unlike dots or icons, labels have an aspect ratio that is wider than tall. This impacts layout algorithms. Typographic Mosaic generated more accurate areas when favouring wider boxes over taller boxes. The initial Typographic Graph used a collision detection algorithm which assumed square proportions of elements and tended to push text apart vertically rather than horizontally, necessitating adjustments to the layout algorithm.
Encoding many different font attributes simultaneously onto a label may make it difficult for the viewer to decode all the memberships. Tooltips can be used to immediately show memberships. If the task is focused on a subset of set memberships, font attributes can be toggled on/off. Search can be used if the task requires locating a particular element. Using SVG and javascript, toggling attributes can be done in a single line of code and search can simply use the browser’s find feature (ctrl+f). All examples shown are English language. Some languages do not have the same font attributes (e.g. case). Also, languages that represent words with single glyphs will have different considerations: inter character spacing is not available, encoding separate characters within a word is not feasible, and so on.
Evaluation is non-trivial and there are many confounding factors. Evaluation studies should be done to assess ability to notice differences, ability to decode; ability to recall a font mapping; change in perception of areas when font attributes are manipulated; how readability is impacted by layout; how readability is impacted by the application of multiple simultaneous font attributes; and limitations across different languages. 6
We have shown that font attributes can be used to extend set visualization techniques, to enhance labeled elements with additional data such as set membership. These attributes can aid detecting differences between elements, encode membership or other data attributes, scale to at least 10 sets and thousands of items. Future work can include extensions to other set layouts, evaluation studies, higher scalability (more elements, more sets) and better techniques for integrating word semantics into encoding schemes.