Worked example: two panels with adjustable spacing

This example uses two equal-sized axes in a 6-by-3-inch figure. The second axis follows the first axis’s size and bottom edge. A constant named spacing controls the horizontal gap, initially 0.2 inches.

Inspect it in the GUI

Copy the complete layout string below. Open Import/Export, replace the text in the dialog with this string, and click Import:

ppd1:H4sIAAAAAAACA82TQW6DMBBF7zJrFzmk7YIT9AZdVFXkwgCWHGOZcQKKuHvtAKZEkcimVdnAoGf/Z5i5ACo8oqYWso8LyAIyEJ1snzgwoN7gVPuqg4wnrwz6cH9hcJYF1ZClScqgRlnV5Au/CDv/AApLOhihUcHAfm68u7fxPuHr63kjJ+ExyYZXc9Qng7zRLVkh5zORsBV68FZCEFlfd94P2sbZHNcMX5hrROCOTpE0qp9J7ZSaqV3CPSGK4vCFZWPxHsMjI0pCGwNbI3Kpq5gY1gzhu23I9w/I978ofos8oDz+zm3tyP0f9an7tt0X8K/k574Xq0le2uoklMPApgE9STybxl5PWsrKWXwfh8yP91i/TYO2H4ZvqRWEXCMEAAA=

Select right_panel to see its relationships:

right_panel.x = left_panel.right + spacing
right_panel.y = left_panel.y
right_panel.width = left_panel.width
right_panel.height = left_panel.height

The imported layout with right_panel selected and spacing set to 0.2 inches.

You can build the same layout yourself using Add Axis, Add Constant, the match and alignment presets, and the custom X constraint described in Designing layouts.

Adjust it in Python

Click Quick Copy. Insert the following line before the final rendering call:

design.get_constant('spacing').value.set(0.4)

The right panel moves 0.2 inches farther to the right, but its size and vertical alignment remain controlled by the original constraints.

For a complete example, copy the code below into two_panels.py. The layout string is included, so you can run it directly:

python two_panels.py

The script writes two_panels.svg in the current directory:

"""Load the tutorial layout, change spacing, and plot into its named axes."""

import matplotlib.pyplot as plt
import numpy as np
from pyplotdesigner.core.design_loader import load_design, make_figure_from_design


def make_example(spacing=0.4):
    import_string = (
        "ppd1:H4sIAAAAAAACA82TQW6DMBBF7zJrFzmk7YIT9AZdVFXkwgCWHGOZcQKKuHvtAKZEkcimVdnAoGf"
        "/Z5i5ACo8oqYWso8LyAIyEJ1snzgwoN7gVPuqg4wnrwz6cH9hcJYF1ZClScqgRlnV5Au/CDv/AApLOhi"
        "hUcHAfm68u7fxPuHr63kjJ+ExyYZXc9Qng7zRLVkh5zORsBV68FZCEFlfd94P2sbZHNcMX5hrROCOTpE"
        "0qp9J7ZSaqV3CPSGK4vCFZWPxHsMjI0pCGwNbI3Kpq5gY1gzhu23I9w/I978ofos8oDz+zm3tyP0f9an"
        "7tt0X8K/k574Xq0le2uoklMPApgE9STybxl5PWsrKWXwfh8yP91i/TYO2H4ZvqRWEXCMEAAA="
    )
    design = load_design(import_string)
    design.get_constant('spacing').value.set(spacing)
    fig, axes = make_figure_from_design(design)

    x = np.linspace(0, 2 * np.pi, 100)
    axes['left_panel'].plot(x, np.sin(x), color='#2463a6')
    axes['right_panel'].plot(x, np.cos(x), color='#bc562f')
    for name, title in [('left_panel', 'Sine'), ('right_panel', 'Cosine')]:
        axes[name].set_title(title)
        axes[name].set_xlabel('x')
    axes['left_panel'].set_ylabel('Amplitude')
    return fig, axes


if __name__ == '__main__':
    fig, axes = make_example()
    fig.savefig('two_panels.svg')
    plt.close(fig)

The rendered figure after changing spacing to 0.4 inches.

Verify the relationship

The axes positions returned by Matplotlib are fractions of the figure width. Multiplying the gap by the six-inch figure width recovers its physical size:

>>> fig, axes = make_example(spacing=0.4)
>>> left = axes['left_panel'].get_position()
>>> right = axes['right_panel'].get_position()
>>> round(float((right.x0 - left.x1) * fig.get_figwidth()), 6)
0.4
>>> round(float(left.width - right.width), 6)
0.0
>>> round(float(left.y0 - right.y0), 6)
0.0

You can also recreate the layout programmatically. Copy this code into Python and call create_layout() to get the same design:

from pyplotdesigner.core.design import Design


def create_layout():
    design = Design(figure_width=6, figure_height=3)
    left = design.add_element(id='axis-0', type='axis', text='left_panel',
                              x=0.6, y=0.5, width=2.2, height=2)
    right = design.add_element(id='axis-1', type='axis', text='right_panel')
    spacing = design.add_constant(id='spacing', value=0.2)
    design.add_constraint(right.x, left.right, add_after=spacing.value)
    design.add_constraint(right.y, left.y)
    design.add_constraint(right.width, left.width)
    design.add_constraint(right.height, left.height)
    design.solve()
    return design