Contents

  1. Home
  2. Contents
  3. How to Create a Heat Map Widget
  4. Customizing the Heat Map Widget

Customizing the Heat Map Widget

In order to modify the data that my widget displays, I need to adjust the settings of the fields that I dragged to the “X-Axis” and “Y-Axis” boxes.

 

The “Values” box already contains the information I need (the states’ average temperatures), so I do not need to alter it.

Values box contains the information of the states’ average temperatures

 

However, I do need to modify the settings of the “X-Axis” and “Y-Axis” boxes because they affect the dates and states that the widget displays, and this is the information I would like to change.

X-Axis box contains the information of the Year(Date)

 

I will begin by looking at the “Date” field in the “X-Axis” box. After I dragged this field to the “X-Axis” box, its name changed to “Year(Date)” as the widget will display the data in this format by default.

 

However, I want my widget to show all of the months of the year, so I am going to click the “Options” button and select the “Month” option.

list of menu options allows to choose the date settings

 

Now, the field’s name has changed to “Month(Date).”

field’s name shows the Month(Date) chosen

 

Next, I will adjust the “State” field in the “Y-Axis” box by clicking the “Options” button and then clicking “Filter(s).”

 

At the top of the box that appears, I see a drop-down list box called “List.” Currently, every state in the US is selected; however, I can uncheck the “Check All” button and then manually select the states for which I would like to see data.

choose Options button where we can to apply filter to the data

I am going to check the boxes beside Alabama, Florida, Georgia, Mississippi, and South Carolina, ensure that the “Include” button is selected, and click “Apply.”

popup where we can apply filter for the data source chosen

 

After I click “OK” to exit the “Filters” box, my widget looks like this, and if I hover over a rectangle, I can see the average monthly temperature for that state. I am definitely on the right track, but there are a few additional modifications I would like to make.

dashboard view explores the heat map of the filtered data

 

To do this, I will click over to the “Properties” tab. First, I am going to rename my widget. I will call it “Average Monthly Temperatures—Southeastern US.”

 

option to rename properties tab to Average Monthly Temperatures—Southeastern US using the settings menu

Next, I am going to scroll down to the “Color Settings” section. This section contains two options for my widget’s color scale. The “Min Color” box determines which color is associated with lower values, and the “Max Color” box determines which color is associated with higher values.

 

Because I am working with temperatures, and because I would like to see a stark contrast between the lowest and highest values on my heat map, I am going to change these colors so that blue is my Min Color and red is my Max Color.

 

To do this, I need to click the down arrow in the Min Color box and then select the shade of blue I would like to use.

 

It is worth noting that you can click the “Switcher” button in the lower left corner of the box to create your own custom colors, but I am going to choose a shade of blue from the default options that appear and then click “Apply.”

 

Next, I will click the down arrow in the Max Color box, select a shade of red, and then click “Apply.”

Max Color box popup allows to the change the color scheme of the map

 

I  would also like to change the name of my heat map’s X-Axis. If I scroll down past the “Color Settings” section, I see a section titled “X-Axis Settings.” Currently, my axis title is “Month(Date),” which is the name of the field that I dragged to the “X-Axis” box in the “Assign Data” tab.

popup where we can change the name of the heat map’s X-Axis

I am going to revise the text in this box so that it says “2017,” which is the year for which I am displaying data. I can immediately see this change reflected in my widget.

 

Now that my widget looks the way I want it to look, I am going to take a moment to explore its functionality.

 

As you can see, the heat map’s rectangles are shaded in different hues of red and blue. The hottest months are bright red, and the coldest months are bright blue. Months with temperatures in between the highest and lowest temperatures are a mix of the colors, with warmer months having more red and cooler months having more blue.

dashboard view explores the heat map’s rectangles are shaded in different hues of red and blue

I can hover over any individual rectangle to see a state’s average monthly temperature. For example, I can see that Alabama’s average temperature in December was 46°F and that Florida’s average temperature for the same month was 66°F.

dashboard view shows the Alabama’s average temperature in December was 46°F

 

dashboard view shows the Florida’s average temperature for the same month was 66°F

 

Finally, I would like to explore the functionality of the “Size” box that appears under the “Assign Data” tab. I left this box empty when I created my widget because I wanted my widget to display clustered rectangles. However, it is worth noting that adding a field to the “Size” box will allow you to change the appearance and functionality of your heat map.

 

If you drag a field to the “Size” box, the heat map’s rectangles will disappear, and the map will instead display dots of different sizes; these dots represent your data, and the field that you drag to the “Size” box determines the criteria for the dot sizes.

For example, if I drag the “Avg Temperature” field to the “Size” box, larger dots will represent higher average temperatures, and smaller dots will represent lower average temperatures.

option to drag the Avg Temperature field to the Size box into the Assign Data tab of the settings menu

The dots are still color-coded; the hottest months are still bright red, the coldest months are still bright blue, and months with temperatures in between the highest and lowest temperatures are a mix of the colors, with warmer months having more red and cooler months having more blue. Now, though, my widget does not merely display information through the dots’ colors; it also conveys information through the dots’ sizes.

dashboard view shows the view of the Size field applied

Here is a final example. If I drag the “Avg Precipitation” field to the “Size” box, then larger dots will represent higher amounts of precipitation, and smaller dots will represent lower amounts of precipitation. The colors red and blue still indicate which months had the highest and lowest temperatures. Now, however, I am also able to quickly see which states and months had the highest and lowest precipitation numbers by looking at the widget’s dot sizes.

option to drag the Avg Precipitation field to the Size box into the Assign Data tab of the settings menu

As you can see, this functionality can be very useful as it provides a quick visual reference for not one but two pieces of data simultaneously (in this case, the states’ average temperatures and average precipitation, with the average temperature represented by color and the average precipitation represented by dot size).

dashboard view explores that the larger and smaller dots will represent higher and lower amounts of precipitation

 

 

 

 

 

 

 

 

 

 

 

 

 

 

How can we help?