Skip to content

Instantly share code, notes, and snippets.

@gschivley
Created May 13, 2018 18:32
Show Gist options
  • Save gschivley/578c344461100071b7eef158efccce95 to your computer and use it in GitHub Desktop.
Save gschivley/578c344461100071b7eef158efccce95 to your computer and use it in GitHub Desktop.
Altair plot in Plotly Dash
# -*- 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)
@damajojung
Copy link

Many thanks, helped me a lot with my project!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment