A Visualization Periodic Table

Most of us know what the Periodic Table of the chemical elements is, but there is more application to that paradigm other than just chemistry.

This is a very interesting and complete table showing Visualization Methods

APeriodicTableOfVisualizationMethods

The original interactive version is here (put the mouse pointer over each symbol and see).

Visual Languages Primitives

Visual languages are based on certain common primitive elements for express the intended message, situtation or subject.

As far as I can see, the most used are…

Concepts: Individual visual representation of ideas.

  • Concrete objects: Object with at least a name or title for identification purposes and with the capability of  being resized or moved across the containing layout.
  • Grouped objects: Shown as one, later expanded in the same space or in a new one. This is the base for composable visualizations. 
  • References: Shortcuts to external objects, either respect to object of the same document but in another page or links to files or internet URLs.

Relationships: Connections between ideas, representing a semantic nexus.

  • Communication: Sending/receiving of information.
  • Action: Process execution flow.
  • Structure: Set of well arranged components that  constitute an entity, so that it shows their association and dependencies.

Layout: Acomodation of the visual elements in a predefined way.

  • Centered (such as in mind maps, using radial or hyperbolic trees).
  • Table (rows and columns, also called Tabular)
  • Hierarchical Tree
  • Column based flow (made for vertical expansion, such as UML Sequence Diagrams)
  • Row based flow (made for horizontal expansion, such as Gantt Charts)
  • Free (such as in concept maps), but mantaining a relative distance between nodes for comfortable reading.

Title and Accesories

  • Main title, maybe with a context reference.
  • Notes and visual cues (such as icons and legends, the later is very important for non domain-versed audience)
  • Extra Information (References, summaries and tables)

Visual Languages

Next, an overview of some common practices and techniques for knowledge transfer: Visual Languages.

General Visual Languages of wide spectrum…

Concept Maps: Based on a question (e.g.: “what caused the 2008 financial crisis?”), depicts general knowledge about that topic using concepts and their relationships on a free graph layout.

 Sample Concept Map

Mind Maps: Organizes ideas and knowledge around a central topic on a radial (centered hierarchy) graph layout. They commonly uses various colors, images and curved lines for easy memorization.

Sample Mind Map

Entity-Relationship diagrams: On a business domain, depicts entities and thir relationship from a data modeling perspective.

Sample Entity-Relationship Diagram

Flowcharts: Depicts the logical steps for performing a task, considering processes, decisions, inputs, outputs, storing and their flow.

Sample Flowchart

Unified Modeling Language: A complex language for general modeling, mostly used on computer science related projects. It has various types of diagrams. The most popular are:

  • Use case diagrams: Represents the functional specification of a system. Shows the diverse functions to be executed, the relation with the actors involved and their dependencies.

 Sample UML Use Case Diagram

  • Class diagrams: Structural representation of an artifac in a static object-relational way. It depicts software elements (classes, interfaces, structures, events, etc.) and their relationships (associations, implementation, inheritance, etc.).

 Sample UML Class Diagram

  • Sequence diagrams: Represents the behavior of related components on the execution of a system (or subsystem). It shows the invocations, returns, paralellization, starts and stops of those participants.

Sample UML Sequence Diagram

Visual Languages for Specialized contexts…

Electronic Diagrams: Shows electronic components and their arrange on a circuit or board.

Sample Electronic Diagram

Chemical Diagrams: Shows the structural formula of chemical compounds at molecular level.

Sample Chemical Diagram

 Military Plan: Shows the planification for war movements. It considers direction, timing, type and strength of forces in the theater of operations.

Sample Military Plan

Maybe, for any human knowledge area, there are a visual language developed. Plus consider that many organizations have developed their own visual languages, and they are changing over time and evolve following the development on their industries or even creating new ones (e.g.: nanotech, genetic engineering). Such particular well focused dialects are called Domain Specific Languages.

Communication and Perspectives

Any given thing or process has its significance under many scopes. What has certain relevance for an entity (a person, institution, artifact, etc.) could be minor/trivial or far superior for others.  Take for example the relative importance of Heart Transplant in Cardiovascular Surgery, then its importance in Medicine, then in Science and so on. For sure in the first environment we can expect great and detailed works on the subject, then a general knowledge in the second, and maybe just a reference or none at all in the last.

Consider now that for many large projects and organizations there is a need for creating common assets for dealing with the involved complexity. These assets could be specialized languages, standards, protocols, policies, artifacts, etc. As example we can consider the armed forces or the sport teams: They have a common language, common symbols (insignias, flags), equipment, protocolized communications and operational procedures, rules of conduct, etc. Then is required a superior entity, for understand these of complex worlds, to meet their common needs. That superior entity is on a meta or supra level: beyond that worlds.

In this case we have another perspective: The “here” (world) vs the “beyond/upon” (meta). For example: A construction team must build a house, then the architect communicates the intended design with blueprints. A meta-level here is the blueprints standard used for the purpose of building. That problem was studied and evolved since centuries and now has it common language (ie: a dotted square represents a concrete block or a door indicates its opening side with an arc). On the same example, another meta-level could be the command hierarchy of the construction company: the architect is the chief and the team are their subordinates.

Then, when trying to effectively communicate between different contexts, the data terchanged must be altered to be well understood by the intended audience. That change can be made in the form of: level of detail, vocabulary, symbols, translations, perspective and abstraction, etc. Also, the purpose must be considered: decision making, specialized work, informational, etc.

Infographics: The final User Interface?

Infographics is a style of showing information in a simple graphical way, either static (images) or dynamic (animations) with the minimum necessary detail over a particular topic. The most common examples are traffic signals and subway maps. Main concepts are replaced by basic and well known shapes such as people, vehicles, bridges, houses and so on.

Signs of an austrian autobahn

Signs of an austrian highway

To achieve a fast and clear perception from viewers,  images and information are reduced and combined and differentiated using areas, layers, colors and other visual cues such as legends.

Simplified map of a subway system

Simplified map of a subway system

The effectiveness of Infographics is being used also in a variety of media types like: video clips (music, fairy tales, etc.), newspapers, products manuals, posters and software.

Graph for an environment friendly engineering project

Representative chart

In the past, most user interfaces used graphical styles with prevalence of cartoonish images (icons) and 3D and polylined controls. This is changing to more simple and less bloated environments.

SUN Solaris OS graphical user interface

Typical 1990s GUI

Simplified GUI (oct. 2008)

Simplified GUI (oct. 2008)

Maybe Star Trek designer Mike Okuda, with his LCARS interface, was a visionary ahead of his time. The simplified interface can be seen in some of today’s applications.

Star Trek (TNG) LCARS GUI.

Star Trek (TNG) LCARS GUI.

And don’t forget Einstein’s phrase: “make things as simple as possible, but no simpler“. There must exists equilibrium between simplicity and usability.

The Problem of Naming and Identification

The obvious

In our thinking we reference things (objects or people) in abstract or symbolic ways, using images (shapes or faces), concepts (like “car”, “the big green thing behind me”, “mom”, etc.) or a mental pseudo-conversation with ourselves (this time using language). While less abstract and more language related are the thoughts, more is the need to reference things with an artificial and language-transmittable label: the Name.

Names came as the immediate and main attribute about new things that we create or are presented to us. Then culture, practical convenience and personal creativity guide the act of naming:

  • For People: A combination of family name (that may be in reference of a place of origin, ethnic group, occupation or other ancestral heritage) plus a common or unique/fabricated first name. The naming order varies depending on culture.
  • For Common Things: Usually a word or combination of words (most of them originated in ancient languages and then assimilated in the current one used) which are used for referencing (to point to or indicate a thing) and identification (distinguish a thing from others of the same kind).

Identifiers

Maybe the biggest problem when naming is to find or create the most original name to avoid repetition over certain scope. Commonly a person name can have many people assigned (e.g.: “Sarah Connor”), therefore a most universal and error-safe main attribute had to be created (e.g.: a national id. number like the SSN). Then the identifier (or “Id”) become a solution for feasibility, precision and unambiguity for massive and systematic naming.

I can think a couple of ways for creating identifiers…

  • Combination of features. For example, in the case of a new car model (with the commercial name not yet invented): Style + Engine Type +  Drive-train + Year (e.g.: “Hatch-Back.V8.4×4.2009″).
  • Path of dependency.  When identifying objects on a big hierarchy unambiguously. For example the now common URL, or a military reference: “NATO.Northag.BritishArmyOfTheRhine.2ndRoyalTankRegiment.Unit07″.

By using complicated names for universal reach, there appears the need to simplify them within the local context for practical (fast) use, or to make them special or relevant. Then we have aliases, which can serve to various purposes such as: local fast referencing, real identity hiding (e.g.: ”callsign” of a combat pilot) or creation of multiple identities (e.g.: for commercial, personal or “alternative” activities).

Conventions

In structuring name conformation there can appear conventions according to the domain being represented. Some conventions can be:

  • By Prefixes (starting position) or Suffixes (ending). For example, in an astronomical phenomena name like “protonebulae” the prefix “proto” means ”new” and the suffix “ae” means ”many”. It, the naming using Latin and Greek words, appears to be an standardized (traditional, de facto?) way of naming such phenomena in the scientific community.
  • Syntax: This is very common for software developer to use different syntactic styles while programming. For example: Using all in uppercase for constants (e.g.: “PI=3.141592″), or using “camelCase” (first word in lowercase, the in uppercase every first letter of the resting words) for method names in the Java programming language (e.g.: “closeAccountNumber(990011);”).

Problems

About the problems of naming things, I can think of…

  • Homonyms: Words that are written the same, but that have a different meaning. Usually the real meaning is deduced from context, but if doesn’t exists we are lost. For example, the word “well” can refer a pit or way of doing.
  • Cultural and language issues. Consider the “Lone Ranger” and his native american friend “Tonto”. In Spanish “tonto” means “fool”, so his name have to be changed to “Toro” (bull).

Finally…

Lets think twice when naming. A good name helps to make more or less recognizable, findable or unique that named thing or person.

A whole subject apart is the naming of a commercial product. You can find books, websites and companies entirely dedicated just to create good names for products. I hope to write about that interesting topic in the future.

Timelines

Time is like a highway where everything goes in the same direction. The events occurred across time are typically depicted on an horizontal line, a Timeline, with segments indicating the time periods on a scale relevant to the discussed theme. The most common use for timelines is for show historic facts, news, biographies, fine grained or long lasting events (e.g.: from subatomic particles behavior to geological ages of Earth).
Dipity timeline viewer

Dipity timeline viewer

Sometimes we need to show multiple aspects or visions of a topic on various tracks of that Time road. Then a simple line is not enough and a parallel set of lines is required.

Schofields & Sims world history timeline

Schofields & Sims world history timeline

Plus, consider to show the timeline on the vertical axis.

Mozilla web browser timeline

Mozilla web browser timeline

Also, the amount of events to be displayed may be not dispersed on a regular basis, more when contrasting areas of time with almost no info against other plentiful of it. A way to overcome these inequalities is make timelines with non-linear shapes, for example using spirals, triangles or arcs.

Agard's biblical timeline

Agard's biblical timeline

Finally, you can see an interesting site about history of Timelines here.

Trees

A common need is the graphical showing of hierarchies, containment, origination or classification, which can be represented as one-to-many relationships in a Tree structure. Tree in the sense of a root with many branches, usually shown downward for reading purposes. Examples of these are organizational charts, containment diagrams or navigational controls in software applications. A special application of trees is the representation of space or usage as areas such these shown in Treemaps. A very good explanation of trees and treemaps can be found here.

Tree samples

Tree samples

Also there is the radial representation and navigation in the so called Hyperbolic Trees, either in 2D or 3D views.

Hyperbolic tree samples

Hyperbolic tree samples

 The problem with this structure is that each node can have just one parent or dominant, making it not always suitable for reflecting reality albeit simple to understand and affordable for implementation.

Tables and Spreadsheets

In the beginning there was the unsorted set, then the List and, when many lists become unmanegeable, the Table appeared. Made of intersecting lists conforming either rows or columns, they are used as boards, guides, matrixes and files. Let see an example:

Calendar Rune

Calendar Rune

Making a big jump in time, we can find one of the first electronic versions of tables: the spreadsheet application:

Multiplan for DOS

Multiplan for DOS

Notice that numbered column titles instead of the now common letter based style.

As data and information management growth and as computers provided more powerful and flexible tools, there was a new paradigm: The Cube (AKA: Hyper-Cube or OLAP Cube). Although still represented on a two-dimensional surface, the general idea is to represent a third dimension, time, and also show the information in a more efficient an useful way by grouping/nesting, sorting, filtering and “drilling” up/down on the same visual interface.

OLAP Cube

OLAP Cube from ContourComponents

Today, these tables/spreadsheets/cubes are not just presenting data, but also providing navigation, formatting, validation and simulation capabilities, all in integration with other visual and processing paradigms. Nice evolution.

Drawing: A picture is worth a thousand words.

Communication is a basic need for almost any being. Either for amazon’s ants transmitting chemical messages to announce presence of food, or for primitive humans painting caves to tell stories about hunting or register their cattle property.

Cave painting

Cave painting

Then, as society growth and evolved into more complex relationships (tribes to nations), settlements (villages to cities), housing (hut to houses, buildings or palaces), and so on, the need to register and share also increased. In the visual aspect, the using of paper (or its ancestors: leather and papyrus) gives the painting or writing the ability to be mobile and replicable.

Egyptian papyrus

Egyptian papyrus

 Of course the more obvious use of drawings are the representation of things, such as animals, people, machines or buildings, inherently linked to art, literacy, engineering, sciences, architecture, religious depictions and historic or politic topics. Appart from these, there started the need to associate information and drawing for use in such documents like genealogy trees, maybe the first kind of diagrams.

Medieval denealogy diagram

Medieval genealogy diagram

Again, centuries passed until the first formal diagrams were conceived. In turn, these more elaborated diagrams, were result of more sophisticated management techniques and science advances, mainly in the Scientific and the Industrial revolutions.