Sections
Sections are containers for visualization elements and they determine how those elements are displayed.
Creating and Selecting Sections
Sections can be created by clicking on the New Body Section button on the canvas or by clicking Insert in the Toolbar and then dragging a new section onto the canvas.
Click on any section to select it. Selected sections are highlighted in red in the Layers tab and appear with a red outline on the canvas.
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.
Section Setup
Once selected, the section can be set up in the Section tab that appears on the right of the page.
In the tab, you can assign the section the name that will be used to reference it in the Layers tab and on the canvas.
You can also choose to left, center, or right align the section. This determines how the section will be aligned when it is not as wide as the visualization container. For instance, if the section has been assigned a maximum width of 500px, but there is 700px of available horizontal space in the viewport, centering the section will render it with 100px of clear space on either side of it.
Responsive Design
In Mappica, you can build visualizations that are responsive to changes in your user's viewport width. Since sections are used to arrange content in Mappica, we let you specify custom section properties for each of the three
viewport widths (
Desktop,
Tablet, and
Mobile):
- 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 choose the device to which you wish to assign section properties in the Device dropdown. Note that even when there is not enough width on your screen to preview the canvas in Desktop mode, you can still select Desktop in order to assign it properties.
Sections can be assigned a maximum width for each of the three viewport widths. The maximum width can be set in either pixels or percent. To switch between these two options, click on the text that says PX (or %). The maximum width sets the width that the section will always be limited to; the section will also never grow beyond the visualization's assigned maximum width (editable in the Visualization tab).
Sections can be assigned direction properties for each of the three viewport widths. There are four options that can be selected:
- Rows: elements in the section will line up horizontally.
- Columns: elements in the section will line up vertically.
- Rows wrapping down: elements in the section will line up horizontally, then wrap into additional rows. If you select this option, you will be able to choose the number of columns and rows that you wish to display in the section. If you choose either two or three columns, you will additionally be able to select a column layout (either 1:1, 2:1, 1:2, 1:1:1, 2:1:1, 1:2:1, or 1:1:2).
- Columns wrapping right: elements in the section will line up vertically, then wrap into additional columns. Similar to rows wrapping down, you will be able to choose the number of columns and rows, as well as a column layout when you select either two or three columns.
Columns wrapping right can be a helpful option if you wish to create groupings of elements side-by-side. For instance, if you want to display two charts, both with text elements above them, Column wrapping right (with 2 columns and 2 rows) allows you to display these side-by-side on wider devices and then stack them on narrower devices.
Properties assigned to sections cascade from larger devices down to smaller ones. When you set a property for desktop devices, that value will automatically apply to tablet devices unless you specify a different value for tablets. Similarly, tablet properties will cascade to mobile devices unless otherwise defined. This cascading behavior lets you reuse section properties across different devices, only making changes when they are specifically needed.
Body and Footer
Sections can be placed in either the body or footer of a visualization. You can drag a section between the body and footer. Alternatively, use the Move to Footer (or Move to Body) option in the Section tab.
