7. Apply Constraints

So far we have seen how we can specify the positions of visual elements using layout and encoding, one more method is to use constraints.

Mascot currently supports two kinds of constraints: align and affix. The align constraint applies to an array of visual elements, and moves the elements so that their bounding boxes have the same value at a specified anchor. The figure below illustrates alignment constraints in the “y” direction with different anchor parameters.

The affix constraint specifies the relative positioning between an element i and a base element along the “x” or “y” direction. When such a constraint is applied, the base element’s position remains unchanged, and element i’s position is changed to satisfy the constraint. The figure below illustrates affix constraints in the “x” direction with different anchor and offset parameters. If the element and the base element have peers that are generated using repeat, divide or densify, these peers will be taken care automatically.