{"id":19116,"date":"2017-11-08T12:48:11","date_gmt":"2017-11-08T04:48:11","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=19116"},"modified":"2024-10-23T14:21:08","modified_gmt":"2024-10-23T06:21:08","slug":"treemap","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/treemap\/","title":{"rendered":"Treemap"},"content":{"rendered":"\n

This article applies to versions 4.4.4 and later of IFS OI Explorer.\u00a0<\/p>\n

Overview<\/h2>\n

The Treemap\u00a0shows relative values of numeric data as regions of proportional area, with an additional dimension represented as their colour.<\/p>\n

It displays data using rectangles, known as nodes<\/em>. The\u00a0traits\u00a0of the nodes are displayed using size and colour coding, which allows you to\u00a0compare nodes even at varying depths in the hierarchy, and more easily spot patterns and exceptions.\u00a0<\/p>\n

The following diagram shows a Treemap being configured:<\/p>\n

\"treemap-config-overview\"<\/a>\u00a0<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n
Data<\/strong>:<\/td>\nThe source\u00a0from which the Treemap gets\u00a0its data. This data will be used to set both the size of the nodes and their colour.<\/td>\n<\/tr>\n
Name<\/strong>:<\/td>\nThe values that identify each node.<\/td>\n<\/tr>\n
Label<\/b><\/span>:<\/td>\nThe values that will be used as the labels of each node. If this is not supplied, the Name will be used instead.<\/td>\n<\/tr>\n
Size<\/strong>:<\/td>\nThe value that determines the size of each region.\u00a0<\/td>\n<\/tr>\n
Colour Value<\/b><\/span>:<\/td>\nThe value that determines the colour of each region. The exact shade is interpolated from two predefined colours, set by the Style Administrator.<\/td>\n<\/tr>\n
Minimum<\/b>:<\/span><\/td>\nThe lowest value of a node represented by an interpolated colour. Values below this will be represented by an alternative colour (by default, this is cyan<\/span>).<\/td>\n<\/tr>\n
Maximum<\/b>:<\/span><\/td>\nThe highest\u00a0value of a node represented by an interpolated colour. Values above\u00a0this will be represented by an alternative colour (by default, this is red<\/span>).<\/td>\n<\/tr>\n
Limit of Regions<\/b>:<\/span><\/td>\nThe total number of nodes to be displayed in the Treemap. If there are more nodes than this, the nodes with the\u00a0smallest area will be combined and displayed in a different colour (by default, this is purple<\/span>). Note that if one of the smaller nodes exceeds the minimum or maximum value, it will not be aggregated with other regions.<\/td>\n<\/tr>\n
Selected<\/b>:<\/span><\/td>\nThe variable that stores the name of the region that a user clicks\u00a0at run time.<\/td>\n<\/tr>\n
Style<\/strong>:<\/td>\nThe style you want to apply to the Treemap component.\u00a0If you are a Style Administrator, you can add a new Treemap\u00a0style.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Related: Using the Treemap<\/a> in display mode, Adding a new Treemap\u00a0style<\/a><\/p>\n

\u00a0<\/p>\n

\n

What Type of Data to Use the Treemap For<\/h2>\n

The Treemap shows two dimensions of data, one represented as size and the other as colour. You use the Treemap to show the relative importance of two aspects of data by setting one aspect (such as oil production) as size, and another aspect as colour (such as water production).<\/p>\n

Size is represented from smallest to largest. If size represents oil production, then the more\u00a0oil produced, the bigger the node gets.<\/p>\n

Colour is represented by two colours that are interpolated along the HSL\u00a0colour space. Let's say water production is represented by light grey\u00a0<\/strong>for high\u00a0water production and dark grey\u00a0<\/strong>for low\u00a0water production. The more water produced, the lighter\u00a0the node will appear. A well that doesn't produce much water will appear to be darker.\u00a0<\/p>\n

\u00a0\"treemap-colours1\"<\/a><\/p>\n

In the above\u00a0Treemap, if water production is undesirable, you\u00a0could choose to investigate the issues at Parkes,<\/b><\/span>\u00a0Derby<\/b>, or Kookaburra<\/strong><\/span>\u00a0<\/strong>first, as these are relatively large oil production areas (large size) with large water production (light grey). Additionally,\u00a0Anstey<\/strong>\u00a0is also indicating that it has exceeded the maximum water production (due to its shade of red).\u00a0On the other hand, Ibis\u00a0<\/strong>has gone below the minimum water production (due to its shade of cyan).<\/p>\n

Batavia\u00a0<\/strong>(even though it is a large oil producer) does not produce that much water, while Woodland<\/strong>\u00a0is a relatively minor contributor to overall oil production (small size), despite producing more water than Parkes.<\/p>\n

If you don't like the colours used in the default configuration, you can ask your Style Administrator to create a new Treemap style.\u00a0<\/p>\n

\n

How Minimum and Maximum Values Affect Colour<\/h2>\n

The values you use for the\u00a0Minimum<\/strong> and Maximum<\/strong> settings in your Treemap affect its\u00a0overall colour, so it's important to get the balance right for your intended dataset.<\/p>\n

First, let's consider our data. In the following dataset, the lowest value belongs to\u00a0Brumby (15512) and the highest value belongs to Herbert (17358). Now let's say we have the following interpolation colours:<\/p>\n\n\n\n
\"treemap-dataset\"<\/a><\/td>\n\"treemap-interp-ex-prop\"<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

How do\u00a0we set the minimum and maximum values for the best results?<\/p>\n\n\n\n\n\n\n
Even distribution<\/strong>
\nWhen the Minimum and Maximum are close to the actual minimum and maximum values, the treemap will display a range of colours similar to the style's Minimum Colour and Maximum Colour.<\/td>\n		\"treemap-minmax-normal\"<\/a><\/td>\n<\/tr>\n
Minimum too low<\/strong>
\nIf the Minimum value is much lower than the actual minimum value in the dataset, the treemap will overall be biased towards the Minimum Colour. In this example, the treemap overall appears to be light grey.\u00a0<\/td>\n		\"treemap-minmax-low\"<\/a><\/td>\n<\/tr>\n
Maximum too high<\/strong>
\nIf the Maximum value is much higher\u00a0than the actual maximum value in the dataset, the treemap will overall be biased towards the Maximum Colour. In this example, the treemap overall appears to be dark\u00a0grey.\u00a0<\/td>\n		\"treemap-minmax-high\"<\/a><\/td>\n<\/tr>\n
Min and Max too far
\n<\/strong>If both the Maximum and Minimum values are quite far from the actual maximum and minimum values in the dataset, the treemap will overall show less variation\u00a0in colour between the nodes. In this example, the treemap overall appears to be an even medium grey.\u00a0<\/td>\n		\"treemap-minmax-extreme\"<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

\n

Tutorial:\u00a0Creating a Basic Treemap<\/h2>\n

If you're unfamiliar with the process of building pages, read the article\u00a0Building an Explorer Page<\/a>.<\/p>\n

In this tutorial, we'll show you how to set up a Treemap that looks at daily Oil vs Water production for pre-selected entities. We'll also add a Date\/Time Range Picker so we can see the effects of changing the date.<\/p>\n

<\/a><\/p>\n

Let\u2019s go through this process, step-by-step.<\/p>\n

Note<\/strong>: This configuration uses the Sample Data <\/em>table\u00a0and queries that can be optionally made available\u00a0during initial installation and setup. If you don't have access to this data, you will need to adjust the configuration to suit your data at your site.<\/p>\n

\u00a0<\/p>\n

\n

Step 1. Prepare a Studio Page<\/strong><\/p>\n

\"New<\/p>\n

Before you start, click the New Page<\/strong>\u00a0button on the Home tab of the ribbon. Choose the Grid\u00a0layout.<\/p>\n

\"Grid<\/p>\n