Chart maker using plotly.express

[eliasdabbas]

Happy to share a new app I just created

The full (almost) px library made interactive to explore all combinations of options

10 px datasets available to choose from
40 plot types to visualize any dataset
Can be used to learn/explore px or dataviz in general
No “sane defaults”, and it doesn’t even try to “save you from yourself”. In fact you’re encouraged to try out different combinations, make meaningless charts until you find the one that works.
Error messages that you would have received from a selected combination are always displayed at the bottom of the page

I’m finding this much easier to explore than actually typing the code for every combination of options. Hope you do too.

Link to app:

https://bit.ly/4fcqzfc

[adamschroeder]

@eliasdabbas strikes again. We’ve missed you, Elias. Really nice app.
Do you think it would be helpful for the user to be able to eject the code for learning purposes, or you prefer no code functionalities?

[eliasdabbas]

Thanks @adamschroeder !

Glad you liked it.

I like your idea, if I’m not mistaken, you’re talking about the app translating the manual inputs into px code, kind of like a code generator?
That would definitely be great for an upcoming update/release.

Thanks again.

[maxschulz-COL]

Hey! Amazing stuff, really fun to play with.

Do you mind sharing how you did it all? Super impressive!

[eliasdabbas]

Thanks @maxschulz-COL
Great to hear this!

The approach is to create the function parameter controls after the user selects the dataset and plot type.

I realized these parameters fall into a few general categories:

• Parameters that take a column of the DataFrame as a value: dropdown using the columns.
• Boolean parameters: checkbox.
• Range of numbers (opacity, nbins, etc): slider with custom min, max, step values for each
• “Any of…” parameters: dropdown with values parsed from doctring

Docstrings are crucial in this. I’m using the special docstring module in the package, because they are neatly organized there.

Several edge cases where simply hard-coded. Some omitted and solved by making the Graph editable like title and labels.

Some minor ones I’m still trying to figure out

For component IDs I used pattern-matching callbacks.

If you have any suggestions, or come across any bugs, please let me know.

Thanks!

[antony.milne]

Love this app so much, thank you for sharing it! I’ve had very similar thoughts myself before so very nice to see it become a reality Visual vocabulary made with Vizro and Plotly - #10 by antony.milne

I see you have the very nice domain name https://learnplotly.com/ - are you planning to do more like this?

How do you do the subtitle for the plots? Is it just title with <sub> or similar or a new property that I never realised existed somehow?

It might be nice to be able to download the JSON for plot. I find it interesting to see how the plotly express function builds the go.Figure structure (e.g. it would answer my above question about how you do the subtitle). But I’m not sure how many people would find this interesting apart from me

I’m sure you know this already, but when you first open the page there’s this error message at the bottom of the page. Which makes sense but is a little bit offputting I find because it makes it look like the app is broken when it’s not.

[eliasdabbas]

Thank you @antony.milne !

In the comment you shared seems like you already thought this out, and we’re thinking the same.

The JSON export sounds interesting. It’s straightforward also, just run fig.to_json(). A friend also suggested showing the Python code. So it would function as a code generator in this case. All great ideas.

The error message is supposed to help the user debug their charts. If you get an error with a certain combination of options, it would be good to see it, and learn from it.

Yet, seeing an error message before even touching the app is definitely off-putting as you said.

I’m thinking a good approach would be not to display any error message before you select any of the options.

Thanks again!

[eliasdabbas]

The sub-title is a new feature in plotly’s latest release (or the one before I’m not sure)

import plotly.express as px
fig = px.bar(x=[1, 2, 3], y=[23, 12, 13])

fig.layout.title = 'Title'
fig.layout.title.subtitle.text = 'Sub Title'
fig

[antony.milne]

Oooh yes, this does look familiar now, thank you! It’s not strictly part of px though, right? So your tool actually even goes a little bit beyond what you can do with a single plotly express function call.