A very, very cool Flash Movie about Color in Motion. An interactive Experience of Color Communication and Color Symbolism of Claudia Cortes.
A very, very cool Flash Movie about Color in Motion. An interactive Experience of Color Communication and Color Symbolism of Claudia Cortes.
“With hindsight, it’s easy to look at it with hindsight” – Glen Hoddle
Little did we suspect midway through the season that the Premier League would turn into a 2 horse race. Poor starts by both Man Utd. and Chelsea were transformed into a consistent run of good form which would extend the drama to the very last day of the season.
With one game left to play, the top two were level on points with Manchester having a superior goal difference. If Chelsea could achieve a better result than Manchester, then they would clinch the league in the final game…
The English Premier league currently has 20 teams requiring a total of 380 games per season. The results of sporting leagues are usually displayed in a league table format. During the course of a season we see teams occupy different table positions. The standard table format however leaves out the important historic story of the league.
This is how soccerstats.com shows the final league table.
The final 8 games are summarized as a colors encoded Win Lose chart. The table found at the web site above provides helpful links to each team’s performance and a snapshot in time regarding table position for each month of the league. It is also possible to rank the teams with respect to their home or away performance and overall is a very powerful tool for analyzing statistics of the league. Some historical information is also given with the results for the last 8 games being displayed in the last column.
Statistics are like miniskirts; they give you good ideas but hide the important things.” – Ebbe Skovdahl
However, there are a number of things about the table in that I think could be improved and all of them are centred on the “Last 8” column. The table author is attempting to describe win-lose information graphically and has dedicated approximately one quarter of the width of the table to it. With a quarter of the table dedicated to it, we should expect more than 8 out of 38 games to be described. The author has chosen to invent a chart type which encodes the results using colored squares with more empty space than data. The whole season can easily fit into this width if we choose an appropriate display technique such as a win-lose chart.
My least favorite aspect of the “Last 8” column is the non-standard use of a 1 dimensional plot. I come from a physical science background and so I am used to diagrams telling me certain things in certain ways. One of these things is (in the absence of an axis or some other visual guide) that time should go from left to right! In this 1D plot the knowledge of which way time is going is fundamental. The links at the top of the same table used to break the table down into months, go in chronological order from left to right. This sets up my brain to expect the rest of the table to behave in the same way. So why don’t the last 8 games do the same? Unless you actually have some knowledge about how the season ended, you might not actually realize that time is going from right to left. I happened to know that Liverpool and Arsenal didn’t lose their final games of the season. This made me double check what the table was actually telling me. Without some knowledge of how the Premiership ended I would have interpreted the information presented wrongly. The fact that time is going from right to left isn’t wrong. The fact that the rest of the table is telling me to expect it to go from left to right is.
“Well, Clive, it’s all about the two M’s. Movement and positioning” – Ron Atkinson
So what improvements could we make to the standard table format to get more information into the table? To tell the story of the 2007-2008 league we need to include the historical context.
The Excel table below uses sparklines to summarizes the season for each team in terms of relative positions in the table and a win lose chart for the entire season.
Now we get a feeling for the true drama that occurred during the season. The Position column shows how the each teams position changed over the course of the league. Those of us that followed the 2007-2008 Premiership will be able to look at the performance curves and remember the situation for a given time. For example:
“I never make predictions, and I never will” – Paul Gascoigne
It is interesting to directly compare the performance of teams together. Adding an interactive Bumps Chart in allows us to see how Man Utd and Chelsea faired over the season. To compare two team click the sparklines in the ranking table or click the data label on the Bumps Charts.
In the next post I will talk about the techniques used to produce the ineractive ranking table within Excel. Until then why not check out a live web version, published from Excel to our website.
** Please see also the updated article, for XLCubed v7.1 and above: http://blog.xlcubed.com/2012/09/creating-rounded-corners-in-excel-revisited/ **
Igor Asselbergs was contemplating the value of round corners in design. Is it eye-candy? Or does it add value to the user experience? He comes to the conclusion that rounded corners clearly make a difference.
“On the left side, you see one surface divided by a line. On the right side your eye interprets the image as two adjoining boxes.”
The effect can be explained by the Gestalt Law of Continuity. Gestalt is a set of rules based on research into perception psychology, and a very powerful tool for Excel table design. In table design this effect can help us to see the table columns as a unit.
Did you ever wonder how to create rounded corners in Excel tables?
The basic idea of rounded corners is putting some shape objects into the corners of the column headers.
Here are the steps to create rounded corners:
Sean blogged the other day about using a treemap to visualize the drivers of the Australian Inflation. He got inspired to create a treemap by an NYT article that used an interactive version of the following treemap:
This chart looks nice on the first view. It makes nice use of muted colors, the shapes look well balanced and certainly the graphic designer did a good job. However, from a data visualization perspective this chart has a couple of flaws.
Ben explained treemaps in an article as:
“Among the growing family of visual analytic tools, treemap are flourishing in organizations that require daily monitoring of complex activities with thousands of products, projects, or salespeople. Tabular reports, bar charts, line graphs, and scattergrams are important tools, but for complex activities where there are numerous sales regions, manufacturing plants, or product lines the hierarchical structures provided by treemaps can be helpful. While tabular displays and spreadsheets can show 30-60 rows at a time on typical displays, the colorful presentations in treemaps can accommodate hundreds or thousands of items in a meaningfully organized display that allows patterns and exceptions to be spotted in seconds.[…] Treemaps are a space-filling approach to showing hierarchies in which the rectangular screen space is divided into regions, and then each region is divided again for each level in the hierarchy.”
The first problem the NYT chart has is that it does not visualize the hierarchy as rectangular areas. The inflation drivers are visualized as asymmetric round shapes. It is difficult to compare the relative size of rectangular shapes but it gets almost impossible for asymmetric shapes. Also does this treemap lack labels for the smaller inflation drivers.
Sean published in his blog post a treemap which does not have the problems mentioned above:
Ben designed treemaps to visualize thousands of regions, products, etc ; but the Inflation chart only comprises 20 Inflation Drivers grouped into 7 categories. A simple sorted table would do a better job communicating the numbers as Kaiser Fung from Junk Junks wrote in his post.
This is already quite an improvement on the treemap, as we can see increasing and decreasing inflation trends and sparklines rather than traffic light colors as in the tree map version. Also it is much easier to read for non expert users.
Some minor things we can improve in Sean’s chart are:
Most reports are based on combinations of tabular layouts, so to continue my series about visual design (see my previous post) I will focus on the most common and simple problem to fix: The fundamentals of how to align numbers and text in tables and how to treat their headings.
Here are the rules
Seems obvious really but they are so often rarely applied. A Google image search on “excel table” reveals what most Excel users do …
….they simply use what Excel defaults to:
…or if people are more adventurous often feel that centered columns would somehow looks better:
…or even worse they apply the Excel Tables styles:
All those habits make the table more difficult to read. To understand why this is the case let’s use the Gestalt Law of Proximity.
In the picture above my brain tells me that there are 6 columns of 9 dots in one group. Simply moving the dots of the first row to the left breaks this grouping and differentiates the dots into 2 groups
This is exactly what happens if you left align column headers on numerical columns: As shown below and the brain does not associate them anymore which is what I want in most cases for headings and numbers.
So Excel Defaults are not right as shown below.
Right aligning the headers brings them together.
The grouping still works even if the shapes have a different width but remain either right or left aligned:
The reason for this is explained by the next Gestalt law of Continuity, the right aligned figures and the left aligned text are perceived as columns
The table below shows this affect with the arrows showing the continuation of the series and the same works with columns of left or right aligned figures or text, we perpetuate the series and perceive the column as one object. Even inserting a row to visually separate the figures and the column headers does not break the grouping…
….what can be explained by the Gestalt law of Closure.
Hence we perceive the columns of numbers and headers still as a unit even though the headers are placed somewhat apart from the figures.
If we now disable the Excel grid lines we end up with table which merely relies upon white space and Gestalt laws to format the table providing clear associations: A first class table.
In western cultures we read text from left to right so it makes a lot of sense to left align text columns but not so for numeric columns. The eye has to search for the decimal point to get to the ten, hundred or thousand digit, this makes comparing numbers quite difficult if not impossible when many numbers are involved.
Here the Gestalt Law of Continuity can help, simply right aligning brings all tens, hundred, thousand digits on the same virtual line and makes comparison straightforward and simple.
Unsurprisingly, centering numbers in column causes exactly the same problem as shown below. Another visualization “No No”.
Interestingly, the same rules apply when we move beyond simple text and numbers to MicroCharts such as sparklines, column charts and bullet graphs. Especially when the sparklines contain m
Right or center alignment leads to severe difficulty comparing values of the same period in different rows in the table.
If the sparklines have the same amount of data points this is not an issue but in dynamic reports this may not always be the case so its better to be safe than sorry.
When using visual tables another nice trick to is to introduce an axis to a column chart to aid in the visual alignment and to group periods into blocks through the alternate shadings. The column chart above use a column chart to visualize units sold and an area chart for the other measures. The different shading groups the periods into 6 month units and the column bars aids the visual alignment. So to recap, make it easy for people to read your tables by following how your brain inherently processes information as explained through “Gestalt” laws. Here are the rules again
I hope that this article has been useful and I look forward to dealing with other visualization techniques in later posts.
I get asked by a lot of people how I seem to be able to format my charts and tables so that they look good and still convey the information in the most effective manner. I thought I would share my experience through my blog posts.
The first thing to know is that I like to use a set of visual design rules when building charts and tables and I like to understand why the rules make sense. In this series of articles I am going to attempt to explain the rules and the reasons behind them. Most of these rules are simple and are based on a solid academic foundation.
In this blog post I would like to introduce the Gestalt Laws, a set of design rules based on research into perception psychology. In the 1930’s the German Gestalt school of psychology investigated how the brain groups and organizes visual shapes. Following this research the so-called “Gestalt” laws were established. These laws form much of the foundation of the techniques I use in table design and I intend to refer to many of them in this series of articles.
Gestalt Law of Proximity: The brain tends to group items together that are close together in space ie. In the same Proximity.
In the picture above my brain tells me that there are 6 columns of 9 dots in one group.
Gestalt Law of Similarity: We tend to group objects with similar properties (color, shape, texture).
In the picture above my brain groups the black and gray dots.
Gestalt Law of Continuity: When something is introduced as a series the brain tends to perpetuate the series
Gestalt Law of Closure: We tend to complete incomplete objects
The table below applies all of the Gestalt laws above:
· The Gestalt Law of Continuity: The right aligned figures and the left aligned text are perceived as columns
· The Gestalt Law of Proximity: The region labels and figures for Scenario W6000 and Scenario W7000 are grouped by having some extra space between the columns.
· Gestalt Law of Closure: Although we have some space between the column quarter column headers and the figures we perceive them as one unit.
· Gestalt Law of Similarity: Formatting the negative numbers red makes them clearly stand out from positive numbers.