如何在Google Colab中渲染Vega-lite Viz

如何解决如何在Google Colab中渲染Vega-lite Viz

在Google Colab中呈现Vega-lite规范的推荐方法是什么？

This post描述了如何使用Vega而不是Vega-lite。

我也按照Slack上的建议进行了尝试

chart = alt.Chart.from_dict(vl_spec_dict)

但是，在Colab中，我使用this valid spec转换为Python dict时收到验证错误。下面给出了Python字典。

任何建议将不胜感激。

{'$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,'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,'percentage': 80},'counts': 80429,'percentage': 66},{'Year': '2013','counts': 1657,'counts': 82928,'percentage': 68},{'Year': '2014','counts': 1612,'percentage': 78},'counts': 84985,'percentage': 70},{'Year': '2015','counts': 1728,'percentage': 82},'counts': None,'percentage': None},{'Year': '2016','counts': 1844,'percentage': 84},'counts': 85561,'percentage': 72},{'Year': '2017','counts': 1984,'percentage': 85},'counts': 93130,'percentage': 74},{'Year': '2018','counts': 1950,'counts': 93684,'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',{'field': 'org','title': 'level','type': 'nominal'}],'x': {'axis': {'labelAngle': 55},'field': 'Year','y': {'field': 'percentage','scale': {'domain': [0,100]},'type': 'quantitative'}},'mark': {'color': 'orange','point': True,'type': 'line'}},{'encoding': {'text': {'field': 'percentage','x': {'field': 'Year','mark': {'size': 15,'type': 'text'}}],'title': 'Grade 3 Reading: Overall Achievement at or above the Provincial Standard','width': 300}

解决方法

您可以在Colab中使用Altair HTMl渲染器，然后使用IPython显示功能生成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)