Altair plot in Plotly Dash

altair_app.py

# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import pandas as pd
import sqlalchemy
import altair as alt
import io
from vega_datasets import data

# Don't need this with the cars dataset
alt.data_transformers.enable('default', max_rows=10000)

# Not using sql here
# conn = sqlalchemy.create_engine()

cars = data.cars()

app = dash.Dash(__name__, static_folder='assets')
app.css.append_css({'external_url':
                    'https://cdn.rawgit.com/gschivley/8040fc3c7e11d2a4e7f0589ffc829a02/raw/fe763af6be3fc79eca341b04cd641124de6f6f0d/dash.css'
                    })
app.title = 'Test dash and altair'
server = app.server


app.layout = html.Div([
    html.Div([

    html.P([
        html.Label('x-axis'),
        # dcc.Input(id='mother_birth', value=1952, type='number'),
        dcc.Dropdown(
            id='x_axis',
            options=[{'label': i, 'value':i} for i in cars.columns],
            value='Acceleration'
        )
    ],
    style={'width': '250px', 'margin-right': 'auto',
           'margin-left': 'auto', 'text-align': 'center'}),
    html.P([
        html.Label('y-axis'),
        # dcc.Input(id='mother_birth', value=1952, type='number'),
        dcc.Dropdown(
            id='y_axis',
            options=[{'label': i, 'value':i} for i in cars.columns],
            value='Miles_per_Gallon'
        )
    ],
    style={'width': '250px', 'margin-right': 'auto',
           'margin-left': 'auto', 'text-align': 'center'})],
           className='input-wrapper'),


    html.Iframe(
        id='plot',
        height='500',
        width='1000',
        sandbox='allow-scripts',

        # This is where we will pass the html
        # srcDoc=

        # Get rid of the border box
        style={'border-width': '0px'}
    )
])

@app.callback(
    dash.dependencies.Output('plot', 'srcDoc'),
    [dash.dependencies.Input('x_axis', 'value'),
     dash.dependencies.Input('y_axis', 'value')]
)
def pick_figure(x_axis, y_axis):

    brush = alt.selection_interval()

    points_cars = alt.Chart(cars).mark_point().encode(
        x=x_axis,
        y=y_axis,
    ).properties(
        width=250,
        height=250,
        selection=brush
    )

    bars = alt.Chart(cars).mark_bar().encode(
        x='Horsepower:Q',
        y='count()'
    ).transform_filter(
        brush.ref()
    )

    chart = alt.hconcat(points_cars, bars)
    
    # Save html as a StringIO object in memory
    cars_html = io.StringIO()
    chart.save(cars_html, 'html')
    
    # Return the html from StringIO object
    return cars_html.getvalue()



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