Data does not show in JupyterLab from local geojson file resources about mapboxgl-jupyter HOT 17 CLOSED

@scwilkinson @Juanlu001 thanks for the bug report. The method we're using in the example is to export data for visualization to a local file points.geojson, and then load the file from the local web server which Jupyter runs from the Python kernel (localhost:8888 normally). It looks like Jupyter Lab uses a different URL path to server local files than the root web server.

As a workaround, could you try exporting the dataframe to a python dict variable, and then creating the mapboxgl.viz.CircleViz from the python variable? The approach below should be the code you need:

# Create a geojson file export from a Pandas dataframe
data = df_to_geojson(df, properties=['Avg Medicare Payments', 'Avg Covered Charges', 'date'],
              lat='lat', lon='lon', precision=3)

# Generate data breaks and color stops from colorBrewer
color_breaks = [0,10,100,1000,10000]
color_stops = create_color_stops(color_breaks, colors='YlGnBu')

# Create the viz from the dataframe
viz = CircleViz(data, 
                height='400px',
                access_token='pk',
                color_property = "Avg Medicare Payments",
                color_stops = color_stops,
                center = (-95, 40),
                zoom = 3,
                #below_layer = 'waterway-label',
                style_url='https://openmaptiles.github.io/osm-bright-gl-style/style-cdn.json',
              )
viz.show()

from mapboxgl-jupyter.

agreed that in-memory object usage is better than storing temporary files.

from mapboxgl-jupyter.

Your rendermime extension that creates the visualization has access to this resolver, so it should be able to take a filename and convert it to a url it can use. It's passed in the arguments: https://github.com/jupyterlab/jupyterlab/blob/d740dee4980557a1d58fe0371bc467166f6cd9ac/packages/rendermime-interfaces/src/index.ts#L284
You probably want to use the getDownloadUrl function of that object: https://github.com/jupyterlab/jupyterlab/blob/d740dee4980557a1d58fe0371bc467166f6cd9ac/packages/rendermime-interfaces/src/index.ts#L332

from mapboxgl-jupyter.

It works, and I actually prefer this to the file-based approach :) Thanks!

from mapboxgl-jupyter.

@ryanbaumann For example, I have a Dockerfile in my root directory when I open JupyterLab. If I go to http://localhost:8888/files/Dockerfile it will be downloaded.

If I change the example in the README to add /files/ to the filename, I think it appears to work for me in JupyterLab:

from mapboxgl-jupyter.

Be careful that using the absolute url /files/filename.ext may not work if you have a url prefix (for example, I think in JupyterHub there is a prefix of the username?). It also is a bit tricky if you have
a file not in the root directory of the server.

If you use a relative URL, the frontend has a URL resolver that takes the url and should be able to give you back a URL to get that file.

from mapboxgl-jupyter.

I've had this same issue with mapboxgl 0.5.1, pip 9.0.1, python 3.6.4, and JupyterLab 0.31.8.

A vanilla Jupyter Notebook launched in the same environment shows the data just fine!

I'm on macOS and use Firefox (58.0.2), but I have the same problem in Chrome (64.0.3282.167).

from mapboxgl-jupyter.

I should also note that I've had very similar problems with other libraries similar to mapboxgl (gmaps, folium etc) in JupyterLab, so potentially it's the problem?

from mapboxgl-jupyter.

This works for me! I wasn't paying attention to the terminal output from JupyterLab, which includes:

[W 10:23:11.345 LabApp] 404 GET /points.geojson (::1) 2.29ms referer=http://localhost:8888/lab

Thank you!

from mapboxgl-jupyter.

Awesome @scwilkinson @Juanlu001, glad the local data variable works!

I'll leave this ticket open. We want to figure out an architecture for Jupyter Lab where the visualization can asynchronously load the data for performance and exporting the viz to an HTML file export reasons - this is especially useful when the data is very large.

from mapboxgl-jupyter.

In Jupyterlab you can use the /files/<filename> path to get a raw file. I know altair is going through a lot of the same design decisions, with their new version. They now support conditionally writing a temporary json file, which you can enable if you have a lot of data that you don't want to inline into the notebook.

Do you need anything from Jupyterlab to make progress on this?

from mapboxgl-jupyter.

@saulshanabrook can you show a quick example of how to directly link to a file in Jupyter Lab (and return the raw file, like a download link)?

from mapboxgl-jupyter.

excellent, thanks @saulshanabrook. That's perfect, we can add to the docs for how to run in Jupyter Lab. Closing!

from mapboxgl-jupyter.

Great!

from mapboxgl-jupyter.

I just realized that the way you are displaying data is to send an html iframe to the browser, so you won't have access to this url resolver.

Another way to do it that more clearly separates the backend from the rendering in the frontend is to define a mimetype for your data (rather than encoding everything into html in the kernel). Send your data over to the frontend in some semantically meaningful format. Then write a JupyterLab extension that takes this data and renders it onto the page, and uses the url resolver to resolve links.

from mapboxgl-jupyter.

Agree we could make a Jupyter Lab extension in the future - let's open up a new ticket to propose that sort of a solution, since it wouldn't be compatible with other HTML Notebook ecosystems.

from mapboxgl-jupyter.

wouldn't be compatible with other HTML Notebook ecosystems.

Since you can transmit a mimebundle with both HTML and this new format included, it could be backwards compatible, with the disadvantage of transmitting data twice in two different formats.

from mapboxgl-jupyter.