`plots`: Add support for plotly as backend for render plots

[daavoo]

plotly is a set of Open Source Graphing Libraries for building "I_nteractive charts and maps for Python, R, Julia, ggplot2, .NET, and MATLAB®_".

The "high level" concept is very similar to vega-lite (the current DVC plots backend): Both are javascript libraries based on d3.js using JSON to describe the plot "schema" and provide "bindings" to generate plots in different languages (altair would be the vega-lite Python equivalent). See a more detailed comparison

It would be nice to extend DVC plots to support plotly as an alternative backend. The following is a non-exhaustive list of what I consider advantages (in DVC context) of adding support to plotly:

• Wider adoption

As a non exhaustive example, see differences between python bindings stats plotly / altair

• Better default interactivity

Try plotly line chart / vega-lite line chart

This is especially relevant for some complex plots like iterative/dvc#4455 , where plotly provides many relevant interactions by default (i.e. reordering columns, selecting subsets) that seem quite complicated to add (if even possible) in vega-lite:

plotly parallel coordinates / vega-lite parallel coordinates

• It seems fairly easy to implement 👼

After reviewing the internal dvc.render module and discussing it with @pared , it looks that it won't require too many changes on DVC to add support to plotly.

Edit by @dberenbaum to start a tasklist here of possible future plotly enhancements:

- [ ] Better smoothing (https://github.com/iterative/dvc-render/issues/135)
- [ ] Log-linear plots (https://github.com/iterative/dvc-render/pull/136)
- [ ] Zooming and panning (https://github.com/iterative/vscode-dvc/issues/4530)
- [ ] Responsive sizing (https://github.com/iterative/vscode-dvc/issues/3757)
- [ ] Better / TB-like tooltips https://github.com/iterative/vscode-dvc/issues/4532

[daavoo]

Haven't really thought on cross-product implications

[dberenbaum]

@shcheklein @tapadipti @Suor @rogermparent @mattseddon Interested to hear your thoughts on this.

[rogermparent]

Looks like a very cool library, and certainly much easier to use than Vega! The defaults don't quite match our design, but it seems there's enough ways to hook into hover and click events to make up for that and the ability to set colors to lines is much friendlier than the equivalent scale API in Vega.

I'd say if the goal is to encourage users to develop tools based on these plots, a more high-level alternative backend like plotly here could do the job. Worth noting it could add some complexity in features like --show-vega, but that can likely be handled without too much issue.
Maybe that could be handled by changing --show-vega to --show-json with a new --backend or --plots-backend flag that's vega by default and can be set to plotly? The names would make sense if we added images to the --show-vega output from iterative/dvc#6752.

[daavoo]

I'd say if the goal is to encourage users to develop tools based on these plots, a more high-level alternative backend like plotly here could do the job. Worth noting it could add some complexity in features like --show-vega, but that can likely be handled without too much issue. Maybe that could be handled by changing --show-vega to --show-json with a new --backend or --plots-backend flag that's vega by default and can be set to plotly? The names would make sense if we added images to the --show-vega output from iterative/dvc#6752.

Side note: I agree that --show-json would be a better name, even without plotly.

This is a very good point to discuss. My original idea for the backend was to be a property of each individual plot or even inferred from the template. So that users could mix plots with different backends in a single dvc.yaml:

stages:
  train:
    cmd: python train.py
    plots:
      - prc.json:
           cache: false
           x: recall
           y: precision
           template: linear_plotly.json # Inferred
       - roc.json:
           cache: false
           x: fpr
           y: tpr
           backend: plotly # Explicit

The main motivation (besides giving users flexibility) was that plotly (or another backend) would probably introduce some type of plot that is not easily supported in vega and we don't want to commit ourselves to maintain feature parity across plot backends.

However, when considering --show-json I assume that mixing schemas in that output could be a little problematic for integrations 🤔 (Is that assumption correct, @rogermparent ?)

[rogermparent]

I assume that mixing schemas in that output could be a little problematic for integrations thinking (Is that assumption correct?)

I think that would be the case, but it could be handled if there was some way to distinguish the plots with different schemas from each other.

[tapadipti]

Supporting plotly was one of the ideas that came up during Studio ideas brainstorming sessions a while back. And it is one of the items we have in the roadmap for next year. I'm not sure how much work it would be in Studio to support this (may be @Suor would have some idea), but eventually it needs to be supported (at least as per the current roadmap / plan).

[Suor]

As far as I see plotly template is not JSON but JavaScript code, which is problematic from security perspective.

[daavoo]

As far as I see plotly template is not JSON but JavaScript code, which is problematic from security perspective.

Not sure If I understand. At least on DVC side, plotly would behave "exactly" as vega.

For an example linear plot, we would have a JSON template with placeholders:

vega

{
    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
    "data": {
        "values": "<DVC_METRIC_DATA>"
    },
    "title": "<DVC_METRIC_TITLE>",
    "width": 300,
    "height": 300,
    "layer": [
        {
            "encoding": {
                "x": {
                    "field": "<DVC_METRIC_X>",
                    "type": "quantitative",
                    "title": "<DVC_METRIC_X_LABEL>"
                },
                "y": {
                    "field": "<DVC_METRIC_Y>",
                    "type": "quantitative",
                    "title": "<DVC_METRIC_Y_LABEL>",
                    "scale": {
                        "zero": false
                    }
                },
                "color": {
                    "field": "rev",
                    "type": "nominal"
                }
            },
            "layer": [
                {
                    "mark": "line"
                },
                {
                    "selection": {
                        "label": {
                            "type": "single",
                            "nearest": true,
                            "on": "mouseover",
                            "encodings": [
                                "x"
                            ],
                            "empty": "none",
                            "clear": "mouseout"
                        }
                    },
                    "mark": "point",
                    "encoding": {
                        "opacity": {
                            "condition": {
                                "selection": "label",
                                "value": 1
                            },
                            "value": 0
                        }
                    }
                }
            ]
        },
        {
            "transform": [
                {
                    "filter": {
                        "selection": "label"
                    }
                }
            ],
            "layer": [
                {
                    "mark": {
                        "type": "rule",
                        "color": "gray"
                    },
                    "encoding": {
                        "x": {
                            "field": "<DVC_METRIC_X>",
                            "type": "quantitative"
                        }
                    }
                },
                {
                    "encoding": {
                        "text": {
                            "type": "quantitative",
                            "field": "<DVC_METRIC_Y>"
                        },
                        "x": {
                            "field": "<DVC_METRIC_X>",
                            "type": "quantitative"
                        },
                        "y": {
                            "field": "<DVC_METRIC_Y>",
                            "type": "quantitative"
                        }
                    },
                    "layer": [
                        {
                            "mark": {
                                "type": "text",
                                "align": "left",
                                "dx": 5,
                                "dy": -5
                            },
                            "encoding": {
                                "color": {
                                    "type": "nominal",
                                    "field": "rev"
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ]
}

plotly

{
    "legendgroup": "<DVC_METRIC_COLOR>",
    "line": {
        "dash": "solid"
    },
    "marker": {
        "symbol": "circle"
    },
    "mode": "lines",
    "name": "<DVC_METRIC_COLOR>",
    "orientation": "v",
    "showlegend": true,
    "type": "scatter",
    "xaxis": "<DVC_METRIC_X_LABEL>",
    "yaxis": "<DVC_METRIC_Y_LABEL>",
    "x": "<DVC_METRIC_X>",
    "y": "<DVC_METRIC_Y>"
}

That would get filled with datapoints collected by DVC plots and embedded in an HTML div:

vega

  <div id = "{id}">
      <script type = "text/javascript">
          var spec = {partial};
          vegaEmbed('#{id}', spec);
      </script>
  </div>

plotly

  <div id = "{id}">
      <script type = "text/javascript">
          var plotly_data = {partial};
          Plotly.newPlot("{id}", plotly_data.data, plotly_data.layout);
      </script>
  </div>

The {partial} placeholder in the HTML div is filled, in both cases, a plain JSON object which is also what's currently returned when using the --show-vega option.

So, --show-plotly (or --show-json) would return a similar plain JSON object.