Add examples of the preferred way integrate dash with alternative plotting libraries

[joelostblom]

I am happy to provide such an example, but I am a little unsure which is the preferred integration method. I have previously been using Iframes for integrating Altair charts in my dash apps, but I recently stumbled over a tweet from @nicolaskruchten (:wave:) about dash-alternative-viz from a while back. Are there any plans to integrate this into dash or uploading it to PyPI as a separate installable package?

On that note, are there any advantages to using dash-alternative-viz over the Iframe approach other than the cleaner syntax? I guess performance would be similar since the whole plot is reloaded each time instead of updated partially as when using plotly graphs? Not having to set the height and width as with the Iframe would be a nice convenience though.

If you are OK with adding docs or a gallery example about this integration via the Iframe route, I can create a PR with something like this:

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
import altair as alt
from vega_datasets import data


# Read in global data
cars = data.cars()

# Setup app and layout/frontend
app = dash.Dash(__name__,  external_stylesheets=['https://codepen.io/chriddyp/pen/bWLwgP.css'])
app.layout = html.Div([
    html.Iframe(
        id='scatter',
        style={'border-width': '0', 'width': '100%', 'height': '400px'}),
    dcc.Dropdown(
        id='xcol-widget',
        value='Horsepower',  # REQUIRED to show the plot on the first page load
        options=[{'label': col, 'value': col} for col in cars.columns])])

# Set up callbacks/backend
@app.callback(
    Output('scatter', 'srcDoc'),
    Input('xcol-widget', 'value'))
def plot_altair(xcol):
    chart = alt.Chart(cars).mark_point().encode(
        x=xcol,
        y='Displacement',
        tooltip='Horsepower').interactive()
    return chart.to_html()

if __name__ == '__main__':
    app.run_server(debug=True)

dash-altair-2021-01-14_10.46.47.mp4

[firasm]

dash-alternative-viz looks great!! Would love it if that was made into a formal component so we can have first party support for other plotting libraries and avoid the messiness of iframes in a dash app.

In other words, +1 to above.

[binste]

I've just published a first version of dash-vega-components which you can use for any Vega-Altair chart or Vega/Vega-lite specification :) Feedback is very welcome!