feat: support multi-panel plot

[jooyoungseo]

Feature Request

Description

Currently, maidr only support single-panel plot, which means a figure object contains only one panel. This feature request is to support multi-panel plot, which means a figure object can contain multiple panels (i.e., sub-plots). This feature is useful when we want to compare multiple plots side by side.

Motivation

Facetting and sub-plotting are common techniques in data visualization. They are useful for comparing multiple plots side by side. Python matplotlib and R ggplot2 packages support multi-panel plot. Our target users will encounter situations where they need to compare multiple plots side by side. Therefore, it is necessary to support multi-panel plot in maidr.

Proposed Solution

To facilitate our discussion, I have pushed example multi-panel SVG as well as its corresponding JSON schema.

1. Multi-panel SVG: https://github.com/xability/maidr/blob/a34e8ec4b00d5274e45ca4ac8b95db144755ae2d/examples/multi-panel/multi_panel.svg

2. Its JSON schema: https://github.com/xability/maidr/blob/a34e8ec4b00d5274e45ca4ac8b95db144755ae2d/examples/multi-panel/multi_panel_schema.json

My proposed user interaction with this multi-panel plot is as follows:

1. Just like other single-panel plots, users Tab to focus in the parent figure area which contains all the sub-plots

• Notes: Multi-panel object needs to contain aria-label to indicate the number of sub-plots it contains. For example,

This figure contains 12 sub-plots in a 3 by 2 grid layout. The title of the figure is "Penguin Bill Dimensions by Species and Sex". Use Arrow keys to navigate the sub-plots and press Enter to focus on a sub-plot.

2. When the multi-panel figure gets focused, users can navigate the figure grid layout via Arrow keys. The figure grid is a 2D grid where each cell contains a sub-plot. The grid layout follows the rows and columns structure specified in its JSON schema

• Note: Each panel (i.e., sub-plot) outline should be visually highlighted when it is focused. The sub-plot outline is a rectangle that surrounds the sub-plot.

3. Users can hit Enter to focus on a sub-plot. When a sub-plot is focused, users can interact with the sub-plot as if it is a single-panel plot where arrow keys are used to navigate data points.

4. Users can hit Escape to go back to the parent figure area.

Additional Context

N/A

Checklist

• [x] I have searched for similar feature requests and confirmed that this is a new request.
• [x] I have provided a clear and concise description of the feature.
• [x] I have explained the motivation behind this feature request.
• [x] I have outlined a proposed solution or ideas for implementing this feature.
• [x] I have provided any additional context or screenshots if applicable.

[jooyoungseo]

CC @SaaiVenkat FYI

[SaaiVenkat]

Professor @jooyoungseo , we need a clear distinction of the following terms,

1. Facet
2. Panel
3. Plot
4. Sub-plot
5. Layer

And I believe we need to have a common discussion regarding the JSON structure because,

1. to reduce the complexity and redundancy of the structure. For example, like axes, x, label, are specified for both panels, as well as in the root level, which is confusing.
2. and selectors won't be simple moving forward. One of the major issues faced is using a single selector for highlighting, even for a single layer graph. For example, python's version of Box plot is complicated enough to be represented in a single selector. We might have to introduce several selectors, even to differentiate the components of the BoxPlot. We have to device the structure based on this as well.
3. the internal structure used by Matplotlib, Seaborn, Plotly, ggplot2 are different, and our structure has to incorporate all.