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:
Users on the Pro plan can create up to 100 visualizations per project, while those on the Starter plan are limited to three visualizations.
In the Visualization tab on the right of the screen, the Setup section lets you edit to the following properties:
In the Visualization tab, users on the Pro plan can also control how content is displayed in the visualization's Footer:
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:
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.
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.
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.
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.
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:
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.
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.
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.