Lesson 7

Visualising and Analysing

Hierarchical Data

ISSS608 Visual Analytics and Applications

Content

ISSS608 Visual Analytics and Applications

• Space-constrained
  • Overview of treemap visualisation techniques
  • Applications of treemap visualisation
  • Treemaps design best practices
  • Treemap visualisation tools
• Radial space-filling

  • Introducing sunburst diagram

  • Sunburst diagram in D3.js

The motivation

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Massive data such as REALIS transaction data, real time stocks, inventory, internet traffic, credit card transaction, etc.

Introducing treemap Visualisation

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• First introduced in 1998 by Ben Shneiderman

• It was used to visualise files usage in a harddisk.

   

Getting to know treemap visualisation

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• A data visualisation framework to organise and visualise multivariate data hierarchically

The Concept Behind Treemaps

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Recursively slice and dice a rectangle in different directions to represent a (potentially large) hierarchy

Squarified Treemaps

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Optimise the placement of nodes within a level to make them as square as possible

Ordered Treemaps Layout

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Conserve the ordering of elements while seeking to keep nodes as square as possible, and thus produce very stable layouts.

Advanced Techniques: Flexible Hierarchy

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Provide interactive manipulation of a hierarchy.

Advanced Techniques

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Voronoi Treemap

Advanced Techniques

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• TreeCovery

Advanced Techniques

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Spatially Ordered Treemaps

Source: Jo Wood, Jason Dykes and Aidan Slingsby (2010) “Visualisation of Origins, Destinations and Flows with OD Maps”, The Cartographic Journal Vol. 47 No. 2 pp. 117–129

Treemap visualisation in action

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Stock market

Treemap visualisation in action

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Stock market

Treemap visualisation in action

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Logistic and Supply Management

Treemap visualisation in action

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Salesforce Performance

Treemap visualisation in action

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Process and Quality Management

Treemap visualisation in action

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Journalism

Treemap visualisation in action

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Knowledge Management

Treemap visualisation in action

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Cyber security

Treemap visualisation in action

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Market research

Treemap visualisation in action

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Market research

Treemap visualisation in action

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• News

Treemap visualisation in action

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Hobby

Treemaps Design Best Practices: Hierarchy

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Order hierarchy breakdowns and groupings according to the realities of the business.

  • For equity analysis: Industrial sector, country, trading frequency, capitalisation, and son on.

• Use categorical attributes for hierarchy

Treemaps Design Best Practices: Measures

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• The size variable in a treemap should be used to indicate attributes that measure the importance of the item.  In general, these attributes are continues values.

• The colour variable in a treemap should be associated with attributes that indicate urgency or amount of change. These attributes can be continuous or categorical.

Treemaps Design Best Practices: Colour scheme

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Use single colour with different intensity to represent the attribute’s values.  Colour with higher intensity represent higher value and colour with lower intensity represent lower value.

• Use two colours if the attribute values consist of both positive and negative values.

• Avoid using red-green combination.

Treemaps Design Best Practices: Labelling

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Avoid using label if the treemap is very cluttered.  For interactive treemap, tooltip is always more effective.

• If labels are used, ensure that labels stand-out against treemaps colours.

Treemaps Design Best Practices: Tooltip

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Tooltip window should stand out clearly.

Treemaps Design Best Practices: Tooltip

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Tooltip window should stand out clearly.

Treemaps Design Best Practices: Interaction

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Avoid confusing interaction.

Treemaps Design Best Practices: Interaction

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Avoid confusing interaction.

Treemaps Design Best Practices: Filtering

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Avoid using hierarchy attributes in filter.

Our humble experiment

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Linking Treemaps with other data visualisation

Our humble experiment

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Linking Treemaps with other data visualisation

Our humble experiment

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• A treemap visualisation with input data

Our humble experiment

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• A treemap visualisation with input data

Treemaps in Data Visualisation Tools

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• TIBCO Spotfire

Treemaps in Data Visualisation Tools

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Treemap in Tableau

Treemaps in Data Visualisation Tools

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Treemaps in Qlik Sense

Treemaps in Data Visualisation Tools

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Treemaps in Power BI

Treemaps in Data Visualisation Tools

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Treemaps of macrofocus

Treemaps in R - Package "treemap"

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

Interactive Treemaps in R - d3treeR

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• The magic behind d3.js’s treemap layout

Radial Space-Filling Hierarchy Visualisation

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Sunburst diagram

Radial Space-Filling Hierarchy Visualisation

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• The concepts behind sunburst diagram

Radial Space-Filling Hierarchy Visualisation

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Sunburst partition

Radial Space-Filling Hierarchy Visualisation

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• A zoomable sunburst diagram

Radial Space-Filling Hierarchy Visualisation

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• A sequences sunburst

Radial Space-Filling Hierarchy Visualisation

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Sunburst in action - Coffee Flavour Wheel

Radial Space-Filling Hierarchy Visualisation

ISSS608 Visual Analytics and Applications

Lesson 7: Visualising and Analysing Hierarchical Data

• Sunburst in action - PathRings

A web-based tool for exploration of ortholog and expression data in biological pathways