Unable plot with vincent in IPython

Question

Trying to plot sample plot with vincent in IPython:

import vincent
vincent.core.initialize_notebook()

list_data = [10, 20, 30, 20, 15, 30, 45]

bar = vincent.Bar(list_data)
bar.display()

and nothing happens. Is there any special settings in IPython I need to enable to do it? An I need to disable inline option?

Answer 1

vincent.core.initialize_notebook() is hard-coded to import its Javascript libraries from CDNs over unsecured HTTP. This will fail if you are accessing your notebook server over HTTPS. (You can see errors to this effect if you open up the Javascript console in your browser, but otherwise it just silently fails.)

This is addressed in this pull request, but hasn't yet been fixed: https://github.com/wrobstory/vincent/pull/64

I worked around this myself by manually downloading all the referenced Javascript libraries into the local directory where my ipynb lives, and using this modified version of the notebook initialization routine to fetch those local copies, served over HTTPS directly by the Notebook server:

def init_vincent():
    """Initialize the IPython notebook display elements"""
    try:
        from IPython.core.display import display, HTML
    except ImportError:
        print('IPython Notebook could not be loaded.')

    require_js = '''
    if (window['d3'] === undefined) {{
        require.config({{ paths: {{d3: "/files/d3.v3.min"}} }});
        require(["d3"], function(d3) {{
          window.d3 = d3;
          {0}
        }});
    }};
    if (window['topojson'] === undefined) {{
        require.config(
            {{ paths: {{topojson: "/files/topojson.v1.min"}} }}
            );
        require(["topojson"], function(topojson) {{
          window.topojson = topojson;
        }});
    }};
    '''
    d3_geo_projection_js_url = "files/d3.geo.projection.v0.min.js"
    d3_layout_cloud_js_url = ("files/"
                              "d3.layout.cloud.js")
    topojson_js_url = "files/topojson.v1.min.js"
    vega_js_url = 'files/vega.js'

    dep_libs = '''$.getScript("%s", function() {
        $.getScript("%s", function() {
            $.getScript("%s", function() {
                $.getScript("%s", function() {
                        $([IPython.events]).trigger("vega_loaded.vincent");
                })
            })
        })
    });''' % (d3_geo_projection_js_url, d3_layout_cloud_js_url,
              topojson_js_url, vega_js_url)
    load_js = require_js.format(dep_libs)
    html = '<script>'+load_js+'</script>'
    display(HTML(html))

The only magic here is the knowledge that IPython's Notebook server serves files in the working directory where the ipynb files live at the path /files/*.

Answer 2

Following the comment from predicador37 worked for me as follows:

Upgrade to vincent version 0.4.4 with

pip install vincent==0.4.4

Insert the suggested initialize_notebook command, ie:

import vincent
vincent.core.initialize_notebook()
bar = vincent.Bar(multi_iter1['y1'])
bar.axis_titles(x='Index', y='Value')
bar.display()

Success! I get the visualization inside the notebook.