search

niloch / iplotter

JavaScript charting in ipython/jupyter notebooks -
http://niloch.github.io/iplotter/
MIT License
85 stars 10 forks source link

White output for scattergeo plot #3

Closed deeplook closed 8 years ago

deeplook commented 8 years ago

I try to create a scattergeo plot with iplotter and plotly.js. For that I'm using an example I've taken from the web (US airports data from https://plot.ly/python/scatter-plots-on-maps/) in Jupyter, and have only minimally changed the code (added a few .tolist() methods to be able to serialize to a proper JSON.) But I get a completely white output cell and the funny thing is: if I inspect the cell with a browser it does contain SVG code! I've added a sample gist here: https://gist.github.com/deeplook/b0ec5100f59f3bedadfa I'm clueless without asking some web developer to inspect the created output, but maybe I can find a hint here. Thanks!

deeplook commented 8 years ago

Same thing happens when I try reproducing this plot using iplotter: https://plot.ly/python/bubble-maps/#united-states-bubble-map

niloch commented 8 years ago

So to debug this, I first saved the plot to a file, then opened the file in a browser and looked at the javascript console, which was throwing an error because the data had not been properly escaped. Because of the need to use scr_doc for the iframe, the data is converted to a json string, and all double quotes are replaced with single quotes (kind of hacky). Some keys in your data already had single quotes like O'hare, hence the error. I added escaping for single quotes as well as pretty printing of the data to make debugging easier from an html file. Secondly, the plotly.js api expects a list of trace data, so the correct way is to use plotter.plot(data, layout) instead of plotter.plot(data[0], layout)