Heat Map

This page includes steps for creating a heat map layer on an image.

Typically, a heat map positions color-coded circular elements at specified locations on an image, for the purpose of visualizing some data that you want to associate with the image. For example, to visualize temperature by room, you could position a circular element on each room in a floor plan, and you could color code these markers according to temperature. To create a heat map layer on an image, first you group an image component and a heat map component, and then you load tables that describe the marker locations and the temperature data.

In a heat map, the data value used for color coding is called the "intensity" value.

For a detailed reference of properties that affect heat map components, see Common Properties and Heat Map Properties.


A heat map component in DGLux5


Create a Heat Map Layer on an Image

These steps show one way to create a heat map overlay for an image.

Note

In some cases, you might be able to combine steps 2 to 4 by writing a single query that includes X, Y, and intensity values.

  1. Set up the group:
    1. In the Outline, right-click the Stage and select Insert > Component > Group.
    2. Right-click the group and select Insert > Component > Image.
    3. In the Property Inspector, specify the URL of the image asset.
    4. With the image selected, just above the Position and Size properties, click the Auto Size button.
    5. With the group selected, in the Scaling properties, select Fit Ratio and set Autosize Content to TRUE.
    6. In the Outline, right-click the group and select Insert > Component > Heat Map.
    7. With the heat map selected, hover over the Width property until a blue dot appears, and double-click the blue dot. Do the same for the Height property.

      This creates a small binding pop-up dialog that includes the two properties.

    8. With the image selected, in the Property Inspector, click the blue dot next to the image's Width and drag it to the heat map's Width in the small pop-up dialog.
    9. Repeat step 1h for Height.
  2. Use a table to define locations on the image. To add this table manually:
    1. Open the dataflow for the heat map.
    2. Delete the Table block in the dataflow.
    3. Add a new Table block, and name it locations.
    4. Open locations, and rename the three columns X, Y, and tag.
    5. In this table, enter data describing where your circular elements should appear at the full pixel size of the image.
      • X is the distance in pixels from the left edge of the component.
      • Y is the distance in pixels from the top edge of the component.
      • tag is some string that identifies the point, such as a device ID or room number. These values should match strings in the next table.
  3. Load a second table that includes your "intensity" data.

    This table can be loaded using a query, a CSV or JSON file, or some other means. It must include a column of data to be used for intensity values and a column of identifying strings matching the tag values in the previous table.

  4. Join the two tables:
    1. Add a Join block to the dataflow.
    2. In the dataflow, link the locations table to input1 and the intensity table to input2.
    3. For column1, type tag.
    4. For column2, type the name of the column containing the identifying strings that match the tag strings.
    5. For join, select Left.
  5. Link the joined table to your heat map:
    1. In the Outline, select the heat map.
    2. In the Property Inspector, expand the Heat Map properties.
    3. In the dataflow, click the blue dot next to the output table of the Join block, and drag it to the Table property in the Property Inspector.
    4. In the Property Inspector, for X Field, Y Field, and Intensity Field, type the names of the relevant columns in the joined table.

      Circular elements now appear on your heat map.

  6. Style the gradient:
    • To open the gradient dialog, click the swatch in the Property Inspector.
    • To change a color value, click the small square below the track and then use the color picker.
    • To add a color, click below the track.
    • To delete a color, right-click the small square below the track.
    • Drag colors to move them. To start the gradient at a value larger than 0, drag the leftmost square to the right.
  7. Style the circular elements:
    • To make the circular elements larger or smaller, change the Item Radius property.
    • Experiment with changing the Falloff value. This value affects the radius percentage that is covered by the central color of the element.
  8. Style the legend:
    • If you do not want to show the default legend, set the Show Legend property to FALSE.
    • To change the starting and ending numbers of the legend, click the swatch and drag the rightmost and leftmost gradient colors toward the center of the track.

Notes

  • The gradient and legend cannot display values lower than 0. Values below 0 are represented as 0.
  • The gradient and legend cannot display a value higher than the highest intensity data value in the table.

Heat Map Properties

These properties affect the heat map component.

For a guide to using the heat map component, see Heat Map.

Heat maps are also affected by Common Properties.

Heat Map properties
The Heat Map properties in the Property Inspector

Show Legend

Show Legend

Show Legend
Specifies whether to show a simple legend in the heat map component.

The Show Legend property
The Show Legend property

Table

Table

Table
Specifies the table that the heat map uses as a data source.

The Table property
The Table property

X Field

X Field

X Field
Defines the table column from which the X values of the heat map data points are determined.

Each X value is a distance in pixels from the left edge of the component.

The X Field property
The X Field property

Y Field

Y Field

Y Field
Defines the table column from which the Y values of the heat map data points are determined.

Each Y value is a distance in pixels from the top edge of the component.

The Y Field property
The Y Field property

Intensity Field

Intensity Field

Intensity Field
Defines the table column from which the intensity values are determined.

"Intensity" refers to whatever units the heat map is measuring, for example temperature or air flow. Each data point on the heat map has an intensity value that determines its color.

Intensity values range from 0 to the highest data value. An intensity of 0 corresponds to the left end of this heat map's gradient, and the highest intensity value corresponds to the right end of this heat map's gradient.

The Intensity Field property
The Intensity Field property

Item Radius

Item Radius

Item Radius
Defines the radius of each item on the heat map.

The Item Radius property
The Item Radius property

Fill

Fill

Fill
Defines the colors for the heat map gradient. The left color indicates the lowest intensity, middle colors indicate medium intensity, and the right color indicates the highest intensity.

  • To add a color, click below the track.
  • To specify a color, click the small square below the track and then use the color picker.
  • To delete a color, right-click the small square below the track.
  • To reset the gradient and start over, hover over the swatch until a blue dot appears. Then, click the blue dot and select Reset.

The Fill property
The Fill property

Falloff

Falloff

Falloff
Defines the percentage of each heat map item that is covered by the highest intensity color for that shape. The specified inner portion of the shape is covered by the color representing the intensity of the data point. The remaining outer portion of the shape blends from the color of this intensity value to the color of an intensity value of zero.

The Falloff property
The Falloff property

2019/07/17 19:17