Display vega spec in Jupyter Lab

问题

How can I display a vega spec (such as this force directed layout) in Jupyter Lab/JupyterLab?

回答1:

You can use Vega Embed through the javascript extension:

Add the scripts:

%%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);

then

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)

Note: The example force directed spec at https://raw.githubusercontent.com/vega/vega/master/docs/examples/force-directed-layout.vg.json doesn't display because it references data at a relative url (data/miserables.json). The bar chart works because the data is encoded directly into the spec.

来源：https://stackoverflow.com/questions/66060197/display-vega-spec-in-jupyter-lab