Vega/Vegalite do not render

[rchiodo]

Using the notebooks from here, try rendering a vega or vegalite control.

https://github.com/vega/ipyvega/tree/master/notebooks

None of them work.

Looks to be a problem with loading the vega script:

[someguynamedjosh]

I am also getting this on the latest insiders build.

However, I do not get the error in the developer console as posted above. The mimetype is set to application/javascript, the only other one available being text/plain. Switching to this just shows the python repr of the object:

I found this issue because I was experiencing it while using a Julia kernel, the behavior I am seeing there is slightly different:

The mime type is set to application/vnd.vegalite.v4+json. Switching it to an available image/* type like image/png correctly shows the plot:

But naturally, this means none of the interactive features work. Strangely enough, running the same commands from the REPL provided by the Julia extension causes a new window to open where all features work correctly:



Full text of code that is working in the REPL:

using DataFrames
using VegaDatasets
using VegaLite

data = dataset("cars")
data |> @vlplot(height=250, width="container", :bar, x="Origin:n", y="count()")

dataset("cars") |>
@vlplot(
    repeat={
        row=[:Horsepower, :Acceleration, :Miles_per_Gallon],
        column=[:Miles_per_Gallon, :Acceleration, :Horsepower]
    }
) +
@vlplot(
    :point,
    selection={
        brush={
            type=:interval,
            resolve=:union,
            on="[mousedown[event.shiftKey], window:mouseup] > window:mousemove!",
            translate="[mousedown[event.shiftKey], window:mouseup] > window:mousemove!",
            zoom="wheel![event.shiftKey]"
        },
        grid={
            type=:interval,
            resolve=:global,
            bind=:scales,
            translate="[mousedown[!event.shiftKey], window:mouseup] > window:mousemove!",
            zoom="wheel![!event.shiftKey]"
        }
    },
    x={field={repeat=:column}, type=:quantitative},
    y={field={repeat=:row}, type=:quantitative},
    color={
        condition={
            selection=:brush,
            field=:Origin,
            type=:nominal
        },
        value=:grey
    }
)

Both the notebook code and the REPL code produce a value of type VegaLite.VLSpec, but I am not knowledgeable enough of how this is handled to find where the handling is different between the notebook and the REPL.

[joyceerhl]

@joshua-maros Did this ever work for you? Just tried the following basic code, looks like this doesn't work in our custom editor notebooks either.

from vega import VegaLite 
from IPython.display import display 
display(VegaLite(
	{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
      {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
      {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
    "y": {"field": "b", "type": "quantitative"}
  }
}))

[someguynamedjosh]

@joyceerhl This is my first time using Vega, but I was under the impression that it was supported.

I've only used Plots.jl and the standard matplotib in the past successfully to get static charts in notebooks opened with vscode.

[someguynamedjosh]

Looking at it further, I noticed the "blank" window actually has an error message (written in white):

SyntaxError: Unexpected token o in JSON at position 1

I'll look more into what could be causing this.

[someguynamedjosh]

I've tracked down the issue, it looks like it was with some code from "another" extension that was being packaged up and shipped as part of this extension. The problem was that a JS object was being passed to the Vega renderer instead of a serialized JSON string, which is what it expected.

[joyceerhl]

@joshua-maros Sorry for the delayed response and thank you for submitting a fix. Assigning to myself so we make sure to review and accept your PR.

[greazer]

The supplied PR has been merged. Seems like this is working correctly now.