[enhancement] plot legend, recommend change "trace", "null", incrementing

[gweinberg]

The particular variables or particular lesson might not matter, but just for instance, go to:

https://isle.stat.cmu.edu/36-200-first-summer-21/lab3/ ->

toobox -> plots -> scatterplot -> x-axis = "GDPPerCapita", y=axis="Internet" -> color by "majority rule" -> split by "majority rule" -> linear -> generate.

Then, the legend looks like:

which is confusing to an end user for a variety of reasons:

First: The use of the term "trace" is confusing (I'm guessing "trace" is programming-speak, referring to something internal?). To an end user, that's unclear/confusing.

Second: Similarly, the use of increments is confusing and unrelated to the data (I'm guessing it's merely something internal to the code?), and is not relevant to an end user and thus is confusing;

Third: For some reason, "null" is incremented after zero;

Fourth: An end user isn't going to understand that "null" refers to the fact that there was missing data; and the fact that something orange appears on the legend which doesn't match anything orange on the plot is going to further confuse an end user.

Fifth: The dot character is being used on the legend to mean two different things: The dot is used for the green and blue to represent actual points on the plot; but the dot is also being used in orange as an abstract representation of missing data (not actual points on the plot). That's bad/misleading design.

I recommend changing the wording/labeling of the panel, maybe something like this:

[Planeshifter]

Thanks for these suggestions, which all sound reasonable to me!

Having multiple legend is currently prevented by Plotly missing the required functionality; there is an open feature request, although it does not seem to be worked on and likely won't be unless sponsored by a company.

However, we should be able to update the labels of the items in the legend and handle missing values differently. I will investigate possibilities shortly.

[gweinberg]

hmm yeah since the variable you can color-by could be different than the variable you can split-by, two separate legends would make the most sense (or a panel with two side-by-side legends or something).
Could we mimic two legends by adding a dividing line and two header texts, like:

[Planeshifter]

So it looks like that we should be able to have "grouped legends" (per examples at https://plotly.com/javascript/legend/#grouped-legend), but there is currently no ability to add a title, as evidenced by the following open issue. In the linked issue, someone suggested working around the limitation by manually placing overlaid annotations at the respective positions. I will investigate what we can do with the available functionality of Plotly.js.