feat: support 2-layered scatter plot

[krishnanand5]

Description

This PR aims to add demonstrations of how users can leverage Maidr to create double-layered scatterplots.

Type of Change

• Bug fix
• New feature
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• Any dependent changes have been merged and published in downstream modules

Pull Request

Description

This PR aims to include examples of how double-layered scatter plots can be created using maidr

Related Issues

#85

Changes Made

This is a draft PR that has the new 2-layered scatterplot example. As the example is still in development phase, I have included the html generation as part of the example. Additionally, the _inject_plot method has been modified to accept a flag called html. If set to True, the _inject_plot method will return the bare html for the plot. The default value is False and if the flag is set to False, the iframe element containing the plot will be returned.

Screenshots (if applicable)

Checklist

• I have read the Contributor Guidelines.
• I have performed a self-review of my own code and ensured it follows the project's coding standards.
• I have tested the changes locally following ManualTestingProcess.md, and all tests related to this pull request pass.
• I have commented my code, particularly in hard-to-understand areas.
• I have updated the documentation, if applicable.
• I have added appropriate unit tests, if applicable.

Additional Notes

I am encountering the following issues by leveraging the current py-binder and upstream dependancies.

• In the maidr example shared on the issue, I am unable to use the ↑ / ↓ to switch between the line plot and scatterplot.
• In the example I developed, the text related to the active component gets updated everytime I move from point to point on the scatterplot but the active components are not highlighted.

I have this error showing up on DevTools when the html is validated:

Whilst the secondary plot toggle seems to be an issue on the upstream repository, I would like to know if any additional changes should be done on the py-binder to activate highlighting of scatterplot components.

[jooyoungseo]

@krishnanand5 It's PageUp or PageDown key to switch between layers in the example. In the smoothed line layer, you need to use the autoplay key because it is a continuous line.

[jooyoungseo]

@krishnanand5 -- Actually, the second layer is different from the typical "line" graph where we can use LeftArrow or RightArrow keys. I think we will have to revisit the property value name here if we use "line" for both "line graph" and "smoothed line" which needs to be distinguished from one another.

[jooyoungseo]

@krishnanand5 Take a look at this line.

You need to do:

1. Inject x and y values for the second "smooth" layer from matplotlib: currently, our py binder only picks up the first "point" layer.

2. Include the second layer data structure within the JSON schema just like our example.