Impossible stretch with vincent in IPython

Question

Trying to plot the plot using 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. Are there any special settings in IPython that I need to enable for this? Do I need to disable the built-in option?

Answer 1

vincent.core.initialize_notebook() hard-coded to import its Javascript libraries from CDN over insecure HTTP. This will crash when accessing your laptop server via HTTPS. (You may see errors in this effect if you open the Javascript console in your browser, but otherwise it just stops working.)

This is covered in this stretch request but not yet fixed: https://github.com/wrobstory/vincent/pull/64

I bypassed this myself by manually downloading all the specified Javascript libraries to the local directory where my ipynb lives, and using this modified version of the laptop initialization procedure to extract these local copies, I served HTTPS directly with 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 knowing that the IPython Notebook server serves the files in the working directory, where the ipynb files live on the /files/* path.

Answer 2

Following the comment from predicador37, I worked for me as follows:

Update v.4.4.4 with

 pip install vincent==0.4.4 

Paste the suggested initialize_notebook command, i.e.

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

Success! I get visualization inside a laptop.

Answer 3

Is there any chance that you are behind a proxy? I get the same result. Googling around it looks like vincent.core.initialize_notebook () is trying to hit the following two URLs.

d3_js_url = "http://d3js.org/d3.v3.min.js" vega_js_url = 'http://trifacta.github.com/vega/vega.js'

I think that if I let Chrome have proxy credentials, this will work, but not due to IT limitations.