✨ Introducing Plotly Express

Dash Python
,
1

Today we’re launching Plotly Express, a new Python library for data visualization built on top of Plotly.py… and it’s perfect for Dash! Read more about how it works in our Medium post: https://medium.com/@plotlygraphs/introducing-plotly-express-808df010143d

If you want to see Plotly Express working with Dash, you can check out a short and sweet sample app here: https://github.com/plotly/dash-px/blob/master/app.py

Here’s what that app looks like:

dashpx
dashpx1083×726 448 KB

21 Likes
3

So nice! I’ve been using plotly_express for my last couple of Dash apps that I’ve made and it’s been :100:. Charts that used to take ~15-100 lines of code now only take 2.
Highly recommend everyone take some time and check it out.

8 Likes
4

We are living in the future :star_struck::star_struck::star_struck:

3 Likes
5

I just can’t keep up with y’all!

Thanks again! As ever this is forever making our development lives simpler and richer. I can’t wait to start experimenting with this.

2 Likes
6

This is great!
Love the comparison with Seaborn and matplotlib.

Quick question about using this with dash - what is the best practice to add multiple scatter traces using plotly express?

Currently i do something like

trace_list = list()
trace1 = go.Scattergl(......._
trace2 = go.Scattergl(.....)
trace_list.append(trace1)
trace_list.append(trace2)

If the callback output is Output("graph_id","figure") then i usually : return {"data":trace_list}

Is it similar for using plotly express?
Can i append px.scatter(data, x="column_name", y="column_name") to a list and then return that to the data key of the figure dictionary?

1 Like
7

@adi using px with Dash is a bit different: px.scatter() returns a Figure object which you can return directly. Now it does contain traces in a data list, but if you pull them out and return them directly you’ll be missing the corresponding layout object which is likely necessary to render properly.

1 Like
8

This looks amazing, can’t wait to try it out!

9

So is it possible to append multiple traces onto the same plot with plotly express or is it better to revert to full-fledged plotly for that?

Super excited to integrate px into my workflow!

3 Likes
10

First, thanks for this amazing work you’re great! Quick question: how do you define the layout properties in, for example, the px.scatter() arguments? I read in the support section that it is “A dict of string/value properties that will be passed to the Layout constructor” but i can’t figure out the way of passing it as arguments.

EDIT:
Figured it out! if you have fig = px.scatter() all you have to do before returning fig to the graph is set layout properties like this: fig.layout.font = dict(family=‘Helvetica’) and so on

3 Likes
11

@jbeyer px will return a full figure which likely will contain multiple traces, so the recommended workflow is the one mentioned by @jorge243 i.e. either use the output of px directly or mutate it before passing it into dcc.Graph(figure=fig)

One extra note is that while you can use

fig = px.scatter()
fig.layout.font = dict(family="Helvetica")
return dcc.Graph(figure=fig)

You can also one-line it with something like

return dcc.Graph( figure=px.scatter(...).update(layout={"font": {"family": "Helvetica"}}) )

because Figure.update() returns the mutated figure :slight_smile:

3 Likes
12

@nicolaskruchten As a test I wanted to see how Plotly Express works with Dash. The chart loads properly, but the year slider animation does not start. I am using the gapminder example from the Plotly Express guides.

import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly_express as px

app = dash.Dash(__name__)

gapminder = px.data.gapminder()

app.layout = html.Div(
    html.Div([
        dcc.Graph(figure=px.scatter(gapminder, x="gdpPercap", y="lifeExp", animation_frame="year", animation_group="country",
           size="pop", color="continent", hover_name="country", facet_col="continent",
           log_x=True, size_max=45, range_x=[100,100000], range_y=[25,90]))
    ])
)

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

dash==0.40.0
dash-html-components==0.15.0
dash-core-components==0.45.0
plotly-express==0.1.3

Is there something I am missing?

13

If you still need help. The way i managed to do it was using:

fig = px.bar(df, x=‘x’, y=‘y’)
fig2 = px.line(df, x=‘x’, y=‘y’)
fig.append_trace(fig2.data[0],None,None)

1 Like
14

@XFaCToZ2 yes, Dash doesn’t handle animation frames at the moment, so I would recommend implementing the animation controls with html buttons and a slider outside of the figure.

15

@jorge243 yep this is how to do it for now! We’re working on a px-native composition API but it’s not quite ready yet :slight_smile:

1 Like
16

Hi @jorge243,

Can you please provide a full example? It would be ideal if you could make the changes to the example I provided.

I am not quite sure where this new code will go in regard to a Dash app, and I also don’t quite understand how this will allow an animation to work.

Thank you!

17

@nicolaskruchten I see - thank you for the information.

When I try to display one of the sample plots without using Dash, the code executes and completes but no chart appears. For example:

import plotly_express as px

iris = px.data.iris()

px.scatter(iris, x="sepal_width", y="sepal_length")

Is there some sort of show() method for Plotly Express? I’m using Pycharm 2018.2.4 (Community Edition)

18

I don’t think we support PyCharm yet for inline display, mostly Jupyter Notebooks / JupyterLab. Hopefully within a month we will have a way to see these in PyCharm and other editors directly :slight_smile:

19

You’re breaking my heart @nicolaskruchten! JK

In the meantime, would you recommend a different python package to achieve the time animations? Or if you have a full example using jorge’s suggestion I would be happy to use that.

Thanks!

20

@nicolaskruchten @jorge243 Any chance I can get a full example of the time slider animation?