How to render Vega-lite viz in Google Colab

Question

What is the recommended way of rendering a Vega-lite spec inside of Google Colab?

This post describes how to do this with Vega but not Vega-lite.

I've also tried this as suggested on Slack

chart = alt.Chart.from_dict(vl_spec_dict)

However, in Colab, I get a validation error using this valid spec converted a Python dict. The Python dict is given below.

Any suggestions would be much appreciated.

{'$schema': 'https://vega.github.io/schema/vega-lite/v4.8.1.json',
 'background': 'white',
 'config': {'axis': {'labelFontSize': 15,
   'labelLimit': 1000,
   'titleFontSize': 15},
  'legend': {'labelFontSize': 15, 'symbolSize': 100, 'titleFontSize': 15},
  'numberFormat': '.0f',
  'scale': {'bandPaddingInner': 0.5, 'bandPaddingOuter': 0.5},
  'style': {'bar': {'size': 20},
   'guide-label': {'fontSize': 15},
   'guide-title': {'fontSize': 15, 'value': 'asdf'}},
  'title': {'fontSize': 20, 'offset': 20}},
 'data': {'name': 'data-78d3ef908a3fe582b9e56995f5dff5f9'},
 'datasets': {'data-78d3ef908a3fe582b9e56995f5dff5f9': [{'Year': '2011',
    'counts': 1497,
    'org': 'Board',
    'percentage': 76},
   {'Year': '2011', 'counts': 78023, 'org': 'Province', 'percentage': 65},
   {'Year': '2012', 'counts': 1650, 'org': 'Board', 'percentage': 80},
   {'Year': '2012', 'counts': 80429, 'org': 'Province', 'percentage': 66},
   {'Year': '2013', 'counts': 1657, 'org': 'Board', 'percentage': 80},
   {'Year': '2013', 'counts': 82928, 'org': 'Province', 'percentage': 68},
   {'Year': '2014', 'counts': 1612, 'org': 'Board', 'percentage': 78},
   {'Year': '2014', 'counts': 84985, 'org': 'Province', 'percentage': 70},
   {'Year': '2015', 'counts': 1728, 'org': 'Board', 'percentage': 82},
   {'Year': '2015', 'counts': None, 'org': 'Province', 'percentage': None},
   {'Year': '2016', 'counts': 1844, 'org': 'Board', 'percentage': 84},
   {'Year': '2016', 'counts': 85561, 'org': 'Province', 'percentage': 72},
   {'Year': '2017', 'counts': 1984, 'org': 'Board', 'percentage': 85},
   {'Year': '2017', 'counts': 93130, 'org': 'Province', 'percentage': 74},
   {'Year': '2018', 'counts': 1950, 'org': 'Board', 'percentage': 84},
   {'Year': '2018', 'counts': 93684, 'org': 'Province', 'percentage': 75}]},
 'height': 300,
 'layer': [{'encoding': {'color': {'field': 'org',
     'title': None,
     'type': 'nominal'},
    'tooltip': [{'field': 'percentage',
      'title': 'Percentage of Students',
      'type': 'quantitative'},
     {'field': 'counts',
      'title': 'Number of Students',
      'type': 'quantitative'},
     {'field': 'org', 'title': 'level', 'type': 'nominal'}],
    'x': {'axis': {'labelAngle': 55},
     'field': 'Year',
     'title': None,
     'type': 'nominal'},
    'y': {'field': 'percentage',
     'scale': {'domain': [0, 100]},
     'title': 'Percentage of Students',
     'type': 'quantitative'}},
   'mark': {'color': 'orange', 'point': True, 'type': 'line'}},
  {'encoding': {'text': {'field': 'percentage', 'type': 'quantitative'},
    'tooltip': [{'field': 'percentage',
      'title': 'Percentage of Students',
      'type': 'quantitative'},
     {'field': 'counts',
      'title': 'Number of Students',
      'type': 'quantitative'},
     {'field': 'org', 'title': 'level', 'type': 'nominal'}],
    'x': {'field': 'Year', 'type': 'nominal'},
    'y': {'field': 'percentage', 'type': 'quantitative'}},
   'mark': {'size': 15, 'type': 'text'}}],
 'title': 'Grade 3 Reading: Overall Achievement at or above the Provincial Standard',
 'width': 300}

Answer 1

You can use the Altair HTMl renderer in Colab and then use the IPython display function to generate an out

import altair as alt
from IPython.display import display

spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "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"}
  }
}

display(alt.display.html_renderer(spec), raw=True)