问题描述
如何在 Jupyter Lab/JupyterLab 中显示 vega 规范(例如 this 强制定向布局)?
解决方法
如果您不介意安装 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
) 中的数据。条形图之所以有效,是因为数据直接编码到规范中。