IN THIS ARTICLE

    IN THIS ARTICLE

      Tree Map

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

      When to Use?

      A tree map is a data visualization technique that uses rectangles to represent hierarchical data. The size of each rectangle is proportional to the value of the data it represents. A Tree Map is beneficial when:

      • To visualize hierarchical data: Tree maps are ideal for visualizing hierarchical data like file systems, directories, and organizations. The rectangular levels in the tree map reflect hierarchy levels.
      • To compare hierarchical parts: Tree maps can also compare hierarchy parts. A tree map could be used to compare file sizes or department staff.
      • To display change over time: A tree map can depict hierarchical change over time. A tree map could depict how a file system's size or an organization's personnel count has changed over time.

      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 tree 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 tree map that needs modification
      • 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
      • 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 here. Toggle off if not needed.
      Alignment
      • Adjust the title alignment to either left, center, or right of the element.

       2. Properties

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

      Text Labels
      • Add/remove text labels to the map by toggling on/off.
      Data Labels
      • Add/remove data labels to the map by toggling on/off.
      Legends
      • Add/remove legends to the map by toggling on/off
      • Adjust the position of the legends by selecting an option from the ‘Position’ dropdown.

      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.
      Text
      • Toggle on or off to add or remove text boxes in the map. Enter any information that needs to be included for the map by editing the ‘Text’ field. 
      • Adjust the alignment to either the left, center, or right of the element using ‘Alignment’. 
      • Change the font weight to normal, medium, or bold from ‘Font weight’.

      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. Design Customizations

      • This will access the 'Design Customizations' menu when clicked. 
      • Use this to change your active theme and utilize customization options to adjust the canvas accordingly.
      • For more information, please refer to this article.

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

      Similar articles