Hydrogen: Altair visualization library doesn't work

[idmitrievsky]

Hello!

I've been working with your package lately and it's really great. Unfortunately, it fails to display the output of the Altair library. I try running this code from their homepage:

from altair import Chart, load_dataset

# load built-in dataset as a pandas DataFrame
cars = load_dataset('cars')

Chart(cars).mark_circle().encode(
    x='Horsepower',
    y='Miles_per_Gallon',
    color='Origin',
)

Notebook

Hydrogen

Notebook output contents

<div class="output_subarea output_html rendered_html"><div class="vega-embed" id="c21b9d22-57b7-4cc8-9edf-bac5abf1c864">
  <div class="vega" style="position: relative;">
    <canvas width="624" height="405" class="marks">
    </canvas>
  </div>
  <div class="vega-actions">
    <a href="#" target="_blank" download="vega.png">Export as PNG</a>
    <a href="#">View Source</a>
    <a href="#">Open in Vega Editor</a>
  </div>
</div>

<style>
.vega-embed svg, .vega-embed canvas {
  border: 1px dotted gray;
}

.vega-embed .vega-actions a {
  margin-right: 6px;
}
</style>
</div>

Hydrogen output contents

<div class="bubble-output-container">
  <div class="bubble-result-container">
    <div class="vega-embed" id="c8ff3624-14a1-4ad8-b422-bbaa30bdba13">
    </div>

    <style>
      .vega-embed svg, .vega-embed canvas {
        border: 1px dotted gray;
      }

      .vega-embed .vega-actions a {
        margin-right: 6px;
      }
    </style>
  </div>
  <div class="bubble-error-container plain-error">
  </div>
  <div class="bubble-status-container hidden" style="height: 21px">
    ...
  </div>
</div>

I am under the impression that the package that is used to embed Altair's graphics is https://github.com/vega/ipyvega, but I am not familiar with Altair's source enough to tell for sure.

So, does support for this library have to be added to Hydrogen by hand or is something broken here?

[rgbkrk]

What do the dev tools show with View -> Developer -> Toggle Developer Tools?

You'll want to check the js console for error messages.

[idmitrievsky]

Oh, I forgot to include it, sorry. Nothing that looks like an error in there.

[nikitakit]

Based on the Altair FAQ, it needs an nbextension in order to draw graphs. Link: https://altair-viz.github.io/faq.html#id2

Nbextensions are part of the notebook, not hydrogen, so it's not clear what can be done to fix this.

(On phone, sorry for brevity)

[rgbkrk]

The way we handle vega in nteract/nteract right now is a custom renderer/transform for mimetypes application/vnd.vega+json and application/vnd.vegalite+json. It currently requires the user to form a custom payload though:

import IPython.display
def vegify(spec):
    IPython.display.display({
        'application/vnd.vegalite+json': spec.to_dict()
    }, raw=True)

from altair import Chart, load_dataset

# load data as a pandas DataFrame
cars = load_dataset('cars')

spec = Chart(cars).mark_point().encode(
    x='Horsepower',
    y='Miles_per_Gallon',
    color='Origin',
)

vegify(spec)

Resulting notebook:

[rgbkrk]

I'd like to support vega and plotly as standard transforms in all the jupyter environments so libraries don't have to dump JS and HTML payloads for these.

[idmitrievsky]

Wow, I didn't know about nteract/nteract until now – it looks super cool! 😃 I think that it makes sense to mention nteract somewhere in Hydrogen README, it can interest some of Hydrogen users.

So custom handling of these mimetypes is going to be added to Hydrogen eventually? Looking forward to it, thank you for your answer!

[rgbkrk]

it makes sense to mention nteract somewhere in Hydrogen README, it can interest some of Hydrogen users

We would certainly welcome a pull request with that. 😄

So custom handling of these mimetypes is going to be added to Hydrogen eventually?

They wouldn't be too hard to add right now, it would probably be better to do it after nteract/nteract exports more modules so we don't have to maintain it in so many places.

[lgeiger]

Just some updates on this effort:

In #655 and #705 we added support for more transforms using the packages exported by nteract.

nteract also exports @nteract/transform-vega which is used by altair's output.

I wasn't able to get it working right out of the box, but I'm confident that it isn't too hard to implement with some tinkering. If anyone want's to pick up on this, any help is greatly appreciated 🎉

[lgeiger]

Will be fixed once Atom 1.20.0 is stable.

[lgeiger]

We will support Vega and Vega-Lite in the upcoming release:

[jakevdp]

Note for folks who come across this thread: For Altair version 2.0 or newer, the above vegify function is not required. The good news is that nteract will correctly display Altair plots by default once nteract's dependencies are updated and it supports Vega version 3.X and Vega-Lite version 2.X. The bad news is that until those dependencies are updated, it will not be possible to display Altair plots correctly in nteract.

If you want to use Altair in the meantime, please try another front-end, such as nteract desktop, nteract-on-jupyter, JupyterLab, Jupyter Notebook, or CoLab.

[rpalloni]

Thank you @jakevdp for adding the comment.
Here further info: https://github.com/altair-viz/altair/issues/710

@lgeiger should I open an issue?

[nikitakit]

We've had Vega 3 / Vega-lite support in github master for a little while, it just hasn't been published in a release yet. Everything should be compatible assuming that altair set up their display MIME types the same way as hydrogen and JupyterLab.

[rgbkrk]

@jakevdp is Altair only publishing the new spec now? Is it ok to deprecate the handling of the old spec at any point?

[jakevdp]

I think moving toward deprecating the old schema version (vega v2 and vega-lite v1) will be fine

Altair is now using the vegalite v2 mimetype, and I suspect that the vast majority of users will be using that soon.

That said, Altair does still have the ability to generate vegalite v1 mimetypes as well... JupyterLab and the classic notebook will still be able to handle those, though it will require explicitly enabling an extra extension in order to do so.

[rgbkrk]

@jakevdp - I just checked and vega v3 and vega-lite v2 are both supported in nteract desktop:

Hydrogen needs to upgrade to the latest of the display area. nteract desktop is totally fine and has been since nteract v0.6.0, which was released at the end of January. We're now on v0.8.4 so any system that allows the auto-upgrades should be all set.

[jakevdp]

That's great to hear – thanks!

[rgbkrk]

As of today's release of Hydrogen, we support Vega 3 and Vega-lite 2. Slick interactives!

[lgeiger]

Slick! Thanks for shipping