# ✨ Introducing Plotly Express

**URL:** <https://community.plotly.com/t/introducing-plotly-express/21165>\
**Category:** Dash Python\
**Tags:** show-and-tell, announcements\
**Created:** [March 20, 2019, 4:05pm UTC](https://community.plotly.com/t/introducing-plotly-express/21165 "2019-03-20T16:05:19Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![nicolaskruchten](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nicolaskruchten/32/7018_2.png) [@nicolaskruchten](https://community.plotly.com/u/nicolaskruchten)\
**Post date:** [March 20, 2019, 4:05pm UTC](https://community.plotly.com/t/introducing-plotly-express/21165/1 "2019-03-20T16:05:19Z")

</div>

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](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](https://github.com/plotly/dash-px/blob/master/app.py)

Here’s what that app looks like:

 ![dashpx](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/e/e1628056dbc0e8b57586b8ab264991da933152ca.gif)

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [March 20, 2019, 5:43pm UTC](https://community.plotly.com/t/introducing-plotly-express/21165/2 "2019-03-20T17:43:48Z")

</div>



---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [March 20, 2019, 5:53pm UTC](https://community.plotly.com/t/introducing-plotly-express/21165/3 "2019-03-20T17:53:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![vivekvs1](https://avatars.discourse-cdn.com/v4/letter/v/c2a13f/32.png) [@vivekvs1](https://community.plotly.com/u/vivekvs1)\
**Post date:** [March 20, 2019, 6:00pm UTC](https://community.plotly.com/t/introducing-plotly-express/21165/4 "2019-03-20T18:00:14Z")

</div>

We are living in the future 🤩🤩🤩

---

<div class="post-metadata">

**Author:** ![Damian](https://avatars.discourse-cdn.com/v4/letter/d/34f0e0/32.png) [@Damian](https://community.plotly.com/u/Damian)\
**Post date:** [March 20, 2019, 6:16pm UTC](https://community.plotly.com/t/introducing-plotly-express/21165/5 "2019-03-20T18:16:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![adi](https://avatars.discourse-cdn.com/v4/letter/a/4da419/32.png) [@adi](https://community.plotly.com/u/adi)\
**Post date:** [March 20, 2019, 9:03pm UTC](https://community.plotly.com/t/introducing-plotly-express/21165/6 "2019-03-20T21:03:14Z")

</div>

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

```auto
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?

---

<div class="post-metadata">

**Author:** ![nicolaskruchten](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nicolaskruchten/32/7018_2.png) [@nicolaskruchten](https://community.plotly.com/u/nicolaskruchten)\
**Post date:** [March 21, 2019, 12:59am UTC](https://community.plotly.com/t/introducing-plotly-express/21165/7 "2019-03-21T00:59:23Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![xhlu](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/xhlu/32/12736_2.png) [@xhlu](https://community.plotly.com/u/xhlu)\
**Post date:** [March 21, 2019, 1:35pm UTC](https://community.plotly.com/t/introducing-plotly-express/21165/8 "2019-03-21T13:35:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jbeyer](https://avatars.discourse-cdn.com/v4/letter/j/e495f1/32.png) [@jbeyer](https://community.plotly.com/u/jbeyer)\
**Post date:** [March 26, 2019, 3:55pm UTC](https://community.plotly.com/t/introducing-plotly-express/21165/9 "2019-03-26T15:55:26Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![jorge243](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jorge243/32/6269_2.png) [@jorge243](https://community.plotly.com/u/jorge243)\
**Post date:** [March 26, 2019, 4:59pm UTC](https://community.plotly.com/t/introducing-plotly-express/21165/10 "2019-03-26T16:59:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nicolaskruchten](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nicolaskruchten/32/7018_2.png) [@nicolaskruchten](https://community.plotly.com/u/nicolaskruchten)\
**Post date:** [March 26, 2019, 5:56pm UTC](https://community.plotly.com/t/introducing-plotly-express/21165/11 "2019-03-26T17:56:57Z")

</div>

@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

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

```

You can also one-line it with something like

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

```

because `Figure.update()` returns the mutated figure 🙂

---

<div class="post-metadata">

**Author:** ![XFaCToZ2](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/xfactoz2/32/5899_2.png) [@XFaCToZ2](https://community.plotly.com/u/XFaCToZ2)\
**Post date:** [March 28, 2019, 3:45pm UTC](https://community.plotly.com/t/introducing-plotly-express/21165/12 "2019-03-28T15:45:32Z")

</div>

@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?

---

<div class="post-metadata">

**Author:** ![jorge243](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jorge243/32/6269_2.png) [@jorge243](https://community.plotly.com/u/jorge243)\
**Post date:** [March 28, 2019, 4:19pm UTC](https://community.plotly.com/t/introducing-plotly-express/21165/13 "2019-03-28T16:19:49Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![nicolaskruchten](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nicolaskruchten/32/7018_2.png) [@nicolaskruchten](https://community.plotly.com/u/nicolaskruchten)\
**Post date:** [March 28, 2019, 6:00pm UTC](https://community.plotly.com/t/introducing-plotly-express/21165/14 "2019-03-28T18:00:35Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![nicolaskruchten](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nicolaskruchten/32/7018_2.png) [@nicolaskruchten](https://community.plotly.com/u/nicolaskruchten)\
**Post date:** [March 28, 2019, 6:01pm UTC](https://community.plotly.com/t/introducing-plotly-express/21165/15 "2019-03-28T18:01:10Z")

</div>

@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 🙂

---

<div class="post-metadata">

**Author:** ![XFaCToZ2](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/xfactoz2/32/5899_2.png) [@XFaCToZ2](https://community.plotly.com/u/XFaCToZ2)\
**Post date:** [March 29, 2019, 7:35am UTC](https://community.plotly.com/t/introducing-plotly-express/21165/16 "2019-03-29T07:35:43Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![XFaCToZ2](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/xfactoz2/32/5899_2.png) [@XFaCToZ2](https://community.plotly.com/u/XFaCToZ2)\
**Post date:** [March 29, 2019, 7:39am UTC](https://community.plotly.com/t/introducing-plotly-express/21165/17 "2019-03-29T07:39:39Z")

</div>

@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)

---

<div class="post-metadata">

**Author:** ![nicolaskruchten](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nicolaskruchten/32/7018_2.png) [@nicolaskruchten](https://community.plotly.com/u/nicolaskruchten)\
**Post date:** [March 29, 2019, 1:54pm UTC](https://community.plotly.com/t/introducing-plotly-express/21165/18 "2019-03-29T13:54:00Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![XFaCToZ2](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/xfactoz2/32/5899_2.png) [@XFaCToZ2](https://community.plotly.com/u/XFaCToZ2)\
**Post date:** [March 29, 2019, 3:46pm UTC](https://community.plotly.com/t/introducing-plotly-express/21165/19 "2019-03-29T15:46:55Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![XFaCToZ2](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/xfactoz2/32/5899_2.png) [@XFaCToZ2](https://community.plotly.com/u/XFaCToZ2)\
**Post date:** [April 4, 2019, 10:37am UTC](https://community.plotly.com/t/introducing-plotly-express/21165/20 "2019-04-04T10:37:29Z")

</div>

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

[Next page](https://community.plotly.com/t/introducing-plotly-express/21165.md?page=2)