Intro - Data Visualization GUIs with Dash and Python p.1

Key Takeaways

what's going on everybody and welcome to a tutorial with python and dash if you don't know what Dash is basically the idea is it's both to help you with data visualization but also embedding that in some sort of web-based UI now of course I I guess I should really say browser based UI you don't actually have to be connected to the web and because of that I I really do think that's probably going to be the future so as opposed to doing something that graphs in like like with matplot lib and T there's really no reason like every machine has a browser so so why we need that to be a standalone application I don't really think that's going to be the case or needs to be the case um so anyways it's really browser based and the idea is um that you know not only do you need to create a graph often times but you also need to embed that graph into some sort of user interface and often times that user interface is going to be a completely different framework from what you're using right now and you know making the two interact together can sometimes be quite the challenge and take quite a bit of time and require a lot of code so what Dash is aiming to do is to help you not only make your graphs but also make the UI surrounding that graph much much easier so what Dash does is it incorporates HTML with react JavaScript and um and then obviously the plotly graphs so plotly is who's behind Dash so um I actually just kind of stumbled on dash I hadn't really heard much about Dash until I was trying to I was looking into something with bokeh and then I saw people comparing Dash to bokeh and people were just saying yeah Dash is pretty cool and so I just looked into Dash because I hadn't I had even found like a Pyon talk somebody that was covering like all the visualization libraries um and dash wasn't talked about I mean plotly was talked about but I feel like it's a little unfair not to mention uh Dash in that uh because this is really cool so what I have here um I've been revisiting a project of mine putting a computer in a car um you don't really need to know anything about any of this stuff it's just just look at it for the UI sake um but the idea here is that we're graphing various things that are being read by a sensor um and what's cool about Dash and really all this stuff is like is you know you could start with this and first of all yeah the graphs are live and yeah we could hover the graphs but we can also we can change things dynamically and just it's just updated live for us thanks to react and dash for combining those for us so for example if I remove one of these charts the other one it just gets boom updated and it fits to screen actually in that case I'm using some CSS that I pretty much wrote myself but um or not wrote myself but had to bring in um but again it was super simple um but actually even that CSS though I'm actually writing that in Python which is cool um but anyways yeah we can go even down to one or if we wanted we can continue to add more graphs like for example and we can gra add that one if I continue adding them obviously we'd run out of space but I could scroll down and see the one I just added so anyways that's one one quick example of something that you can make uh with Dash and uh now let me show you one more example so here's another application I have uh built with Dash it's a little simpler um but same kind of idea so in this case what we can do is we're going to input a symbol that represents a graph or a stock ticker and then it just automatically is going to pull and graph that information for us so as I keep changing it we get a different ticker and so on and now we've got Apple here but um again the idea is that just by typing into here and using react but I don't know I've never coded any react in my life uh this works uh and it's it's just super cool super easy um and I'm really excited to have found this and I hope you guys are going to enjoy it as well and with that uh let's go ahead and get into the series all right so to get what you're or get PIP to get Dash what you're going to want to do is PIP install it so first we're going to do pip install and we're just going to grab quite a few things here we're going to get Dash we're going to get Dash Das renderer d-h HTML Dash components and then you would also want uh Dash core components um so you're going to want to get all this uh also let's get plotly and uh just for the the record just in case I forget to mention this anytime later on uh you know the UI aspect of Dash is actually pretty quick and easy to to pick up uh what might be a little less easy to pick up is all of the plotly stuff uh so plotly as you you might know is a a maturing framework for doing JavaScript based data visualizations and basically anything you can do in plotly you can do in dash so if you want to do like customed graphs and stuff like that um I would highly suggest you check out like you know just Google what you're trying to do and chances are probably someone has already done it and then embedding it into Dash is pretty simple but I will show an example of us doing that exact thing just doing a simple plotly graph versus Dash and all that so anyways um make sure you get all this you will need to run as admin or if you're on Linux uh you know use a pseudo if you hit an issue on windows with not having um the the proper compiler or whatever uh check out the text based version of this tutorial I put some examples there as far as what you can do to fix that I think it was at least for me I hit it with markup safe um but you can either remedy uh the compiler itself or you can get the unofficial binary um anyway that's in the text based version head to the head to python program.net either search for DASH or check the link in the description there's probably a link to this tutorial in the description so once you have everything you are ready to rumble so let's go ahead and import Dash we're going to import dashore ccore components and then we're also going to import dashore HTML components so the core components are going to be things like graphs and stuff like that and HTML components are going to be things like tags um like div tags that sort of thing so to start an an application we're just going to say app equals dash. Dash and I will also mention that uh Dash is buil as a it's a flask app so you can combine this with flask either making your flask app starting from uh Dash and then you could add um uh shoot uh url url paths I'm trying to think of the proper term here uh anyway you can you could do that with the wrappers you know or you can actually embed a dash application within your flask application again we we might cover that way later on down the road um but cuz for the most part my use of Dash is for Standalone applications not really to embed um but I might cover it down the road anyways but even if I don't uh this has been covered it there are is documentation for doing it so just keep that in mind so then what we're going to do is specify app. layout and this is going to be something you're always going to have this is going to be the HTML of your entire project so we're going to have html. diiv so this just starts a div tag and then let's just say Dash tutorials for now so um this is just is whatever goes within that div tag so we're just going to throw in some text there and then now we're going to run the application so I'm going to say if underscore I guess I should say if Dunder name equals Dunder main uh we're going to do app. runor server and then we will set debug equals to true even though it's never been useful for me um at least on my Windows machine uh now I'm probably G to have an issue doing this still running that other uh let me run this real quick let's just see if this works but uh you should see oh HTML what do we do oh so Dash core components we'll import that as DCC and then the HTML components will import as HTML try again cool so um now I had that other app running let's just see if I can refresh I probably can't yeah so it's still so this is something you're going to hit at least if you're on Windows I haven't tried developing with this on Linux so I don't know if it's is hard but it's actually pretty hard to stop this server from from running uh let me pause just for one moment while I bring up a task manager so as truly lame as this is uh once you have started this server it does become quite challenging to get it to stop so the best way I have found is one whoops one is to close all the running servers uh and then what you're going to want to do is uh come over here and stop the running python task which is going to close what you were working on uh and then make sure you've got obviously your apps and then you've got your background processes you'll want to check the background processes too cuz one's going to sneak right in there uh now what you're going to want to do is come back over here and then we'll just restart this one and then we have Dash tutorials now um I know some people are going to be like oh God that's horrible um that is pretty annoying but I will say the only time you're going to have to deal with that is when you start a new script so um so you'll see here this is running with stat uh so what we're going to do is what we can say is like Dash tutorials oh you can't even see it hold on I'm off the screen I'm off the screen we'll do that again Dash tutorial there we go so as you see right here it just says Dash tutorials but when we save this let me pull up restarting with stat as well when we save this you'll see it says restarting with stat and now we can actually just refresh this page and you'll see it's been changed so as long as you're working within the same script it's not going to be a problem it's only when you um you go from running one server because this basically runs a local server on your machine so it's only from when you go from running one server to another server that you start to start to have issues so so just keep that in mind um that if you are hitting first of all I don't close this uh but if you are hitting uh issues uh just just go into task manager kill the task if you're on uh Linux uh you can also just kill a task with like top or HTP or something like that um there's also like task kill or something like that I think task kills actually Windows anyway you can look it up figure out how to can't you know just close all python tasks although I'm not sure you should do that on Linux anyways I would do it probably by a top but anyways uh let's continue so so we've got Dash tutorials so so this is a really simple app layout now let's talk about the a more realistic way that you're probably going to go about doing this so you've got HTML div which it contains everything now when you just have some text that's going in the HTML div that's one thing but chances are you're going to have IDs you're going to have styles you're going to have classes stuff like that so it's going to get really challenging to figure out what the heck is which uh if you don't label this so uh the the actual contents are going to be referred to as children and children can either be uh a single element like that or we can actually make it a list so I'm going to make it a list so one of the children will be Dash tutorials the other thing that we can do is we can we can apply a tag to the children so for example we could say html. H1 so this will apply a header one tag to- tutorials so again if if we save this and we come here refresh now you can see okay header one awesome fancy so now um while it's fun to to do HTML stuff we really can't here for the graphs so so let's do a graph so uh this is one of the children now let's add another child and just like with HTML um you know you can write it sloppily or you can try to style it now obviously it's going to be a little challenging to style HTML from within python um but we'll do our best so at the start of the list I'm actually just going to hit enter and then I'm going to hit enter for the end of the list and then now to add each additional element here I'm just going to do a comma and then go so now let's add a graph so graphs are going to come from the DCC so the dash core components so I'm going to say DCC do graph and really that's all you would have to do to to add a graph you just throw in that component now you need you probably should add some information uh to that graph so so let's do that now so let's just say this graph has an ID of example and then what we're going to say is uh we're going to give it some information so we're going to say the figure itself and very quickly this is what's becoming your typical plotly graph So within your figure you're going to have um a data element let's just do this so data and then your data oops is going to consist of um either a single dictionary or a list of dictionaries so if you had just like a single dictionary that would be like a single line or a single set of bars um but what we're going to do is a list so we're going to have uh let's do some lines and some bars so for our data what we're going to say is first we're going to have uh you know you're going to have some x's and then you're going to have uh some y's and then uh we'll have a type oops don't do that uh we'll try to keep it all single quotes type [Music] we'll make that a line and then we'll give it a name as uh boats so now let's give it uh some values here so let's say x is one 2 3 four and five and then y can be I mean this can really be anything you want anything you want uh now what we're going to do is it looks like I came off the screen a little bit I'm pretty sure you guys know it's said over there but uh let me make this a tiny bit smaller just so you guys can for sure see everything there we go okay so uh there we have some data but let's add one more bit of data and in fact let's just keep with the styling here okay uh and then let's make this a little different I'm just going to Reen some some random data here cool uh and then rather than a line here let's make this a bar uh and then rather than boats let's make this cars so that's our data uh so then besides data we can have other uh elements let's call this one like layout uh and then layout for example we can add all kinds of stuff for now let me just do uh we'll just add a title title and then we'll call this basic Dash example okay uh barring some sort of syntax error which we'll find out in a second okay so we didn't have any syntax error that's another example if you error out uh you'll probably have to close all your python stuff when you could go to restart so try not to write errors because it's annoying uh now we'll just refresh all right and now we have a basic uh graph here uh made with Dash now of course most of this is not really UI based this is just uh it's mostly just a graph that we've stuffed into our app layout and really the graph is pretty much a plotly graph that you might see but uh nonetheless we've we've actually done it we've made the graph and all that so now what we want to do is continue working on um the actual user interface aspect and the interact ability that Dash gives us with with react and JavaScript script and all that so um that's what we're going to be doing in the next tutorial is uh getting more into depth with the actual UI aspect of things because um uh you know really once you once you figured this out how to make this graph uh honestly you can make pretty much all the graphs in all of plotly so so I really don't see much point in spending too much time going over those but getting through the actual Dash and making of a UI and stuff like that that's where it's a little more complex but anyways uh we will graph a few more different types graphs and and get live graphs and all that in the coming tutorials that's said if you have questions comments concerns suggestions whatever feel free to leave them below if you didn't know we do have a uh Discord server now so if you want to come in chat with us you've got questions that you want to answer in real time uh come join us on the Discord app I will put a link in the description for the invite there to our Channel otherwise I will see you in the next tutorial