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):
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:
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).