Lesson 5

Visualising and Analysing

Hierarchical Data

IS428 Visual Analytics for Business Intelligence

Version 1.9.0

Last updated: 12/09/2018, 11:00pm

Content

IS428 Visual Analytics for Business Intelligence

• 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

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

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

Introducing treemap Visualisation

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• First introduced in 1998 by Ben Shneiderman

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

   

Getting to know treemap visualisation

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

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

The Concept Behind Treemaps

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

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

Squarified Treemaps

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

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

Ordered Treemaps Layout

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

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

Advanced Techniques: Flexible Hierarchy

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• Provide interactive manipulation of a hierarchy.

Advanced Techniques

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• Voronoi Treemap

Advanced Techniques

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• TreeCovery

Advanced Techniques

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• 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

Advanced Techniques

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• Stream data

Treemap visualisation in action

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• Stock market

Treemap visualisation in action

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• Logistic and Supply Management

Treemap visualisation in action

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• Salesforce Performance

Treemap visualisation in action

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• Process and Quality Management

Treemap visualisation in action

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• Journalism

Treemap visualisation in action

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• Knowledge Management

Treemap visualisation in action

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• Cyber security

Treemap visualisation in action

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• Market research

Treemap visualisation in action

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• News

Treemap visualisation in action

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• Hobby

Treemaps Design Best Practices: Hierarchy

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• 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

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• 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

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• 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

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• 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

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• Tooltip window should stand out clearly.

Treemaps Design Best Practices: Tooltip

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• Tooltip window should stand out clearly.

Treemaps Design Best Practices: Interaction

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• Avoid confusing interaction.

Treemaps Design Best Practices: Interaction

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• Avoid confusing interaction.

Treemaps Design Best Practices: Filtering

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• Avoid using hierarchy attributes in filter.

Our humble experiment

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• Linking Treemaps with other data visualisation

Our humble experiment

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• Linking Treemaps with other data visualisation

Our humble experiment

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• A treemap visualisation with input data

Our humble experiment

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• A treemap visualisation with input data

Treemaps in Data Visualisation Tools

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• TIBCO Spotfire

Treemaps in Data Visualisation Tools

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• Treemap in Tableau

Treemaps in Data Visualisation Tools

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• Treemaps in Qlik Sense

Treemaps in Data Visualisation Tools

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• Treemaps in Power BI

Treemaps in Data Visualisation Tools

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• Treemaps of macrofocus

Treemaps in D3.js

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• The Treemap layout

Treemaps in D3.js

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• The magic behind d3.js’s treemap layout

Treemaps in D3.js

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• A simple treemap in D3.js

Treemaps in D3.js

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

Treemaps in D3.js

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• A working example

Radial Space-Filling Hierarchy Visualisation

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• Sunburst diagram

Radial Space-Filling Hierarchy Visualisation

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• Sunburst partition

Radial Space-Filling Hierarchy Visualisation

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• A zoomable sunburst diagram

Radial Space-Filling Hierarchy Visualisation

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• A sequences sunburst

Radial Space-Filling Hierarchy Visualisation

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• Sunburst in action - Coffee Flavour Wheel

Radial Space-Filling Hierarchy Visualisation

IS428 Visual Analytics for Business Intelligence

Lesson 5: Business Decision Support using Treemap Visualisation

• Sunburst in action - PathRings

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