JavaScript output is disabled in JupyterLab

Question

Although Google has a lot to say when searching for the title I could not find anything that helped me...

When running the following code in a Jupyter notebook

from vega import VegaLite

VegaLite(
{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "description": "A simple bar chart with embedded data.",
  "width": 360,
  "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": "ordinal"},
    "y": {"field": "b", "type": "quantitative"},
    "tooltip": {"field": "b", "type": "quantitative"}
  }
})

I get the error message

JavaScript output is disabled in JupyterLab

I switched to JupyterLab 0.35.3. Here I can open Vega files and they are rendered. For rendering inside a notebook I use Altair 2.3.0. — lanes
– lanes, Commented Feb 1, 2019 at 15:15
Altair dropped support for Vega in version 5, it now only supports vega-lite, so if you want to use a feature that is only supported in vega that's nolonger an option. — alwaysmpe
– alwaysmpe, Commented Oct 19, 2023 at 0:54

Hermes Morales · Accepted Answer · 2019-02-15 18:54:06Z

17

You must change to Help Launch Classic Notebook

answered Feb 15, 2019 at 18:54

Hermes Morales

6838 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

a06e Over a year ago

And then what do you do?

TheHeadlessSourceMan · Accepted Answer · 2022-05-02 19:04:01Z

1

I was having the same problem.

According to this github issue, creating widgets this way, "was only ever intended to be a quick way to experiment with widgets before creating a real widget package, so is a bit hacky."

It only worked in Jupyter Notebook has since been deprecated in Jupyter Lab.

They recommend starting off with the official cookie cutter template and creating a proper widget. Tutorial here: https://jupyterlab.readthedocs.io/en/3.2.x/extension/extension_tutorial.html#

answered May 2, 2022 at 19:04

TheHeadlessSourceMan

7579 silver badges22 bronze badges

1 Comment

Rainb Over a year ago

it looks it hasn't been mantained in quite a while

alwaysmpe · Accepted Answer · 2023-10-19 00:40:18Z

JupyterLab now has builtin support for Vega. A raw schema can be displayed

schema = {
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "description": "A simple bar chart with embedded data.",
  "width": 360,
   "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": "ordinal"},
    "y": {"field": "b", "type": "quantitative"},
    "tooltip": {"field": "b", "type": "quantitative"}
  }
}
display({'application/vnd.vega.v5+json': schema}, raw=True)

Or alternatively this can be wrapped in an object as follows. This way if the object is the last statement of a cell it's automatically rendered.

from dataclasses import dataclass
@dataclass
class Vega:
    schema: dict

    def _repr_mimebundle_(self, *args, **kwargs):
        return {'application/vnd.vega.v5+json': self.schema}

plot = Vega(schema)
plot

The documentation includes a list of supported mime types

Collectives™ on Stack Overflow

JavaScript output is disabled in JupyterLab

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related