IN THIS ARTICLE

    IN THIS ARTICLE

      Heatmap

      This comprehensive guide will cover everything about Heat Maps in Mokkup.

      When to Use?

      A heat map is a data visualization technique that uses colors to represent data values. The warmer the color, the higher the value. Heat maps are often used to visualize data that is continuous in nature, such as temperature, population density, or sales data. A Heat Map is beneficial when:

      • To visualize continuous data: Heat maps are helpful for visualizing continuous data like temperature, population density, and sales. The heat map colors represent data values.
      • To compare values: A heat map can compare values. A heat map could compare city temperatures or country population densities.
      • To demonstrate evolution: A heat map can demonstrate continuous value change throughout time. Heat map can be created to depict how temperature or population density has changed over the past year or decade.
      • To find patterns: Heat maps can find data patterns. Heat map can be used to find criminal hotspots or high unemployment.

      How to Create?

      Creating a New Project:

      • Click on ‘Create new’ from the home page
      • Setup the project by filling in the name and choosing the frame size
      • Drag & Drop the heat map on to the canvas or click on it to add from the left menu
      • Resize it on the canvas and place in the desired location
      • Edit it from the customize element menu which opens on element selection

      Using a Mokkup Template

      • Choose a template from the template library and click ‘Use Template’
      • Select the heat map that needs modifications
      • Resize it on the canvas and place in the desired location
      • Edit it from the customize element menu which opens on element selection

      Tip: Mokkup elements have multiple variations that can be accessed by double-clicking on the element or clicking Variation in the customize element menu.

      How to Customize?

      Mokkup allows various customization options for all elements. These customization options are present in the menu on the left side. The edit options are broken into 2 sections - Data and Customize. 

      Data

      Anything related to the data populated in the map or the map type can be found here.

      1. Edit Data

      • Add, remove, or modify the pre-built dataset for the map here
      • To add more columns/lines to the map, click ‘+’ on the right of the dataset table. Once a new dataset is added, fill in the values, and the map will reflect the new column. Click on ‘-’ to remove any additional dataset columns.
      • Click ‘+’ below the dataset table to add more values to the X-Axis. Once a new row is added to the dataset, edit the values, and the map will reflect the same. Click on ‘-’ to remove any additional dataset rows.

      Customize

      This is the default tab that opens when an element is selected. All element customizations can be done in this tab. Each sub-section will be explained below.

      1. Details

      Edit the basic map details here

      Title
      • Change the title of the map (and its text theme) here. Toggle off if not needed.

       2. Properties

      Contains all the settings that play a role in the aesthetics of the map.

      Data Labels
      • Add/remove data labels to the map by toggling on/off. 
      X-Axis Orientation
      • Change X-Axis orientation to vertical or horizontal from the ‘X-Axis Orientation’ Dropdown.
      Y-Axis Orientation
      • Change Y-Axis orientation to vertical or horizontal from the ‘Y-Axis Orientation’ Dropdown.
      Legends
      • Add/remove legends to the map by toggling on/off

      3. Add Ons

      Contains additional elements that can be added to the map.

      Buttons
      • Toggle on/off to add/remove buttons in the map.
      • Add multiple buttons by clicking ‘Add Button’.
      • Adjust their alignment to either left, center, or right of the element using ‘Alignment’.
      • Edit the button's content by clicking on ‘Title 1’ text in this menu.
      • Delete any button by clicking the ‘trash’ icon near the name of the button.
      Dropdowns
      • Toggle on or off to add or remove dropdowns in the map
      • Adjust their alignment to either the left, center, or right of the element using ‘Alignment’
      • Add dropdowns by clicking the ‘+’ icon
      • Reorder them by clicking the ‘Settings’ icon
      • Delete them by clicking the ‘Trash’ icon
      • The title can be edited in the ‘Edit Text’ field, and values can be added by entering values in the ‘Add Values’ field
      KPIs
      • Toggle on or off to add or remove KPIs from the map. 
      • Add KPIs by clicking the ‘+’ icon
      • Reorder them by clicking the ‘Arrow’ icon
      • Delete them by clicking the ‘Trash’ icon. 
      • Adjust their alignment to either the left, center, or right of the element using ‘Alignment’. 
      • The title can be edited in the ‘Edit Text’ field, and values can be edited in the ‘Measured Value’ and ‘Percentage Change’ fields.

      Tip: Some add-ons cannot be used together in an element. For example, turning on the KPIs toggle will automatically switch off legends, and vice versa.

      4. Variation

      • This button opens the 'Choose Style' pop-up. 
      • Choose an alternative design for the element. 
      • Can also access the pop-up by double-clicking on any selected element.
      • Using the above-described customization methods, it is also possible to create various element variants.

      5. Theme & Customizations

      Click the 'Theme & Customization' icon in the floating toolbar on top of the element (or open it by scrolling down the left side menu) to style this heat map on its own, without changing the rest of the dashboard.

      • Element Color Theme

      Pre-fills this map's title, cell color scale, data labels, and legend from the project's Primary, Secondary, and Tertiary palette. Then lets you edit any swatch or hex code to override the colors for this map alone. There's no theme gallery at this level; changes apply immediately, and 'Reset to Default' brings it back in line with the project theme. See Mokkup Themes for more.

      • Element Text Theme

      Style the map's Title, X-Axis and Y-Axis labels, Data Labels, Legend, and, when toggled on, the Buttons, Dropdowns, and KPI (Title, Measured Value, Compared Value, Percentage Change, Others) add-ons, each with its own Font, Size, Style (Bold/Italic/Underline), Alignment, and Color, plus 'Reset to Default'. See Text Themes for the full list.

      • Element Effects Theme

      Rounded Corners, Padding (set independently for the inner spacing's Left/Top/Right/Bottom sides, plus an overall outer padding), Element Color, Drop Shadow, and Stroke. See Effects Theme for details.

      • Not available on this element:

        • The Buttons add-on doesn't have a background-color option yet (Dropdowns and KPI 'added value' fields do).

        • A KPI's Percentage Change indicator keeps its green/red color tied to whether the change is positive or negative, so it can't be manually recolored.

      Tip: Whichever change you make most recently is the one that sticks. For example, if you customize an element's effects and then apply a new project-level Effects Theme, the project theme overrides that element's custom styling, and the reverse holds true too.

      This was an in-depth introduction to using and editing a Mokkup heat map. For additional inquiries, please ask our Chatbot or contact support.

      Similar articles