Generating multiple plots with Dash
2
I'm new to Dash/Plot.ly and currently, I'm trying to reproduce the following plots (produced with matplotlib) with Dash:
My attempt to do so was to creat a method to generate a single figure:
def serve_prediction_plot(model, title, X, X_proj, y, y_proc, train_idx, test_idx, Z, xx, yy, x0, y0, d):
# Get train and test score from model
train_score = cross_val_score(model, X[train_idx], y_proc[train_idx]).mean()
test_score = model.score(X[test_idx], y_proc[test_idx])
# Colorscale
bright_cscale = [[0, '#FF0000'], [1, '#0000FF']]
colorscale_zip = zip(np.arange(0, 1.01, 1 / 8), cl.scales['9']['div']['RdBu'])
cscale = list(map(list, colorscale_zip))
axis_template = dict(
showgrid=False,
zeroline=False,
linecolor='white',
showticklabels=False,
ticks=''
)
layout = dict(
title=title,
xaxis=axis_template,
yaxis=axis_template,
showlegend=False,
hovermode='closest',
autosize=False,
margin=dict(l=0, r=0, t=30, b=0)
)
# Plot the prediction contour of the models
Z = Z.reshape(xx.shape)
print(Z.shape)
trace0 = go.Heatmap(
z=Z,
hoverinfo='none',
showscale=False,
colorscale=cscale,
x0=x0,
y0=y0,
dx=d,
dy=d
)
# Plot Training Data
trace1 = go.Scatter(
x=X_proj[train_idx, 0],
y=X_proj[train_idx, 1],
mode='markers',
name='Training Data (accuracy={:.3f})'.format(train_score),
text=y[train_idx],
marker=dict(
size=10,
color=y_proc[train_idx],
colorscale=bright_cscale,
line=dict(
width=1
)
)
)
# Plot Test Data
trace2 = go.Scatter(
x=X_proj[test_idx, 0],
y=X_proj[test_idx, 1],
mode='markers',
name='Test Data (accuracy={:.3f})'.format(train_score),
text=y[test_idx],
marker=dict(
size=10,
symbol='triangle-up',
color=y_proc[test_idx],
colorscale=bright_cscale,
line=dict(
width=1
),
)
)
data = [trace0, trace1, trace2]
figure = go.Figure(data=data, layout=layout)
return figure
Which is call when building the Dash view:
def generate_dense_maps():
return html.Div(
className='row',
style={
'margin-top': '5px',
# Remove possibility to select the text for better UX
'user-select': 'none',
'-moz-user-select': 'none',
'-webkit-user-select': 'none',
'-ms-user-select': 'none'
},
children=[
html.Div(
[
dcc.Graph(
id='graph-{name}'.format(name=clf_name),
figure=serve_prediction_plot(clf,
clf_name,
service.dataset.X,
service.dataset.X_proj,
service.dataset.y,
service.dataset.y_proc,
service.dataset.train_idx,
service.dataset.test_idx,
service.get_prediction(clf),
service.grid.xx,
service.grid.yy,
service.x_min,
service.y_min,
service.grid.h),
)
],
className="two columns"
) for clf_name, clf in service.classifiers.items()
]
)
# -------------------- Dash --------------------
app = dash.Dash(__name__)
app.layout = html.Div(children=[
# -------------------- Title Bar --------------------
html.Div(className="banner", children=[
html.Div(className='container scalable', children=[
html.H2(html.A(
'Title goes here',
style={
'text-decoration': 'none',
'color': 'inherit'
}
)),
html.A(
html.Img(src="https://s3-us-west-1.amazonaws.com/plotly-tutorials/logo/new-branding/dash-logo-by-plotly-stripe-inverted.png"),
href='https://plot.ly/products/dash/'
)
]),
]),
# -------------------- Body -------------------------
html.Div(id='body', className='container scalable', children=[
html.Div(className='row', children=[
# -------------------- Classifiers ------------------
html.Div(
id='div-classifiers', children=[
html.H4(html.A(
'Classifiers',
style={
'text-decoration': 'none',
'color': 'inherit'
}
)),
generate_dense_maps()
]
),
# -------------------- Uncertainty ------------------
html.Div(
id='div=uncertainty'
)
])
])
])
However, the images are being cut off:
I wonder what I'm missing or how to properly achieve the desired output.
I've also tryied to plot something like this (which I'd actually think would look better on web):
image1 | image2
image3 | image4
image5 | image6
Without any luck.
MINIMAL EXAMPLE
import numpy as np
from sklearn.cross_validation import train_test_split
from sklearn.preprocessing import StandardScaler
from sklearn.datasets import make_moons, make_circles, make_classification
from sklearn.neighbors import KNeighborsClassifier
from sklearn.svm import SVC
from sklearn.tree import DecisionTreeClassifier
from sklearn.ensemble import RandomForestClassifier
names = ["Nearest Neighbors", "Linear SVM", "RBF SVM", "Decision Tree",
"Random Forest"]
classifiers = [
KNeighborsClassifier(3),
SVC(kernel="linear", C=0.025, probability=True),
SVC(gamma=2, C=1, probability=True),
DecisionTreeClassifier(max_depth=5),
RandomForestClassifier(max_depth=5, n_estimators=10, max_features=1),
]
X, y = make_classification(n_features=2, n_redundant=0, n_informative=2,
random_state=1, n_clusters_per_class=1)
rng = np.random.RandomState(2)
X += 2 * rng.uniform(size=X.shape)
h = .02
X = StandardScaler().fit_transform(X)
X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=.4)
x_min, x_max = X[:, 0].min() - .5, X[:, 0].max() + .5
y_min, y_max = X[:, 1].min() - .5, X[:, 1].max() + .5
xx, yy = np.meshgrid(np.arange(x_min, x_max, h),
np.arange(y_min, y_max, h))
import plotly.graph_objs as go
import colorlover as cl
from sklearn.model_selection import cross_val_score
def serve_prediction_plot(model, title, X_train, y_train, X_test, y_test, xx, yy, d):
# Get train and test score from model
model.fit(X_train, y_train)
train_score = cross_val_score(model, X_train, y_train).mean()
test_score = model.score(X_test, y_test)
# Colorscale
bright_cscale = [[0, '#FF0000'], [1, '#0000FF']]
colorscale_zip = zip(np.arange(0, 1.01, 1 / 8), cl.scales['9']['div']['RdBu'])
cscale = list(map(list, colorscale_zip))
axis_template = dict(
showgrid=False,
zeroline=False,
linecolor='white',
showticklabels=False,
ticks=''
)
layout = dict(
title=title,
xaxis=axis_template,
yaxis=axis_template,
showlegend=False,
hovermode='closest',
autosize=False,
margin=dict(l=0, r=0, t=30, b=0)
)
# Plot the prediction contour of the models
try:
Z = model.predict_proba(np.c_[xx.ravel(), yy.ravel()])[:, 1]
except NotImplementedError:
Z = model.decision_function(np.c_[xx.ravel(), yy.ravel()])
Z = Z.reshape(xx.shape)
print(Z.shape)
trace0 = go.Heatmap(
z=Z,
hoverinfo='none',
showscale=False,
colorscale=cscale,
x0=xx.min(),
y0=yy.min(),
dx=d,
dy=d
)
# Plot Training Data
trace1 = go.Scatter(
x=X_train[:, 0],
y=X_train[:, 1],
mode='markers',
name='Training Data (accuracy={:.3f})'.format(train_score),
text=y_train,
marker=dict(
size=10,
color=y_train,
colorscale=bright_cscale,
line=dict(
width=1
)
)
)
# Plot Test Data
trace2 = go.Scatter(
x=X_test[:, 0],
y=X_test[:, 1],
mode='markers',
name='Test Data (accuracy={:.3f})'.format(train_score),
text=y_test,
marker=dict(
size=10,
symbol='triangle-up',
color=y_test,
colorscale=bright_cscale,
line=dict(
width=1
),
)
)
data = [trace0, trace1, trace2]
figure = go.Figure(data=data, layout=layout)
return figure
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
def generate_dense_maps():
return html.Div(
className='row',
style={
'margin-top': '5px',
# Remove possibility to select the text for better UX
'user-select': 'none',
'-moz-user-select': 'none',
'-webkit-user-select': 'none',
'-ms-user-select': 'none'
},
children=[
html.Div(
[
dcc.Graph(
id='graph-{name}'.format(name=clf_name),
figure=serve_prediction_plot(clf, clf_name, X_train, y_train, X_test, y_test, xx, yy, h),
)
],
className="two columns"
) for clf_name, clf in zip(names, classifiers)
]
)
# -------------------- Dash --------------------
app = dash.Dash(__name__)
app.layout = html.Div(children=[
# -------------------- Title Bar --------------------
html.Div(className="banner", children=[
html.Div(className='container scalable', children=[
html.H2(html.A(
'Title goes here',
style={
'text-decoration': 'none',
'color': 'inherit'
}
)),
html.A(
html.Img(src="https://s3-us-west-1.amazonaws.com/plotly-tutorials/logo/new-branding/dash-logo-by-plotly-stripe-inverted.png"),
href='https://plot.ly/products/dash/'
)
]),
]),
# -------------------- Body -------------------------
html.Div(id='body', className='container scalable', children=[
html.Div(className='row', children=[
# -------------------- Classifiers ------------------
html.Div(
id='div-classifiers', children=[
html.H4(html.A(
'Classifiers',
style={
'text-decoration': 'none',
'color': 'inherit'
}
)),
generate_dense_maps()
])
])
])
])
external_css = [
# Normalize the CSS
"https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css",
# Fonts
"https://fonts.googleapis.com/css?family=Open+Sans|Roboto",
"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
# Base Stylesheet, replace this with your own base-styles.css using Rawgit
"https://rawgit.com/xhlulu/9a6e89f418ee40d02b637a429a876aa9/raw/f3ea10d53e33ece67eb681025cedc83870c9938d/base-styles.css",
# Custom Stylesheet, replace this with your own custom-styles.css using Rawgit
"https://cdn.rawgit.com/plotly/dash-svm/bb031580/custom-styles.css"
]
for css in external_css:
app.css.append_css({"external_url": css})
app.run_server(debug=True)
python matplotlib plotly dash
asked Jan 18 at 16:14
pcecconpceccon
2,676104387
add a comment |
2
I'm new to Dash/Plot.ly and currently, I'm trying to reproduce the following plots (produced with matplotlib) with Dash:
My attempt to do so was to creat a method to generate a single figure:
def serve_prediction_plot(model, title, X, X_proj, y, y_proc, train_idx, test_idx, Z, xx, yy, x0, y0, d):
# Get train and test score from model
train_score = cross_val_score(model, X[train_idx], y_proc[train_idx]).mean()
test_score = model.score(X[test_idx], y_proc[test_idx])
# Colorscale
bright_cscale = [[0, '#FF0000'], [1, '#0000FF']]
colorscale_zip = zip(np.arange(0, 1.01, 1 / 8), cl.scales['9']['div']['RdBu'])
cscale = list(map(list, colorscale_zip))
axis_template = dict(
showgrid=False,
zeroline=False,
linecolor='white',
showticklabels=False,
ticks=''
)
layout = dict(
title=title,
xaxis=axis_template,
yaxis=axis_template,
showlegend=False,
hovermode='closest',
autosize=False,
margin=dict(l=0, r=0, t=30, b=0)
)
# Plot the prediction contour of the models
Z = Z.reshape(xx.shape)
print(Z.shape)
trace0 = go.Heatmap(
z=Z,
hoverinfo='none',
showscale=False,
colorscale=cscale,
x0=x0,
y0=y0,
dx=d,
dy=d
)
# Plot Training Data
trace1 = go.Scatter(
x=X_proj[train_idx, 0],
y=X_proj[train_idx, 1],
mode='markers',
name='Training Data (accuracy={:.3f})'.format(train_score),
text=y[train_idx],
marker=dict(
size=10,
color=y_proc[train_idx],
colorscale=bright_cscale,
line=dict(
width=1
)
)
)
# Plot Test Data
trace2 = go.Scatter(
x=X_proj[test_idx, 0],
y=X_proj[test_idx, 1],
mode='markers',
name='Test Data (accuracy={:.3f})'.format(train_score),
text=y[test_idx],
marker=dict(
size=10,
symbol='triangle-up',
color=y_proc[test_idx],
colorscale=bright_cscale,
line=dict(
width=1
),
)
)
data = [trace0, trace1, trace2]
figure = go.Figure(data=data, layout=layout)
return figure
Which is call when building the Dash view:
def generate_dense_maps():
return html.Div(
className='row',
style={
'margin-top': '5px',
# Remove possibility to select the text for better UX
'user-select': 'none',
'-moz-user-select': 'none',
'-webkit-user-select': 'none',
'-ms-user-select': 'none'
},
children=[
html.Div(
[
dcc.Graph(
id='graph-{name}'.format(name=clf_name),
figure=serve_prediction_plot(clf,
clf_name,
service.dataset.X,
service.dataset.X_proj,
service.dataset.y,
service.dataset.y_proc,
service.dataset.train_idx,
service.dataset.test_idx,
service.get_prediction(clf),
service.grid.xx,
service.grid.yy,
service.x_min,
service.y_min,
service.grid.h),
)
],
className="two columns"
) for clf_name, clf in service.classifiers.items()
]
)
# -------------------- Dash --------------------
app = dash.Dash(__name__)
app.layout = html.Div(children=[
# -------------------- Title Bar --------------------
html.Div(className="banner", children=[
html.Div(className='container scalable', children=[
html.H2(html.A(
'Title goes here',
style={
'text-decoration': 'none',
'color': 'inherit'
}
)),
html.A(
html.Img(src="https://s3-us-west-1.amazonaws.com/plotly-tutorials/logo/new-branding/dash-logo-by-plotly-stripe-inverted.png"),
href='https://plot.ly/products/dash/'
)
]),
]),
# -------------------- Body -------------------------
html.Div(id='body', className='container scalable', children=[
html.Div(className='row', children=[
# -------------------- Classifiers ------------------
html.Div(
id='div-classifiers', children=[
html.H4(html.A(
'Classifiers',
style={
'text-decoration': 'none',
'color': 'inherit'
}
)),
generate_dense_maps()
]
),
# -------------------- Uncertainty ------------------
html.Div(
id='div=uncertainty'
)
])
])
])
However, the images are being cut off:
I wonder what I'm missing or how to properly achieve the desired output.
I've also tryied to plot something like this (which I'd actually think would look better on web):
image1 | image2
image3 | image4
image5 | image6
Without any luck.
MINIMAL EXAMPLE
import numpy as np
from sklearn.cross_validation import train_test_split
from sklearn.preprocessing import StandardScaler
from sklearn.datasets import make_moons, make_circles, make_classification
from sklearn.neighbors import KNeighborsClassifier
from sklearn.svm import SVC
from sklearn.tree import DecisionTreeClassifier
from sklearn.ensemble import RandomForestClassifier
names = ["Nearest Neighbors", "Linear SVM", "RBF SVM", "Decision Tree",
"Random Forest"]
classifiers = [
KNeighborsClassifier(3),
SVC(kernel="linear", C=0.025, probability=True),
SVC(gamma=2, C=1, probability=True),
DecisionTreeClassifier(max_depth=5),
RandomForestClassifier(max_depth=5, n_estimators=10, max_features=1),
]
X, y = make_classification(n_features=2, n_redundant=0, n_informative=2,
random_state=1, n_clusters_per_class=1)
rng = np.random.RandomState(2)
X += 2 * rng.uniform(size=X.shape)
h = .02
X = StandardScaler().fit_transform(X)
X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=.4)
x_min, x_max = X[:, 0].min() - .5, X[:, 0].max() + .5
y_min, y_max = X[:, 1].min() - .5, X[:, 1].max() + .5
xx, yy = np.meshgrid(np.arange(x_min, x_max, h),
np.arange(y_min, y_max, h))
import plotly.graph_objs as go
import colorlover as cl
from sklearn.model_selection import cross_val_score
def serve_prediction_plot(model, title, X_train, y_train, X_test, y_test, xx, yy, d):
# Get train and test score from model
model.fit(X_train, y_train)
train_score = cross_val_score(model, X_train, y_train).mean()
test_score = model.score(X_test, y_test)
# Colorscale
bright_cscale = [[0, '#FF0000'], [1, '#0000FF']]
colorscale_zip = zip(np.arange(0, 1.01, 1 / 8), cl.scales['9']['div']['RdBu'])
cscale = list(map(list, colorscale_zip))
axis_template = dict(
showgrid=False,
zeroline=False,
linecolor='white',
showticklabels=False,
ticks=''
)
layout = dict(
title=title,
xaxis=axis_template,
yaxis=axis_template,
showlegend=False,
hovermode='closest',
autosize=False,
margin=dict(l=0, r=0, t=30, b=0)
)
# Plot the prediction contour of the models
try:
Z = model.predict_proba(np.c_[xx.ravel(), yy.ravel()])[:, 1]
except NotImplementedError:
Z = model.decision_function(np.c_[xx.ravel(), yy.ravel()])
Z = Z.reshape(xx.shape)
print(Z.shape)
trace0 = go.Heatmap(
z=Z,
hoverinfo='none',
showscale=False,
colorscale=cscale,
x0=xx.min(),
y0=yy.min(),
dx=d,
dy=d
)
# Plot Training Data
trace1 = go.Scatter(
x=X_train[:, 0],
y=X_train[:, 1],
mode='markers',
name='Training Data (accuracy={:.3f})'.format(train_score),
text=y_train,
marker=dict(
size=10,
color=y_train,
colorscale=bright_cscale,
line=dict(
width=1
)
)
)
# Plot Test Data
trace2 = go.Scatter(
x=X_test[:, 0],
y=X_test[:, 1],
mode='markers',
name='Test Data (accuracy={:.3f})'.format(train_score),
text=y_test,
marker=dict(
size=10,
symbol='triangle-up',
color=y_test,
colorscale=bright_cscale,
line=dict(
width=1
),
)
)
data = [trace0, trace1, trace2]
figure = go.Figure(data=data, layout=layout)
return figure
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
def generate_dense_maps():
return html.Div(
className='row',
style={
'margin-top': '5px',
# Remove possibility to select the text for better UX
'user-select': 'none',
'-moz-user-select': 'none',
'-webkit-user-select': 'none',
'-ms-user-select': 'none'
},
children=[
html.Div(
[
dcc.Graph(
id='graph-{name}'.format(name=clf_name),
figure=serve_prediction_plot(clf, clf_name, X_train, y_train, X_test, y_test, xx, yy, h),
)
],
className="two columns"
) for clf_name, clf in zip(names, classifiers)
]
)
# -------------------- Dash --------------------
app = dash.Dash(__name__)
app.layout = html.Div(children=[
# -------------------- Title Bar --------------------
html.Div(className="banner", children=[
html.Div(className='container scalable', children=[
html.H2(html.A(
'Title goes here',
style={
'text-decoration': 'none',
'color': 'inherit'
}
)),
html.A(
html.Img(src="https://s3-us-west-1.amazonaws.com/plotly-tutorials/logo/new-branding/dash-logo-by-plotly-stripe-inverted.png"),
href='https://plot.ly/products/dash/'
)
]),
]),
# -------------------- Body -------------------------
html.Div(id='body', className='container scalable', children=[
html.Div(className='row', children=[
# -------------------- Classifiers ------------------
html.Div(
id='div-classifiers', children=[
html.H4(html.A(
'Classifiers',
style={
'text-decoration': 'none',
'color': 'inherit'
}
)),
generate_dense_maps()
])
])
])
])
external_css = [
# Normalize the CSS
"https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css",
# Fonts
"https://fonts.googleapis.com/css?family=Open+Sans|Roboto",
"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
# Base Stylesheet, replace this with your own base-styles.css using Rawgit
"https://rawgit.com/xhlulu/9a6e89f418ee40d02b637a429a876aa9/raw/f3ea10d53e33ece67eb681025cedc83870c9938d/base-styles.css",
# Custom Stylesheet, replace this with your own custom-styles.css using Rawgit
"https://cdn.rawgit.com/plotly/dash-svm/bb031580/custom-styles.css"
]
for css in external_css:
app.css.append_css({"external_url": css})
app.run_server(debug=True)
python matplotlib plotly dash
asked Jan 18 at 16:14
pcecconpceccon
2,676104387
Can you add your dataset or modify the code to have a Minimal, Complete, and Verifiable example? Perhaps something like that contrib.scikit-learn.org/py-earth/auto_examples/… ?
– Maximilian Peters
Jan 19 at 9:49
@MaximilianPeters, done.
– pceccon
Jan 20 at 13:26
add a comment |
2
2
2
I'm new to Dash/Plot.ly and currently, I'm trying to reproduce the following plots (produced with matplotlib) with Dash:
My attempt to do so was to creat a method to generate a single figure:
def serve_prediction_plot(model, title, X, X_proj, y, y_proc, train_idx, test_idx, Z, xx, yy, x0, y0, d):
# Get train and test score from model
train_score = cross_val_score(model, X[train_idx], y_proc[train_idx]).mean()
test_score = model.score(X[test_idx], y_proc[test_idx])
# Colorscale
bright_cscale = [[0, '#FF0000'], [1, '#0000FF']]
colorscale_zip = zip(np.arange(0, 1.01, 1 / 8), cl.scales['9']['div']['RdBu'])
cscale = list(map(list, colorscale_zip))
axis_template = dict(
showgrid=False,
zeroline=False,
linecolor='white',
showticklabels=False,
ticks=''
)
layout = dict(
title=title,
xaxis=axis_template,
yaxis=axis_template,
showlegend=False,
hovermode='closest',
autosize=False,
margin=dict(l=0, r=0, t=30, b=0)
)
# Plot the prediction contour of the models
Z = Z.reshape(xx.shape)
print(Z.shape)
trace0 = go.Heatmap(
z=Z,
hoverinfo='none',
showscale=False,
colorscale=cscale,
x0=x0,
y0=y0,
dx=d,
dy=d
)
# Plot Training Data
trace1 = go.Scatter(
x=X_proj[train_idx, 0],
y=X_proj[train_idx, 1],
mode='markers',
name='Training Data (accuracy={:.3f})'.format(train_score),
text=y[train_idx],
marker=dict(
size=10,
color=y_proc[train_idx],
colorscale=bright_cscale,
line=dict(
width=1
)
)
)
# Plot Test Data
trace2 = go.Scatter(
x=X_proj[test_idx, 0],
y=X_proj[test_idx, 1],
mode='markers',
name='Test Data (accuracy={:.3f})'.format(train_score),
text=y[test_idx],
marker=dict(
size=10,
symbol='triangle-up',
color=y_proc[test_idx],
colorscale=bright_cscale,
line=dict(
width=1
),
)
)
data = [trace0, trace1, trace2]
figure = go.Figure(data=data, layout=layout)
return figure
Which is call when building the Dash view:
def generate_dense_maps():
return html.Div(
className='row',
style={
'margin-top': '5px',
# Remove possibility to select the text for better UX
'user-select': 'none',
'-moz-user-select': 'none',
'-webkit-user-select': 'none',
'-ms-user-select': 'none'
},
children=[
html.Div(
[
dcc.Graph(
id='graph-{name}'.format(name=clf_name),
figure=serve_prediction_plot(clf,
clf_name,
service.dataset.X,
service.dataset.X_proj,
service.dataset.y,
service.dataset.y_proc,
service.dataset.train_idx,
service.dataset.test_idx,
service.get_prediction(clf),
service.grid.xx,
service.grid.yy,
service.x_min,
service.y_min,
service.grid.h),
)
],
className="two columns"
) for clf_name, clf in service.classifiers.items()
]
)
# -------------------- Dash --------------------
app = dash.Dash(__name__)
app.layout = html.Div(children=[
# -------------------- Title Bar --------------------
html.Div(className="banner", children=[
html.Div(className='container scalable', children=[
html.H2(html.A(
'Title goes here',
style={
'text-decoration': 'none',
'color': 'inherit'
}
)),
html.A(
html.Img(src="https://s3-us-west-1.amazonaws.com/plotly-tutorials/logo/new-branding/dash-logo-by-plotly-stripe-inverted.png"),
href='https://plot.ly/products/dash/'
)
]),
]),
# -------------------- Body -------------------------
html.Div(id='body', className='container scalable', children=[
html.Div(className='row', children=[
# -------------------- Classifiers ------------------
html.Div(
id='div-classifiers', children=[
html.H4(html.A(
'Classifiers',
style={
'text-decoration': 'none',
'color': 'inherit'
}
)),
generate_dense_maps()
]
),
# -------------------- Uncertainty ------------------
html.Div(
id='div=uncertainty'
)
])
])
])
However, the images are being cut off:
I wonder what I'm missing or how to properly achieve the desired output.
I've also tryied to plot something like this (which I'd actually think would look better on web):
image1 | image2
image3 | image4
image5 | image6
Without any luck.
MINIMAL EXAMPLE
import numpy as np
from sklearn.cross_validation import train_test_split
from sklearn.preprocessing import StandardScaler
from sklearn.datasets import make_moons, make_circles, make_classification
from sklearn.neighbors import KNeighborsClassifier
from sklearn.svm import SVC
from sklearn.tree import DecisionTreeClassifier
from sklearn.ensemble import RandomForestClassifier
names = ["Nearest Neighbors", "Linear SVM", "RBF SVM", "Decision Tree",
"Random Forest"]
classifiers = [
KNeighborsClassifier(3),
SVC(kernel="linear", C=0.025, probability=True),
SVC(gamma=2, C=1, probability=True),
DecisionTreeClassifier(max_depth=5),
RandomForestClassifier(max_depth=5, n_estimators=10, max_features=1),
]
X, y = make_classification(n_features=2, n_redundant=0, n_informative=2,
random_state=1, n_clusters_per_class=1)
rng = np.random.RandomState(2)
X += 2 * rng.uniform(size=X.shape)
h = .02
X = StandardScaler().fit_transform(X)
X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=.4)
x_min, x_max = X[:, 0].min() - .5, X[:, 0].max() + .5
y_min, y_max = X[:, 1].min() - .5, X[:, 1].max() + .5
xx, yy = np.meshgrid(np.arange(x_min, x_max, h),
np.arange(y_min, y_max, h))
import plotly.graph_objs as go
import colorlover as cl
from sklearn.model_selection import cross_val_score
def serve_prediction_plot(model, title, X_train, y_train, X_test, y_test, xx, yy, d):
# Get train and test score from model
model.fit(X_train, y_train)
train_score = cross_val_score(model, X_train, y_train).mean()
test_score = model.score(X_test, y_test)
# Colorscale
bright_cscale = [[0, '#FF0000'], [1, '#0000FF']]
colorscale_zip = zip(np.arange(0, 1.01, 1 / 8), cl.scales['9']['div']['RdBu'])
cscale = list(map(list, colorscale_zip))
axis_template = dict(
showgrid=False,
zeroline=False,
linecolor='white',
showticklabels=False,
ticks=''
)
layout = dict(
title=title,
xaxis=axis_template,
yaxis=axis_template,
showlegend=False,
hovermode='closest',
autosize=False,
margin=dict(l=0, r=0, t=30, b=0)
)
# Plot the prediction contour of the models
try:
Z = model.predict_proba(np.c_[xx.ravel(), yy.ravel()])[:, 1]
except NotImplementedError:
Z = model.decision_function(np.c_[xx.ravel(), yy.ravel()])
Z = Z.reshape(xx.shape)
print(Z.shape)
trace0 = go.Heatmap(
z=Z,
hoverinfo='none',
showscale=False,
colorscale=cscale,
x0=xx.min(),
y0=yy.min(),
dx=d,
dy=d
)
# Plot Training Data
trace1 = go.Scatter(
x=X_train[:, 0],
y=X_train[:, 1],
mode='markers',
name='Training Data (accuracy={:.3f})'.format(train_score),
text=y_train,
marker=dict(
size=10,
color=y_train,
colorscale=bright_cscale,
line=dict(
width=1
)
)
)
# Plot Test Data
trace2 = go.Scatter(
x=X_test[:, 0],
y=X_test[:, 1],
mode='markers',
name='Test Data (accuracy={:.3f})'.format(train_score),
text=y_test,
marker=dict(
size=10,
symbol='triangle-up',
color=y_test,
colorscale=bright_cscale,
line=dict(
width=1
),
)
)
data = [trace0, trace1, trace2]
figure = go.Figure(data=data, layout=layout)
return figure
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
def generate_dense_maps():
return html.Div(
className='row',
style={
'margin-top': '5px',
# Remove possibility to select the text for better UX
'user-select': 'none',
'-moz-user-select': 'none',
'-webkit-user-select': 'none',
'-ms-user-select': 'none'
},
children=[
html.Div(
[
dcc.Graph(
id='graph-{name}'.format(name=clf_name),
figure=serve_prediction_plot(clf, clf_name, X_train, y_train, X_test, y_test, xx, yy, h),
)
],
className="two columns"
) for clf_name, clf in zip(names, classifiers)
]
)
# -------------------- Dash --------------------
app = dash.Dash(__name__)
app.layout = html.Div(children=[
# -------------------- Title Bar --------------------
html.Div(className="banner", children=[
html.Div(className='container scalable', children=[
html.H2(html.A(
'Title goes here',
style={
'text-decoration': 'none',
'color': 'inherit'
}
)),
html.A(
html.Img(src="https://s3-us-west-1.amazonaws.com/plotly-tutorials/logo/new-branding/dash-logo-by-plotly-stripe-inverted.png"),
href='https://plot.ly/products/dash/'
)
]),
]),
# -------------------- Body -------------------------
html.Div(id='body', className='container scalable', children=[
html.Div(className='row', children=[
# -------------------- Classifiers ------------------
html.Div(
id='div-classifiers', children=[
html.H4(html.A(
'Classifiers',
style={
'text-decoration': 'none',
'color': 'inherit'
}
)),
generate_dense_maps()
])
])
])
])
external_css = [
# Normalize the CSS
"https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css",
# Fonts
"https://fonts.googleapis.com/css?family=Open+Sans|Roboto",
"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
# Base Stylesheet, replace this with your own base-styles.css using Rawgit
"https://rawgit.com/xhlulu/9a6e89f418ee40d02b637a429a876aa9/raw/f3ea10d53e33ece67eb681025cedc83870c9938d/base-styles.css",
# Custom Stylesheet, replace this with your own custom-styles.css using Rawgit
"https://cdn.rawgit.com/plotly/dash-svm/bb031580/custom-styles.css"
]
for css in external_css:
app.css.append_css({"external_url": css})
app.run_server(debug=True)
python matplotlib plotly dash
asked Jan 18 at 16:14
pcecconpceccon
2,676104387
I'm new to Dash/Plot.ly and currently, I'm trying to reproduce the following plots (produced with matplotlib) with Dash:
My attempt to do so was to creat a method to generate a single figure:
def serve_prediction_plot(model, title, X, X_proj, y, y_proc, train_idx, test_idx, Z, xx, yy, x0, y0, d):
# Get train and test score from model
train_score = cross_val_score(model, X[train_idx], y_proc[train_idx]).mean()
test_score = model.score(X[test_idx], y_proc[test_idx])
# Colorscale
bright_cscale = [[0, '#FF0000'], [1, '#0000FF']]
colorscale_zip = zip(np.arange(0, 1.01, 1 / 8), cl.scales['9']['div']['RdBu'])
cscale = list(map(list, colorscale_zip))
axis_template = dict(
showgrid=False,
zeroline=False,
linecolor='white',
showticklabels=False,
ticks=''
)
layout = dict(
title=title,
xaxis=axis_template,
yaxis=axis_template,
showlegend=False,
hovermode='closest',
autosize=False,
margin=dict(l=0, r=0, t=30, b=0)
)
# Plot the prediction contour of the models
Z = Z.reshape(xx.shape)
print(Z.shape)
trace0 = go.Heatmap(
z=Z,
hoverinfo='none',
showscale=False,
colorscale=cscale,
x0=x0,
y0=y0,
dx=d,
dy=d
)
# Plot Training Data
trace1 = go.Scatter(
x=X_proj[train_idx, 0],
y=X_proj[train_idx, 1],
mode='markers',
name='Training Data (accuracy={:.3f})'.format(train_score),
text=y[train_idx],
marker=dict(
size=10,
color=y_proc[train_idx],
colorscale=bright_cscale,
line=dict(
width=1
)
)
)
# Plot Test Data
trace2 = go.Scatter(
x=X_proj[test_idx, 0],
y=X_proj[test_idx, 1],
mode='markers',
name='Test Data (accuracy={:.3f})'.format(train_score),
text=y[test_idx],
marker=dict(
size=10,
symbol='triangle-up',
color=y_proc[test_idx],
colorscale=bright_cscale,
line=dict(
width=1
),
)
)
data = [trace0, trace1, trace2]
figure = go.Figure(data=data, layout=layout)
return figure
Which is call when building the Dash view:
def generate_dense_maps():
return html.Div(
className='row',
style={
'margin-top': '5px',
# Remove possibility to select the text for better UX
'user-select': 'none',
'-moz-user-select': 'none',
'-webkit-user-select': 'none',
'-ms-user-select': 'none'
},
children=[
html.Div(
[
dcc.Graph(
id='graph-{name}'.format(name=clf_name),
figure=serve_prediction_plot(clf,
clf_name,
service.dataset.X,
service.dataset.X_proj,
service.dataset.y,
service.dataset.y_proc,
service.dataset.train_idx,
service.dataset.test_idx,
service.get_prediction(clf),
service.grid.xx,
service.grid.yy,
service.x_min,
service.y_min,
service.grid.h),
)
],
className="two columns"
) for clf_name, clf in service.classifiers.items()
]
)
# -------------------- Dash --------------------
app = dash.Dash(__name__)
app.layout = html.Div(children=[
# -------------------- Title Bar --------------------
html.Div(className="banner", children=[
html.Div(className='container scalable', children=[
html.H2(html.A(
'Title goes here',
style={
'text-decoration': 'none',
'color': 'inherit'
}
)),
html.A(
html.Img(src="https://s3-us-west-1.amazonaws.com/plotly-tutorials/logo/new-branding/dash-logo-by-plotly-stripe-inverted.png"),
href='https://plot.ly/products/dash/'
)
]),
]),
# -------------------- Body -------------------------
html.Div(id='body', className='container scalable', children=[
html.Div(className='row', children=[
# -------------------- Classifiers ------------------
html.Div(
id='div-classifiers', children=[
html.H4(html.A(
'Classifiers',
style={
'text-decoration': 'none',
'color': 'inherit'
}
)),
generate_dense_maps()
]
),
# -------------------- Uncertainty ------------------
html.Div(
id='div=uncertainty'
)
])
])
])
However, the images are being cut off:
I wonder what I'm missing or how to properly achieve the desired output.
I've also tryied to plot something like this (which I'd actually think would look better on web):
image1 | image2
image3 | image4
image5 | image6
Without any luck.
MINIMAL EXAMPLE
import numpy as np
from sklearn.cross_validation import train_test_split
from sklearn.preprocessing import StandardScaler
from sklearn.datasets import make_moons, make_circles, make_classification
from sklearn.neighbors import KNeighborsClassifier
from sklearn.svm import SVC
from sklearn.tree import DecisionTreeClassifier
from sklearn.ensemble import RandomForestClassifier
names = ["Nearest Neighbors", "Linear SVM", "RBF SVM", "Decision Tree",
"Random Forest"]
classifiers = [
KNeighborsClassifier(3),
SVC(kernel="linear", C=0.025, probability=True),
SVC(gamma=2, C=1, probability=True),
DecisionTreeClassifier(max_depth=5),
RandomForestClassifier(max_depth=5, n_estimators=10, max_features=1),
]
X, y = make_classification(n_features=2, n_redundant=0, n_informative=2,
random_state=1, n_clusters_per_class=1)
rng = np.random.RandomState(2)
X += 2 * rng.uniform(size=X.shape)
h = .02
X = StandardScaler().fit_transform(X)
X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=.4)
x_min, x_max = X[:, 0].min() - .5, X[:, 0].max() + .5
y_min, y_max = X[:, 1].min() - .5, X[:, 1].max() + .5
xx, yy = np.meshgrid(np.arange(x_min, x_max, h),
np.arange(y_min, y_max, h))
import plotly.graph_objs as go
import colorlover as cl
from sklearn.model_selection import cross_val_score
def serve_prediction_plot(model, title, X_train, y_train, X_test, y_test, xx, yy, d):
# Get train and test score from model
model.fit(X_train, y_train)
train_score = cross_val_score(model, X_train, y_train).mean()
test_score = model.score(X_test, y_test)
# Colorscale
bright_cscale = [[0, '#FF0000'], [1, '#0000FF']]
colorscale_zip = zip(np.arange(0, 1.01, 1 / 8), cl.scales['9']['div']['RdBu'])
cscale = list(map(list, colorscale_zip))
axis_template = dict(
showgrid=False,
zeroline=False,
linecolor='white',
showticklabels=False,
ticks=''
)
layout = dict(
title=title,
xaxis=axis_template,
yaxis=axis_template,
showlegend=False,
hovermode='closest',
autosize=False,
margin=dict(l=0, r=0, t=30, b=0)
)
# Plot the prediction contour of the models
try:
Z = model.predict_proba(np.c_[xx.ravel(), yy.ravel()])[:, 1]
except NotImplementedError:
Z = model.decision_function(np.c_[xx.ravel(), yy.ravel()])
Z = Z.reshape(xx.shape)
print(Z.shape)
trace0 = go.Heatmap(
z=Z,
hoverinfo='none',
showscale=False,
colorscale=cscale,
x0=xx.min(),
y0=yy.min(),
dx=d,
dy=d
)
# Plot Training Data
trace1 = go.Scatter(
x=X_train[:, 0],
y=X_train[:, 1],
mode='markers',
name='Training Data (accuracy={:.3f})'.format(train_score),
text=y_train,
marker=dict(
size=10,
color=y_train,
colorscale=bright_cscale,
line=dict(
width=1
)
)
)
# Plot Test Data
trace2 = go.Scatter(
x=X_test[:, 0],
y=X_test[:, 1],
mode='markers',
name='Test Data (accuracy={:.3f})'.format(train_score),
text=y_test,
marker=dict(
size=10,
symbol='triangle-up',
color=y_test,
colorscale=bright_cscale,
line=dict(
width=1
),
)
)
data = [trace0, trace1, trace2]
figure = go.Figure(data=data, layout=layout)
return figure
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
def generate_dense_maps():
return html.Div(
className='row',
style={
'margin-top': '5px',
# Remove possibility to select the text for better UX
'user-select': 'none',
'-moz-user-select': 'none',
'-webkit-user-select': 'none',
'-ms-user-select': 'none'
},
children=[
html.Div(
[
dcc.Graph(
id='graph-{name}'.format(name=clf_name),
figure=serve_prediction_plot(clf, clf_name, X_train, y_train, X_test, y_test, xx, yy, h),
)
],
className="two columns"
) for clf_name, clf in zip(names, classifiers)
]
)
# -------------------- Dash --------------------
app = dash.Dash(__name__)
app.layout = html.Div(children=[
# -------------------- Title Bar --------------------
html.Div(className="banner", children=[
html.Div(className='container scalable', children=[
html.H2(html.A(
'Title goes here',
style={
'text-decoration': 'none',
'color': 'inherit'
}
)),
html.A(
html.Img(src="https://s3-us-west-1.amazonaws.com/plotly-tutorials/logo/new-branding/dash-logo-by-plotly-stripe-inverted.png"),
href='https://plot.ly/products/dash/'
)
]),
]),
# -------------------- Body -------------------------
html.Div(id='body', className='container scalable', children=[
html.Div(className='row', children=[
# -------------------- Classifiers ------------------
html.Div(
id='div-classifiers', children=[
html.H4(html.A(
'Classifiers',
style={
'text-decoration': 'none',
'color': 'inherit'
}
)),
generate_dense_maps()
])
])
])
])
external_css = [
# Normalize the CSS
"https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css",
# Fonts
"https://fonts.googleapis.com/css?family=Open+Sans|Roboto",
"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
# Base Stylesheet, replace this with your own base-styles.css using Rawgit
"https://rawgit.com/xhlulu/9a6e89f418ee40d02b637a429a876aa9/raw/f3ea10d53e33ece67eb681025cedc83870c9938d/base-styles.css",
# Custom Stylesheet, replace this with your own custom-styles.css using Rawgit
"https://cdn.rawgit.com/plotly/dash-svm/bb031580/custom-styles.css"
]
for css in external_css:
app.css.append_css({"external_url": css})
app.run_server(debug=True)
python matplotlib plotly dash
python matplotlib plotly dash
asked Jan 18 at 16:14
pcecconpceccon
2,676104387
asked Jan 18 at 16:14
pcecconpceccon
2,676104387
edited Jan 20 at 13:25
pceccon
asked Jan 18 at 16:14
pcecconpceccon
2,676104387
asked Jan 18 at 16:14
pcecconpceccon
2,676104387
asked Jan 18 at 16:14
pcecconpceccon
2,676104387
2,676104387
Can you add your dataset or modify the code to have a Minimal, Complete, and Verifiable example? Perhaps something like that contrib.scikit-learn.org/py-earth/auto_examples/… ?
– Maximilian Peters
Jan 19 at 9:49
@MaximilianPeters, done.
– pceccon
Jan 20 at 13:26
add a comment |
Can you add your dataset or modify the code to have a Minimal, Complete, and Verifiable example? Perhaps something like that contrib.scikit-learn.org/py-earth/auto_examples/… ?
– Maximilian Peters
Jan 19 at 9:49
@MaximilianPeters, done.
– pceccon
Jan 20 at 13:26
Can you add your dataset or modify the code to have a Minimal, Complete, and Verifiable example? Perhaps something like that contrib.scikit-learn.org/py-earth/auto_examples/… ?
– Maximilian Peters
Jan 19 at 9:49
Can you add your dataset or modify the code to have a Minimal, Complete, and Verifiable example? Perhaps something like that contrib.scikit-learn.org/py-earth/auto_examples/… ?
– Maximilian Peters
Jan 19 at 9:49
@MaximilianPeters, done.
– pceccon
Jan 20 at 13:26
@MaximilianPeters, done.
– pceccon
Jan 20 at 13:26
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54257689%2fgenerating-multiple-plots-with-dash%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54257689%2fgenerating-multiple-plots-with-dash%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you add your dataset or modify the code to have a Minimal, Complete, and Verifiable example? Perhaps something like that contrib.scikit-learn.org/py-earth/auto_examples/… ?
– Maximilian Peters
Jan 19 at 9:49
@MaximilianPeters, done.
– pceccon
Jan 20 at 13:26