Getting Started With Dash: Easy Data Visualization In Python - Part 1/3
VloĆŸit
- Äas pĆidĂĄn 21. 07. 2024
- A very common thing you want to do in Python is visualize your data in a dashboard. Today I show you how to set up data visualization using Plotly Dash in Python in a few easy steps. I'm going to revisit this example in a few weeks to add more features to the dashboard and to improve the design. A big thank you to Mark Todisco for his help with preparing the code example!
The code I worked on in this tutorial is available here: github.com/ArjanCodes/2022-dash.
đĄ Get my FREE 7-step guide to help you consistently design great software: arjancodes.com/designguide.
đ» ArjanCodes Blog: www.arjancodes.com/blog
đ GEAR & RECOMMENDED BOOKS: kit.co/arjancodes.
đ If you enjoyed this content, give this video a like. If you want to watch more of my upcoming videos, consider subscribing to my channel!
đŹ Discord: discord.arjan.codes
đŠTwitter: / arjancodes
đLinkedIn: / arjancodes
đ”Facebook: / arjancodes
đ Code reviewers:
- Yoriz
- Ryan Laursen
- James Dooley
- Dale Hagglund
đ„ Video edited by Mark Bacskai: / bacskaimark
đ Chapters:
0:00 Intro
1:17 Explaining the example
2:41 Introduction to Dash
5:10 Setting up a Dash application
8:02 Adding a dropdown component
13:09 Adding a button to select all nations
14:31 Dash callbacks with inputs and outputs
17:21 Adding a bar chart
20:24 Connecting the dropdown with the bar chart
24:10 Showing a message if no data is selected
25:02 Analysis of the application setup
#arjancodes #softwaredesign #python
DISCLAIMER - The links in this description might be affiliate links. If you purchase a product or service through one of those links, I may receive a small commission. There is no additional charge to you. Thanks for supporting my channel so I can continue to provide you with free content each week!
đĄ Get my FREE 7-step guide to help you consistently design great software: arjancodes.com/designguide.
As someone who really likes your tutorials and shorts and a patron of this channel. If I can make a suggestion,
1. Whenever you talk about a specific module or a feature it would be better if you should something visual and do a voiceover. This is help people to understand what it is that you are exactly referring to at any point in time.
2. Before diving coding always provide with a good overview which can help people understand what it is that you are trying to do end to end. (Remember you may be knowing stuff beforehand but for the people who are watching you will need to have some context on what you are going to do).
Just some friendly suggestions.:) Cheers
Just what I needed. Great video once again, you can't imagine the influence of your videos on a self-taught like me.
Your channel is a gold mine, and the content can't be found anywhere on the web. Can't thank you enough for your content. Thank you!!!
Thanks, happy youâre enjoying the content!
Dude you really changed my life. Every since you taught me about the importance of python classes with dataclasses. All my sqlalchemy models became serialized with jsonify. I implemented the command pattern to generate pdfs and send invoices and I set up a transaction based accounting system. All your video have transformed my app in such a positive way. It feels like every video you post is a module that can be directly inserted in my app replacing my old code and vastly improving it into a way less coupled system. I just want to thank you because their is none of this stuff out there beside the content you are creating.
Hey Kevin, so glad to hear the content has been helpful to you. Keep going, looks like you're killing it!
Love it! First time working with Dash and I love your explanation! Thank you
You earned a sub for actually slowing down for 15sec and explaining the terminology. "So for this we need a callback... A callback is..." Thank you! Most people would never define it. This means we can watch one of your videos and learn everything required to complete the task without having to search for other stuf. It means a lot!
I work with data and really like using Dash. However I have been struggling with structuring a Dash project in a clean way. Thanks for sharing this, Arjan. Just what I needed.
Can this thing replace React or Vue for a pythonista? I don't like frontend stuff and wondering if this can save me.
I have programmed in Python for years, but honestly all new to me to see syntax like "from . import" and "->" in a function definition.
Some further studies needed to completely understand this tutorial.
Uow! This is so powerful and elegant! Thank you so much for this, Arjan.
Thanks so much Careca, glad it was helpful!
Please set the path to your interpreter in VS Code so all the code from these third-party libraries isn't highlighted red.
+1
How do you set the path to your interpreter in vs code?
Yet another fantastic video. Love how you make concepts easy to digest. â€â€ Thanks a lot Arjan!
My pleasure â€
You can use the query method with f-strings if you want to reference to the 'nations' variable: MEDAL_DATA.query(f"nation in {nations})")
But why use query in the first place? The most common way I saw for filtering panda' dataframes rely on just using a mask. It's much readable imho
We used masks in an earlier version of the code example, and using query resulted in a lot shorter code, especially if you combine multiple filters. Itâs also really efficient.
@@ArjanCodes I also prefer working with the query method. There are just some cases which combine slicing+filtering and can get a bit complicated. Most often such cases require .iloc .. in these instances I often use a mask. Apart from that .query in combination with f-strings or the @-notation is really powerful and I guess more humam readable.
Even better (I think) you can use one of the kwargs that query accepts: `MEDAL_DATA.query("nation in @var", local_dict={"var": nations})`. This way your linter won't complain and you can let pandas interpret the variable.
Your tutorials are always clear and concise! Thank you for sharing it, Arjun!
Thanks Liu, happy youâre enjoying the content!
Thank you for covering this topic Arjan!
Thanks so much Warren, glad it was helpful!
Just in time this video! As a retired programmer, I started learning python just for fun. Looking for structure in the python world, I found your channel. It helps a lot. I like your pragmatic approach using classes and functional programming. Just now I started looking at Plotly and Dash. Again looking for structure, again provided by ArjanCodes..
Thanks so much Ronald, glad it was helpful!
Usually I do not tend to comment on videos but let me thank you for this gift of video!! You cannot imagine how much you helped me understand the way dash works - I am currently studying Data Science and this was great for making my data visualisation project where I analysed US accidents and their distribution over the different states. Thank you Arjan :))
Glad to hear that the video was helpful to you! Thank you for the comment :)
I remember watching this mini-series when it came out & enjoying the content. Now, months later after having made a dashboard used internally at my company, I rewatched & realized so many smelly parts of my code that your design has helped me refactor. Your content is so helpful & practical for learning good philosophies of code after the 1st, 2nd, & countless rewatches. Thank you for your entire channel Arjan!
Thank you so much!
did you use the microsoft Graph sdk or something to authenticate users, or is it just on the local network?
I like the idea of being able to switch (mostly for my own satisfaction) people from Power BI over to a python solution.
We currently use Azure to authenticate users (and filter the datasets they are getting)...
Looking forward to the 2nd partïŒ
Itâs coming this Friday ;).
Awesome video, @ArjanCodes. Thank you for using Plotly and Dash and for teaching others.
Thank you! And happy to promote great tools âșïž.
Beste Arjan heel veel succes, dit is een toffe tutorial.
Right when I needed this, thank you so much Arjan
Thanks so much Antonio, glad it was helpful!
This really helped me a lot, Thanks!
this is great! can't wait for the next video :)
Coming soon!
I agree with you about the Python magic. I think it causes more problems in this case than it actually helps.
Also without type hinting Dash apps easily become messy. Sometimes even with type hints, just try to change the return HTML instance to html.Span instead of a DIV,
not even mypy will complain. (At least this is my current experience)
However the lack of types and all this "magic" is very useful in notebooks for data analysts. So probably they should be only used there.
FYI, good thing that dash apps also work inside a notebook.
nice! my first real project is based on Dash! I wish I had seen this video back then to avoid some frustrations.
I do have a complaint about typing though. static type check doesn't seem to reliably catch the type of outputs of callbacks and back then something I thought passed in int was actually passed in str.
Arjan, thanks for the great carefully designed content. The render function, in your example, gets a def function inside of it. Is there another pattern which can be used there? Making the nested def outside and calling it inside render?
Arjan ur blessed. No word for me I Thank you very much!!!
I'm glad you've enjoyed the content, Esmael!
@@ArjanCodes Always Arjan, I learn not only from your content, i learn from your word, facial expression, responsibility for your community and how to became selfless person. Arjan your Real Professional. I Salute đ for you and blessed family.
Hey @arjancodes, great tutorial. I've just started my dash journey, and this video has proven an invaluable resource. I have one question: why do the layout and component functions take the app as an argument when they contain no direct calls to the app?
Well said towards the end concerning Python magic.
Thanks so much Ryan, glad you liked it!
Hi Arjan, thanks for the great video! Just a quick question: Is there a specific reason you use relative imports over absolute imports? My rule of thumb is to always use absolute imports since they are supposedly more clear?
This is cool, but I often find myself overwhelmed when there are so many new libraries to keep track of. What helped me get comfortable with the possibilities of the base language (Python) is learning the functions and what they do. I feel the same thing is necessary for any library I use. After all, why is a certain function being used as opposed to another function? Does this solve something that cannot be done using 'bare Python', or does it just streamline it? If so, how? All of that helps to make sense of all these imports. For me, knowing the scope of something is very important.
All that said, cool video and I look forward to future parts. Cheers! :)
So cool for simple web app to display data nicely!!
Thanks so much Wisanu
fantastic video. Thank you!
Thanks Paul, happy youâre enjoying the content!
Hey Arjan, I love your content and have been following you since you first started on youtube! One question though, why do you find it advantageous to define the callbacks inside of the render functions? As opposed to defining it in a separate module? I haven't seen this style of defining callbacks inside of a render function anywhere else. Thanks!
I come here for Python and software design... but... Dragging a terminal view into a VSCode tab... "woooooah" - "mind blown!"
`"terminal.integrated.defaultLocation": "editor",` makes it even better!
Great video. Some feedback though on the video design: going from a dark setup to an all-white webpage is really jarring and would appreciate in newer videos to keep a consistent dark / light theme.
I prefer using boolean masks to filter pandas dataframes, partially for this reason. All objects are referenced as objects explicitly.
Although, the query method is convenient in longer chained calls, I have to admit.
Yoh great content Arjan !
Thanks so much Wayne, glad you liked it!
This tutorial is awesome!!
Thank you Patrick, glad you liked the video!
Very cool. Thanks for that.
Thanks Thiago, happy youâre enjoying the content!
Really awesome video @ArjanCodes, Keep up the great job
Thank you!
Great video! Thank you so much! Btw, what color scheme do you use in vscode? It's awesome!
it works perfectly thank you so much
Thanks so much, glad the content is helpful!
Great tutorial, dash is amazing
Thanks so much James, glad you liked it!
How would you do to modify the fig data instead of creating a new fig each time the drop-down values change ?
Do you set up an environment when you build these? Or not so much for the tutorials?
I don't want to just install everything (in the wild) and was wondering if you have a preferred environment that you use that integrates relatively well with Code.
Very good video, i love dash and r shiny :)
would you recommend first learning html?
coming from a python background and being new to HTML it seems like dash is structured in a way that takes HTML as a prerequisite
Would it be possible to cover github actions? Perhaps to do automated testing of python scripts since youve covered unit testing before.
Great video and repo as usual.
I am wondering why you are using conda vs pipenv. As pipenv supports multiple python version and simpler config with Pipfile and locking of the config? I found pipenv easier to use. Any thoughts or video in the future? đ
What plugins do you use in what I belei5 is vscode for code formatting on svae and auto improts?
Heya Arjan, I love your videos and have a suggestion for a future video. I would love to see something involving rate limiting multiple API's concurrently within one program:)
Thanks so much, glad you liked it!
Thanks for the suggestions, Jordan, I've put it on the list.
someone help me, i don't know how to make a template like in this video, i have searched on google but haven't found it
We need an entire python course from you
Thanks Priyes! I do have a Python/software design focused online course available here: www.arjancodes.com/mindset
Hi @ArjanCodes thank you very much for the video.
As already stated, it would be great if you could make some pauses and explain some of the code in more detail, otherwise it becomes quite difficult to follow. I have a question for the button callback. How does the app know that the button click refers to that callback and how does the callback know what function to call? I don't see any link bewteen these.
Thanks!
EDIT: So I finished the video and saw that you mentioned exactly what I was asking. It's indeed quite confusing this "magic" thing of knowing what to do without any kind of reference to the function.
Which IDE is good for creating dashboards with DASH?
I was wondering if it is possible to have the git hub link? thanks
Is Dash faster than React or slower than React in loading components ?
hmm.. trying to understand the scenarios where Dash is better than PyScript (ignoring its current status) - I guess it will depend on the amount of Python code vs HTML?
Where did the gold, silver medal numbers for each nation come from?
Dash is awesome, I utilized it to showcase projects in college; I do prefer Streamlit now, there are a few other alternatives as well like Panel
Thanks so much Soumendu, glad it was helpful!
Streamlit is cool, but I can't always figure out how to run it efficiently, without rerunning the unnecessary code every time you interact with GUI
Panel and Holoviews are so handy for rapid development of data science proof of concept dashboards and views.
I just wonder... How long does it take to learn the ins and outs of, say, Dash and Plotly, to be confident in using them and create something useful. Anyone can comment on this, please? Thanks.
How can you make this work when you need to upload multiple 100s of megabytes of data?
Thank you for this
Thanks so much Suraj, glad it was helpful!
I have always been very choosy, when it comes to lectures, instructors or topics.
But your videos helped me improve my python coding skills.
In the past 6 months, I have seen myself writing better code, credits to you. Hopefully will keep on improving myself.
Thank you
I need part 3 lol. Will it be styling?
I also dislike python magic, for it behaves as a sort of obfuscation. Thanks for the vid again!
Glad you enjoyed it!
Can you show us how to integrate a dashboard into a django project?
Great content! Suggestion for next video: how to solve tedious cyclic import error due to type hints imports.. Pleeease :)
Thanks for the suggestions, Andrea, I've put it on the list.
If dash makes it this easy to write front end aps that generate in react, why would anyone use javascript to do it? Can someone answer that?
En ESPĂOL clases o jemeplos de DASH no hay casi nada todo en inglĂ©s... DĂłnde hay videos en Español
Unable to install dash_bootstrap_components
@25:00, you create the empty filtered data message and put it in a naked div with no p tag?! I don't claim to be an html/css expert, but I've never seen that before. Is there some unstated part of the Dash framework taking care of that with useful html tag defaults?
You don't have to put all text in a paragraph tag in html. I didn't do it here to keep things simple, though it is useful if you want to apply some formatting to the text like changing the font, color or size.
Did you consider Streamlit rather than Dash as a tool for creating such web apps? Streamlit seems to be clearer for a quick start, and it still provides enough flexibility and functionality.
Streamlit lack maturity. Dash, streamlit, shiny for python are made for data applications. Nothing more. Shiny for python is more mature because it stands on shoulders of the shiny framework which was available only with the R language.
Yes!
Great, Charming Data's yt page is awesome too!
Thanks so much, glad you liked it!
in the @app.callback, the input listens to the number of clicks, captured by n_clicks - is this built in to dash as it did not seem to be defined and passed anywhere?
excellent and informative tutorial though, as always đ
This is built-in for the button component. Whenever you click on the button in the UI, it will increment the n_clicks value by one. Then, the callback will activate as the value for n_clicks was changed.
@@tobyvd cheers for clearing it up
Yeah I don't personally like Pandas attempts at mimicking dplyr. df[df[column] == vals] is great and programmatic enough for me.
Great Video! I prefer to use:
filtered_data = MEDAL_DATA[MEDAL_DATA['nation'].isin(nations)]
Is there any video where you explain those constructions like
"def render(app: Dash) -> html.Div:"
Or the name of those constructions, so I can search it
Could not understand
Thanks
I'm sure that you've answered this question by now, but these are python type annotations. The simple syntax is `var: type` or `def fun(args) -> type`. The first one indicates that `var` is of type `type` and the second one indicates that `fun` returns an object with type `type`. The type annotations are considered hints rather than declarations. Python doesn't actually do mandatory type checking and the standard cpython doesn't take advantage of the type information. They exist as documentation and the IDEs will use them to help you avoid mistakes in your code. For example, if you a function returns a list and you are adding the result to a float, the IDE can signal that this is likely an error.
Shiny for Python is a good one.
Thanks Alexandro, happy youâre enjoying the content!
Hi, I'm commenting on your latest video as I'm not sure how to reach you otherwise. Could you do a tutorial on what would be the best way to generate documentation for a python project. I see many options. I understand generating docs from comments can be useful, but I'm curious on how the pros do it. Thanks
Thanks for the suggestions William!
Thx can you do a video about how to debug dash using vscode thanks
Thanks for the suggestions, Y Liu, I've put it on the list.
Loved this video, especially the layout of components, however I feel like I'd like to keep the callbacks defined elsewhere so the components are reusable without needing other components to exist and also since the callback logic does get complex with needing multiple outputs in the same callback etc
Can you cover some topics on Streamlit please?
Great suggestion, thank you!
The video was very interesting, but it could have been made a bit more easy to understand. Maybe it assumed awareness of Html, css knowledge.
Not all heroes wear capes
Thanks so much
@24:30 to check if a dataframe is empty, you can use "filtered_data.empty == True" instead of "filtered_data.shape[0] == 0"
I hate dash, the amount of http requests being sent is unfathomable.
For every drop-down menu you click, dash will send a networks request to figure out what to do with it.
Since dash is using flask, you are also using http1 by default which limits the amount of concurrent requests you can make.
Another issue I have is the lack of separation between update action invokation. You can't include the same component in 2 different methods, even if the signature is different.
Thus you start hacking your way to make the function do 2 things.
what are some good alternatives to dash ?
@@ChrisC-fk4lq We switched to Fastapi + React and never looked back.
The added complexity was worth it.
great tutorial, but if i can make some suggestion, red lines are really distracting
HTML in Python feels so wrong! excellent tutorial though!
I know, itâs jarring isnât it!
@@ArjanCodes next up, PyScript? :D
I too HATE the use of âmagicâ functionality to make things work. To me it smacks of poor design philosophy but it gets the job done I suppose. Ho humâŠ
ìŽë° ê°ìë„Œ êł”ì§ëĄ ëŁêž°ì ë돎 믞ìíë€...
Thank you - glad you like it!
I don't think python is a good choice for creating UI
Instead of query, i would have used the isin() method in Pandas.
MEDAL_DATA[MEDAL_DATA[ânationâ].isin(nations)]
Thereâs a filter method as well, but I feel the .loc patterns are more powerful.
enseñen como publicarlo para compartir a otra personas
filtered_data.shape[0] == 0 is not particularly user friendly. I'd suggest filtered_data.empty as a check that makes more sense. To fix your nations IDE problem, I'd recommend using MEDAL_DATA[MEDAL_DATA.nation.isin(nations)], though I actually think your query syntax is a nicer syntax for maintainability