Visualizations Overview
Understand the basics of building visualizations in Mappica.
Creating Visualizations
When you create a new project, a new visualization is automatically generated. If you wish to create additional visualizations, you can do so in the Project tab on the left of the screen.
The visualization menu, accessed by clicking the icon with three dots next to the visualization name, provides you with several additional options:
- You can edit the visualization's name.
- You can duplicate the visualization by selecting Create a Copy.
- You can change which visualization loads when the project is initially opened, by selecting Open by Default.
- You can also choose to delete the visualization. Note that this permanently deletes the visualization, and can only be selected once a published visualization is unpublished.
Users on the Pro plan can create up to 100 visualizations per project, while those on the Starter plan are limited to three visualizations.
Visualization Setup
In the Visualization tab on the right of the screen, the Setup section lets you edit to the following properties:
- The amount of margin applied to the visualization.
- The gap between all sections in the visualization as well as between rows and columns within each section.
- The maximum width of the entire visualization.
- The visualization's alignment within its parent container when the maximum width property restricts the visualization's width.
In the Visualization tab, users on the Pro plan can also control how content is displayed in the visualization's Footer:
- Edit whether or not to display a logo in the footer or a divider between the body and the footer. If you choose to hide the logo and do not add any content to the footer, the footer section will be removed entirely from the published visualization.
- Edit the vertical alignment of the footer logo.
Layers
The Layers panel, located on the left of the screen, displays the sections and elements that make up the visualization, which are placed into a nested hierarchy:
- At the top level of the hierarchy, components are either in the Body, which displays the main visualization content, or the Footer, which by default includes a logo and empty text element.
- At the second level of the hierarchy, you can create Sections, which are containers for all the elements in the visualization. Sections determine how those elements are displayed—for instance, whether they will be arranged in a row or column. Selected sections are highlighted in red in the Layers panel.
- At the third level of the hierarchy, you can add visualization elements, such as Charts, Maps, Tables, and Filters. Selected elements are highlighted in blue in the Layers panel.
The Layers panel is open on the left of the screen, with a selected text element highlighted in blue. The text element is also visibly selected on the canvas, in the center of the screen. The text element's properties can be edited in the Text panel on the right of the screen.
Selecting and Moving Content
Sections and elements can be selected by clicking on them in the Layers panel or the canvas. Once selected, the section or element can be edited in a panel that appears on the right of the page. In the screenshot above, a text element has been selected, so a Text panel is displayed.
Sections wrap tightly around elements, so if selecting a particular section is tricky, try clicking slightly to the left or right of it to select it more easily.
Sections and elements can be moved by selecting an element and then dragging it around the canvas using the drag handle in its top right corner.
Editing and Preview Mode
When you open a visualization, the canvas is initially in Editing Mode. In this mode, you can select, move, and edit sections or elements on the canvas. You can also interact with elements just as users will when the visualization is published, but any changes made directly on the canvas are not saved—those changes only preview the behavior of elements. For example, if you change the selected item in a filter, you will be able to see the effect this has on the rest of the visualization, but to actually save a new default selection in the filter, you need to change its properties in the Filter panel.
The only exception to this is the Text element: any edits you make to text directly on the canvas are saved automatically.
You can switch at any time to Preview Mode using the dropdown in the Toolbar. In this mode, the left and right panels are hidden, and sections and elements can no longer be selected, moved, or edited. Instead, the canvas will display and behave exactly as it will when published.
Additional preview modes are available to approximate how your visualization will appear to users with six different types of color blindness (green-weak, red-weak, blue-weak, green-blind, red-blind, and blue-blind). This can be especially useful for ensuring that elements like charts and maps are designed to be accessible to all users, including those with visual impairments.
Deuteranomaly, the most common form of color blindness, affects red-green color perception, making it harder for users to distinguish between these colors. To improve accessibility in your visualizations, try to avoid relying solely on red and green data points in your chart or map. Using different shades of colors can also help enhance visual contrast.
Collaboration and Read Only Mode
When multiple users are viewing a canvas (available on the Classroom and Pro plans), only one user can edit the visualization at a time. All other users are placed in Read Only Mode, which is similar to Preview Mode but with the project panel remaining visible (though you can hide it if needed).
You can request editing control in a visualization by clicking on the Read Only Mode dropdown in the Toolbar and then selecting Request Editing Control. This generates a prompt on the screen of the user currently in Editing Mode; they can choose to accept the request to transfer editing control or decline it. If they fail to respond to the prompt within 30 seconds, editing control is transferred automatically.
Viewport Widths
It can be helpful to understand how your visualization will display at different viewport widths. At the center of the Toolbar, three viewport icons let you switch between viewing the canvas in the following viewport widths:
- Desktop: viewports wider than 933px (laptop and desktop devices along with most tablets in landscape mode).
- Tablet: viewports between 431px and 932px (most tablets in portrait mode, many modern smartphones in landscape mode, and desktop web browsers that have been resized to narrower widths).
- Mobile: screen widths below 430px (most modern smartphones range between 360px and 430px viewport width in portrait mode).
You can enter a custom viewport width directly to the right of the viewport icons to preview the visualization at a specific size. Alternatively, you can use the resizing handle to the right of the canvas to adjust the width manually and achieve a similar effect.
Responsive Design
In Mappica, you can build visualizations that adapt to changes in your user's viewport width. This is done by assigning custom section properties for each of the three
Viewport Widths (
Desktop,
Tablet, and
Mobile). Find out more about setting up sections that are responsive to viewport width in our documentation page about
Sections.
Publishing
Once you are ready to share your visualization with your audience, the final step is to publish it. Click on the button that says
Unpublished Draft in the top right of the screen and then select
Publish. You can view the
Publishing page to learn more about how publishing works in Mappica, including the different embedding options available to you.
