在 Jupyter Lab 中显示 vega 规范

Question

如何在 Jupyter Lab/JupyterLab 中显示 vega 规范（例如 this 强制定向布局）？

Answer 1

如果你不介意安装 altair，你可以这样做：

from altair.vega import vega
import json
with open("bar-chart.vg.json") as f:
    s = json.load(f)
vega(s)

或者，您可以通过 javascript 扩展使用 Vega Embed：

添加脚本：

%%javascript
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '//cdn.jsdelivr.net/npm/vega@5';
    document.head.appendChild(script);
    
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '//cdn.jsdelivr.net/npm/vega-embed@6';
    document.head.appendChild(script);

然后

from IPython.display import Javascript
script = '''
var spec = "https://raw.githubusercontent.com/vega/vega/master/docs/examples/bar-chart.vg.json";
vegaEmbed(element, spec).then(function(result) {
  }).catch(console.error);  
'''

Javascript(script)

注意：https://raw.githubusercontent.com/vega/vega/master/docs/examples/force-directed-layout.vg.json 处的示例力定向规范不会显示，因为它引用了相对 url (data/miserables.json) 处的数据。条形图之所以有效，是因为数据直接编码到规范中。

在 Jupyter Lab 中显示 vega 规范

Display vega spec in Jupyter Lab

jupyter-lab

vega