altair: Altair graphs wrapped in ipywidgets.Output not being rendered

Dear all,

first of all, thank you for a very nice library that produces beautiful, interactive graphs with very little effort.

We are trying to use these graphs in notebooks served via voila as interactive web applications. We managed to get all the various graphs to show up, when using the kaggle renderer, which will work in both, plain jupyter notebooks (not lab) and voila webapps.

However, when we wrap these graphs into an ipywidget.Output class, there is no more output in neither plain jupyter, nor the voila webapps. An example adapted from the simplemost altair graph I could find is attached below:

from IPython import display
import ipywidgets as widgets
import altair as alt
import pandas as pd

alt.renderers.enable('kaggle',embed_options={'actions': False})

source = pd.DataFrame({
    'a': ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'],
    'b': [28, 55, 43, 91, 81, 53, 19, 87, 52]
})

chart = alt.Chart(source).mark_bar().encode(
    x='a',
    y='b'
)
output = widgets.Output()
with output:
    display.display(chart)
output

Being able to wrap graphs into specific outputs is important to control the content that is displayed to the user when serving notebooks as interactive webapps via voila and we were wondering whether there is some way to achieve this behavior?

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 16 (8 by maintainers)

Most upvoted comments

It is now possible to use the JupyterChart class to create Altair charts that can interact with jupyter/ipywidgets directly and works anywhere these widgets are supported (such as in Voila). See this section in the docs for details https://altair-viz.github.io/user_guide/jupyter_chart.html

joelostblom on Jan 5, 2024

@sradomski I am going through Altair issues to find those that have been resolved and can be closed. Would you be able to close this issue or add a comment if there is something you don’t think is resolved yet?

joelostblom on Feb 23, 2021

I faced the same issue, and can present a workaround:

I use Altair Viewer to display my chart via a local HTTP server, then I create an iframe and pass it on as a widget; e.g:

import altair as alt
import pandas as pd
from IPython.display import display, IFrame
alt.renderers.enable('altair_viewer')

source = pd.DataFrame({
    'a': ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'],
    'b': [28, 55, 43, 91, 81, 53, 19, 87, 52]
})

chart = alt.Chart(source).mark_bar().encode(
    x='a',
    y='b'
)
chart

Displaying chart at http: // localhost:19826 /

result = widgets.Output()

scr='http://localhost:19826/'

with result:
    display(IFrame(scr,width=300,height=400))
result

crendl on Oct 22, 2020

Having this JavaScript magic at the top of your notebook will allow Altair / Vega graphs to be wrapped in ipywidget.Output and be displayed in voila with the kaggle renderer and the latest version in conda:

%%javascript
(function() {
    var el = document.getElementById("notebook-container")
    const config = { attributes: false, childList: true, subtree: true };
    const callback = function(mutationsList, observer) {
        for(let mutation of mutationsList) {
            if (mutation.type === 'childList') {
                if ($(mutation.target).hasClass('jupyter-widgets-view')) {
                    $(mutation.target).find("script").each(function() {
                        // make sure we found a script with an accompanying altair-viz
                        if ($(this).prev().attr('id').startsWith('altair-viz-')) {
//                             console.log(this)
                            eval(this.innerHTML);
                        }
                    })
                }
            }
        }
    }
    
    const observer = new MutationObserver(callback);
    observer.observe(el, config);

})();

It will register a MutationObserver at the Jupyter output container and evaluate all the Javascript that has a corresponding div with an altair visualization. It is very much a hack but does the job for my demo on thursday 😄

sradomski on Nov 24, 2019