`plots`: Add bar chart template

[daavoo]

• https://vega.github.io/vega-lite/examples/bar.html

[tibor-mach]

This is quite a trivial modification of the default simple.json template (sorted by size, I am mostly using it for visualising feature importances)

{
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "data": {
        "values": "<DVC_METRIC_DATA>"
    },
    "title": "<DVC_METRIC_TITLE>",
    "width": 300,
    "height": 300,
    "mark": {
        "type": "bar"
    },
    "encoding": {
        "x": {
            "field": "<DVC_METRIC_X>",
            "type": "quantitative",
            "title": "<DVC_METRIC_X_LABEL>",
            "scale": {
                "zero": false
            }
        },
        "y": {
            "field": "<DVC_METRIC_Y>",
            "type": "nominal",
            "title": "<DVC_METRIC_Y_LABEL>",
            "sort":"-x"
        },
        "color": {
            "field": "rev",
            "type": "nominal"
        }
    }
}

But there is a problem with calling dvc plots diff, since it simply sums the values in each column, producing nonsense. Is there a simple way to make diff work like it does with confusion matrices (simply putting the old and new next to each other)? Or an even better - the diff could produce a grouped bar chart kind of like this one (only horizontal).

I'd love to work on this if you can guide me a bit with the dvc plots diff. Thanks!

[tibor-mach]

This is what the output of dvc plots diff looks like with this setup...not sure how to fix that but if it could work like with the confusion matrices or in the grouped bar chart, I think the simple template above is viable.

[daavoo]

@tibor-mach I think you can use https://vega.github.io/vega-lite/docs/encoding.html#positon-offset :

{
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "data": {
        "values": "<DVC_METRIC_DATA>"
    },
    "title": "<DVC_METRIC_TITLE>",
    "width": 300,
    "height": 300,
    "mark": {
        "type": "bar"
    },
    "encoding": {
        "x": {
            "field": "<DVC_METRIC_X>",
            "type": "quantitative",
            "title": "<DVC_METRIC_X_LABEL>",
            "scale": {
                "zero": false
            }
        },
        "y": {
            "field": "<DVC_METRIC_Y>",
            "type": "nominal",
            "title": "<DVC_METRIC_Y_LABEL>",
            "sort":"-x"
        },
+       "yOffset": {"field": "rev"},
        "color": {
            "field": "rev",
            "type": "nominal"
        }
    }
}

[tibor-mach]

Hmm, this works but in a curious way. When opened in the VS code dvc extension it works just as intended. When opened in the browser (firefox) via dvc plots diff --open it does not actually do the offset. It might be an issue with firefox I guess...

VS Code extension:

Firefox:

[tibor-mach]

And Chromium seems to render it the same way as Firefox...so it is unlikely a specific problem with one browser. I now wonder why it actually does work in VS Code :)

[tibor-mach]

Also, according to the JSON schema validation Property yOffset is not allowed.

[daavoo]

@tibor-mach Could you try replacing "$schema": "https://vega.github.io/schema/vega-lite/v4.json", with "$schema": "https://vega.github.io/schema/vega-lite/v5.json",

[tibor-mach]

Heh, yeah I was just going to say that the issue is with the version of vega. The error message goes away with the change in schema, but firefox still renders it wrong.

More precisely, the problem is with the version of vega-lite. If I change this:

    <script src="https://cdn.jsdelivr.net/npm/vega@5.20.2"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.1.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.18.2"></script>

to this:

    <script src="https://cdn.jsdelivr.net/npm/vega@5.20.2"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.2.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.18.2"></script>

then it works as intended. The validation schema is just for validation, dvc still renders the html with the same vega versions (but it would be good to bump it to v5 even for the default templates I guess).

So the fix is to have dvc use vega-lite v5.2.0 instead of vega-lite v5.1.0

I guess the VS code extension uses the latest version of vega-lite which is why there are no problems there.

[tibor-mach]

@daavoo Can we add (some version of) this? The template is a bit specific with the ordering (but that is useful exactly for the usecase of feature importance graphs). I guess the best thing would be to just have bar and make it configurable via commands.

But a more pressing thing is the vega-lite version, that is basically a bug (except that it does not manifest with the current default templates). The fix seems easy enough but I am not sure what to do. It seems to be correct here. But I guess dvc uses a different version of dvc-render (the latest release of dvc-render already has the correct version)?

Never mind, the vega version issue was solved today with the dvc v2.12 release :-)