Venn Diagrams enhanced with Typographic Attributes

Here is an example visualization illustrating a potential use case where typographic attributes add functionality and usefulness beyond a familiar representation such as a Venn diagram. In the case of set visualization, typography has many different attributes (e.g. weight, italic, case, font family, underlines, capitalization, and so on) that can be combined together to indicate membership in multiple different sets. Furthermore, attributes such as font-family, can be used to indicate membership across different categories within a set, not just binary membership.

U.S. House of Representatives 4-Way Venn Diagram

Below is a 4-way Venn diagram that includes the name of every member of the U.S. House of Representatives. At a high-level there are 4 bubbles indicating 4 different sets: gender (blue/pink); party affiliation (red stripes for Republicans); race (freckle dots for white) and multiple terms (light green):

4-way Venn diagram of U.S. House of Representatives with members indicated in stacks of text.

By using stacks of names, you don’t even need to read the names to make high-level macro-comparisons. It’s easy to visually compare the relative heights of stacks to gauge the approximate number of representatives in each set and set intersection. So, this Venn diagram indicates some discrepancies between the proportions of the elected representatives and the general population. For example, women (in pink) seem to be under-represented, assuming that women make up approximately 50% of the population. There is also a bias in ethnicity. Democrats (top half) have a larger number of ethnic minorities, particularly in the far right column (serving more than a single term), whereas Republicans have few ethnic minorities.

Micro-details. Close-up you can read the name of each member. Unlike a simple Venn diagram, all the individual elements are visible (congress members), and named. Read names directly without relying on tooltips. Search for a specific name (browser search e.g. ctrl+f in Chrome on Windows). Click any name for details. I.e. there are lots of benefits to making names available.

Plus, with all the detailed names, we can also use font attributes to reinforce the Venn memberships, plus add additional data. So, for example, Republicans are right leaning italics and Democrats are left leaning italics. Here’s a closeup:

Closeup of names on Venn diagram. Left leaning indicates Democrats, right leaning indicates Republican. Plain text indicates white ethnicity, etc.

Gender is pink/blue; party affiliation is left leaning for Democrats and right leaning for Republicans. Members serving multiple terms are bold. Those with white ethnic background are in a plain sans-serif font. But there’s more…

Beyond 4 sets. Venn diagrams do have limitations: they can be difficult to show more than 4 different sets. While feasible, it may be difficult to distinguish set membership following complex outlines. Instead, additional font attributes can be used.  For example, those over 65 years of age are all caps; and those with higher education are indicated with underlines. Note that there isn’t a separate Venn bubble for these attributes – these represent memberships in 5th and 6th sets.

Beyond binary membership. Venn diagrams also do not qualify between different categories within a set. For example, for ethnicity, different ethnic backgrounds are differentiated in the data, but a Venn only indicates on category (e.g. white or not-white). In this example, white politicians are in a plain sans serif font, while non-whites have more diversity: a script font for Latino, a serif font for Asian Americans and a block font for African Americans. An additional level of information is revealed.

Demo! Here’s the URL for the interactive version: http://codepen.io/Rbrath/full/QEGBOo/

The demo version lets you toggle on/off different ways of showing set membership. Do you notice the difference in font? Toggle any text feature button and notice how the labels adjust appropriately.

About the code and demo. This is the first post with a functioning demo. It’s is not meant to be an example of good programming – the code is prototype-grade code, which means just enough coding to get it running and not bothering to go back and clean it up. It should ideally be more flexible with data, for example, allowing the user to pick and choose which attributes to use for any Venn set. Nice future features would be to use a more generalized Venn diagram, capable of using circles or ellipses rather than rounded rectangles. This would require some more intensive computational geometry which is an exercise left to the reader – I haven’t looked into it, but Jonathan Feinberg’s approach used in Wordle may be a good starting point.

Data is from Measure of America and Wikipedia . Feel free to reuse any concepts. Please cite: Richard Brath. Typographic Sets: Labelled Set Elements with Font Attributes. in SetVR 2016 International Workshop on Set Visualisation and Reasoning (2016).

Advertisements

About richardbrath

Richard is a long time visualization designer and researcher. Professionally, I am one of the partners of Uncharted Software Inc. I am also pursuing a part-time 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, Font Visualization, Set Visualization, Venn Diagram. 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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s