Web Data Dashboard with Plotly express and Flask Python and JavaScript

hello youtube welcome back to my channel so in today's tutorial we're going to talk about a new project that i have created so i've created this simple our website this is a uh a website that has a dashboard for data visualization so we're going to create this using python and you can see i added some cool animations using uh javascript so this is the website you're going to be creating in this tutorial it's just a simple web application uh it says i'm going i'm going to use the plot list so it has different functionalities so i can zoom i can restore and then they can do just a lot of things so i can even download the images i can do a lot of things so this is the website that you're going to be creating and it's going to be using javascript and the other library so you can see i can even draw 3d graphs i can zoom into those 3d graphs and do a lot of stuff and can even record the video when i'm doing that i mean reset the camera for zooming so it has a lot of functionality for for for for uh this project that you're going to be building so you can also draw different backgrounds so you can draw unlimited amount of transfer if you really want to check how much how many graphs you can draw you're going to be using a library called plotly and you can go the plottery and can find all kinds of graphs that you can draw okay so the the language you're going to be using is python javascript uh html css and also use bootstrap for the styling okay just to keep the video simple without having to write our custom css so you're going to be uh yeah basically that's what you're going to be building so let's get started so uh let's just go back to my terminal you can see i'm running this from my local host so i'm going to uh stop this for now and then i'm going to clear the terminal so now that i have created terminal uh let me go ahead and actually make change directory and make a new uh new project so i'm going to uh source deactivate i'm going to deactivate this i'm going to defect uh deactivate my uh my current environment okay so i'm going to make a new directory here i'm caterer i'm going to call it flask uh plotly uh tutorial you can call it anything you want so i've just created a simple folder so i'm going to navigate into that folder so flask and then plot the tutorial i'm going to go into that folder so i'm in that folder right now you can see i have nothing inside of that folder currently it's just an empty folder so for us to get started i'm going to create a virtual environment so let me just make this bigger so that you guys can see i'm going to create a virtual environment so if you know what the virtual environment is uh you can just google it and search how you can create a virtual environment in python i'm going to do this the the code the command that i'm going to be using is only going to be working for linux and macbook if you're on windows there is a custom code for it so you can go in google and search for that code again you don't need to create a virtual environment if you don't want so but it's a good practice to create a virtual environment in my other videos i have demonstrated i have posted links on how to create the video uh virtual environment using windows so it's actually very simple you can just google it or search it on google it's very simple okay so i'm going to create a virtual environment for uh for our project so i'm just going to do a python 3 dash mvnv uh sorry vnv uh and then vmv okay this is going to work only for python only for uh with linux and mac users okay if you're on windows please go ahead and search for the custom command okay it's just one line of command you copy then paste in your terminal and then that's that so now that you have the virtual environment effect well let's say you can see i have a folder in there called vemv which is the name that i specified here now great let me go ahead and actually activate the virtual environment so you can use it so it better knows which environment that you are using so i'm going to do a source uh vnv venv sorry for slash and it's going to be bin for slash activate okay i'm going to activate the virtual environment so this is v e uh v e n v okay make sure you get the name right so now you can see the virtual environment is activated and the name of the virtual environment is in front of the line right there so now that uh if again if you're on windows this will work for you so go and google the command to activate your virtual environment again you don't need to create a virtual environment if you don't want so now that i have that set up let me go ahead and actually create uh install the library that you need to do so i'm going to do pip3 or you can just do pip install uh install you're going to install pandas uh you're going to install pandas you're going to install flask you're going to install politely and you're going to install plotly uh express so this is the libraries that you need to install so i'm going to press enter and this is going to go ahead and actually install those libraries so it's going to take a moment a bit of time and then it's going to go ahead uh could not satisfy the requirements version uh plot okay i made an error that's up bloodly bloodly express okay brought uh bloodly express okay my bad so you're going to install that little slippery floor so pandas flask bloodly and bloody express so these are the deliberates that we need to be able to create our web application uh to look the way we want it to look okay so this is the web application having all this navigation you can download the images you can zoom you can do all kinds of things uh of things and the library that we're going to be using to plot this is going to be is called bloody express and for us to be able to use portal express i believe you also need to install bloatly that's the reason why i'm installing this and then the back end that is going to be serving this is going to be flask and then the pandas is just for us to work with are csv files and other files like databases and be i guess able to manipulate data using python so that's how you're going to install those specific libraries you're also going to add this uh cool animation of a sliding effect whenever we scroll we're going to be using a library called uh ibis called or aox so this is the library i'm going to leave the link in the description where you can find this uh this library on github okay it's very great library to use so it's relevant label they're going to be using to enable this cool fade in and fade out animations okay so let's check if we have that installed already so uh ignore that era for now we just have to wait for this to get installed uh and then we can continue so let's just wait for that to install okay okay so while that is still installing i'm going to be telling you uh some that you're going to be doing in this project so in this project you're going to create i'm going to teach you how to create uh a whole full application having multiple file structure by uh by by the best practice of how you can do to structure your flask application in case you want to scale it or in case you want to build a really large application so i'm going to tell i'm going to teach you how you can arrange the folders and what should be in what folder and what should be in one file so in case you want to scale your flask application it will be much easier for you to scale it okay so let me just clear that so what you're going to do for now i'm going to um i'm going to create another directory so i'm going to mcata i'm going to call it application okay so i'm going to call it application so now that we have that application i'm also going to create a file called run.pi okay in the root directory of our project so i'm going to create i'm going to say touch run dot pi okay or if you don't know how to do this in the terminal let's just go and do it in vs code instead so let me just remove the directory that i have created uh application i'm just going to remove it so right now what you simply have is just virtual environment okay so i'm going to go ahead and actually open up my visual studio code and i'm going to demonstrate to you how to create this uh application structure that your flask application can be scalable and be used across can be used across multiple uh huge applications okay so now this has loaded so let me just go we are in here so i'm going to create a folder in my root directory i'm going to call it application so i'm going to press enter and then once once that is done you're also going to create another another python file we're going to call this one run.pipe so we're going to go ahead and encourage a python file called run.pipe so let's just wait for this to create i don't know it's being my pc is being a bit slow today so great so now we're going to go into application and we're going to create another folder called templates we are going to keep our templates and then we are going to create also another folder in there called uh static so you can know by static we're going to keep our static files like uh like we're going to keep our static files like html image files and other stuff okay so let me just explain to you so in our application we have you know in our directory we have two files that you have created we have two one file and one folder the file is called run dot pi and then the folder is called application so inside of application i have two other folders there is one called static there is one called templates so insta in template that we're going to keep our html templates in statistically are static files like h like css cells and image and image files and other uh other other static files like folder forms and other stuff we're going to keep it in static and then for now now that we have that let's go and actually create other other other files inside of our application folder so we're going to create in a file there we're going to call it are we going to make this a package so we're going to call it danda init then that by so then that means double underscore in python so double underscore init double underscore dot pi okay so that makes it a package so now that you have done that let's go ahead and create another folder and this folder is going to be called routes.pi inside of our application folder so this is gonna be file so it's called routes 25. that's we are going to keep picking all our routes so this is how you create an applications structure for a larger flask application okay so now uh let's go ahead and actually start to import put the right things where we they need to be so in you're going to go first go into our ganda init okay then the init dot python also going to import flask sonia so can say from from flask you're going to import uh into important flask and you're also going to be importing uh yeah i'm going to be putting flash just flask yeah so i'm going to in instantiate up yes we're going to call it a flask and then underscore underscore underscore underscore name so then the name okay so if i if if we mention the world than that that means a double underscore in python so now that we have that you're also going to impose something called from application you're going to be importing import you're going to import routes okay so routes just like that so then don't just step aside as i type out don't i'm not going to explain to you how it's reduced these things like it can take a very long time to explain to you because it has something to do with circular impulse i have to make a whole video like dedicated to it to explain this to you but for now just type as i did so we have just created imported the flask class and then we have instantiated or flask app and then i have imported routes and then routes this is just a python uh file right here great so i'm going to now we are done with the other under the underscore in its file so i'm going to close that off and then i'm going to run from run i'm going to say from uh application application import uh import app so i'm going to import the app and then i'm going to go if underscore underscore name and then that's underscore it goes to and then this command and then down there you're going to run this so app touch run and then you can say debug equals to true great so that's all we need to do for the run application just going to from our pic from our applications folder which is just a python package because we kept the underscore image here we're going to import app so the app is going to be imported from this underscore init file and the app is simply the flask instantiation and then in app you're just going to in run dot pi you're just going to run this we're going to import it and you're going to do a if underscore underscore name and that's underscore equals to uh string then the main dunder and then you're going to say update run and you've said debug equals to true great so now you're done with the app file so we can just go and actually close that so we now you are we're now in our routes dot py file so in our router paper this way you guys are going to create the python route so let's get started so before we get started we need to import a couple of things so we need to say uh from we need from application we need to import uh the app instance so we can use it in here and then we're going to say from our flask import uh we're going to input render template because we need to render templates i'm also going to import url for because we'll use the url for to refer to our static css files okay so import and also import pandas pandas uh from we're going to import pandas as sorry pd and then you're going to import a json library and then you're also going to import plotly that you have installed so import uh bloodline and then you're also going to import uh uh import uh plotly broadly express as px great so that's all we need plot this actually plot link.express okay not totally expressed so bloody dot express you're going to import uh you're going to import uh you're going to put it as as a px so great so now that we have that there let's simply go ahead and actually uh create our application so if uh in this tool i assume that you have a basic understanding of flask if you don't have a basic understanding of flask i hope i have a whole series introducing you to flash so i can go ahead and actually check that tutorial out okay so i'm going to create a simple route here coming college uh uh i'm going to call it route uh update route and i'm going to just be of index right so any i'm just going to have a function called index it takes you know no arguments so this is going to return a render template so we're going to render templates and i'm going to specify you're going to call this template uh layout.html great so what you're saying we're going to do is that we have j we have created a route here update route in the in the up uh this is just at the index url so for slash and then it's going to call this function and this function is simply going to return uh it's going to return a template called layout.html now you haven't created this template yet i'll create just a moment okay so this is just a decorator that is wrapped around this function so if you're not a decorator is i have a whole series on decorate on my youtube channel please go and check that throughout it's a whole series about the creator so it takes you teach you how to create your own dick right so if you're not decorate there is go and refer to that tutorial so great that's all we need for now so let's go into our templates try to this we're going to create our html file so i'm going to create a one-year code layout.html which is the one that you're returning uh in here right layout.html so in here as i'm going to create a boiler html template i'm going to create exclamation mark as you can shift and one on your keyboard and press enter it's going to return to the basic html structure so great now that we have that there i'm going to just go ahead and actually write some logic for our title so i'm going to call it uh this is code uh code code with prince okay this is the title so i'm going to copy this for now and i'm going to write in some logic here so i'm going to write in kind of pytonic logic here by using ginger truth ginger templating engine so the the temperature engine that you're using is called ginger so ginger true temperature engine so it allows us to write like a logic here using a kind of pythonic syntax okay so to write the to write the logic you have to use uh curly braces and then percentage signs okay again if you're not familiar with the basics of flask please go and check that tutorial out on our introduction to flask on my youtube channel where we will build an expense tracker using flask okay great so now it is going to say if title uh if title and then the title is something that you're going to be passing in into our routes here so let me just uh return in here so i'm going to say title and i'm going to say uh home okay so if i pass in a title here i can receive that title here so i'm checking if i have passed in the title because this is option right i can pass in this title or i can i can leave it out so if i pass in the title then what i want to do is i want to let me just also close off this for now let's just let me just type out everything and then i'll explain to you so i'm going to have also an else and then at the end of the the code at the end you have to say end if okay does it synthetic it's a bit yet but that's that's that's how it works so i'm going to paste what i have copied here so if title means that if you have passed in the title i want i want to i want i want my title of my webpage should be coded prints dash and then uh i'm going to refer to that title okay so this is title that is how you refer to this is how you refer to variables that you have passed so you use double kali braces and then you pass in the name of the of the variable that you have passed in here okay so that's going to search for example i have passed in home okay so if i if if the title exists which this case is true it's just going to say cody prince and then dash home okay so this is a task you can leave it out just dash just like the normal english dash it's not a part of the syntax if there's no title i'm just simply going to return our code prints that's all so this is just a logic to implement the the changing of the the dynamicity of our page okay so now i can go ahead and actually save this and then we can go ahead and actually try it also i'm going to go into my terminal i'm going to clear this into less and then change uh think of python 3 and then run.pipe this is going to start our development server so it's going to start our development server running at at port 5000. so you can just click on this to take locals i put 5000 okay so i'm just going to put my pc somebody running at localhost.5000 i'm just going to go into the basic url and you can see uh you can see the title of our page here it is coded prints and then dash home because i passed in home so if i come here and then change this to uh i can say index index i'm going to save this and then go back to the front end and then try to refresh this you can now it just change to now index okay so that's how the dynamic uh that you can do work with that okay so i'm just going to call it for now home great so let's go back to our layout.html file for now i want to include a navigation bar into our page so i have written i'm i've written some bootstrap already on my youtube on my github again the the code to this github is on in the description below so i'm going to copy this navigation bar it says a couple of bootstrap stuff so okay so before you need to do that we need to include the bootstrap cdn so you can just search for it so we can go to uh bootstrap put uh bootstrap bootstrap and then you can go to bootstrap for so you can search for the bootstrap cdn and then you can just include it there so cd instance from content content delivery network so i'm going to copy this and then go into my uh my app here and i'm going to simply paste it right here above that logic so great so now that i have that i also go back to uh the guitar the page here and i'm going to copy this and then i'm going to go back to my uh here and i'm going to paste it just right above the body right there so great this is just going to allow our page to have some bootstrap style and other stuff like that so it says bootstrap is just a css library that you're going to be using to style our page okay so now that i have the bootstrap in place i'm going to go ahead and actually copy this navigation bar that uses the bootstrap classes so i'm going to go ahead and actually copy this and this you can find the link is on my github page it's just a simple uh navigation but that i created so using bootstrap you can just go to bootstrap and then you can uh on the official page you can search for a navigation bar navbar i just customized customize mine to fit my needs so you can search for a navigation button and there a lot of navigation but you can simply copy the code and modify it to your needs okay so i've just done that copy the code and modified 20 my needs so i'm just going to come in here and then try to refresh this is going to display a code right here so our navigation bar right here so great so now that we have that let's go ahead and actually uh begin to include some fonts in here so you can see that uh sorry i begin to include some css so you can see that right currently my uh my title is not styled and it's not using the phone that i was using so let's go and actually include that so i'm going to go into our statics and i'm going to call it main.css so run that so this is going to allow us to create some css files cmcss code right here this is a simple css that i have uh very very simple so i can even go ahead and actually copy this from uh from the main page but for let's just go ahead and actually type it out so for now i also need to include some folders in here so let me go ahead and actually get the folders so i need to include some folders these are just some font folders that i need to to make this work so i'm going to go into my desktop and i already have cloned uh plotly up here i've cloned it so this is on my github page so i'm going to into the statics i have a folder called this so i'm going to copy these folders uh this suggests some fonts that i am going to be using for my application and also we're going to go into our project and then i'm going to go into static and i'm going to create a new folder here called uh fonts and i'm going to paste that in there so paste what i have copied in there so great so now you can see right now i have a folder here called fonts and it has those font files okay so you can find all of this on my github page okay great you can just clone the repository and then you can get this access to these files okay so the first thing that we need to write in our css our mender css file is i'm going to write uh i'm going to import the forms so to import the forms uh you need to type in the following code so i'm just going to go to my github page and actually grab that code instead of you guys watching me type it out so it's just in uh go back one director is in my static and then i'm going to go to main.css and then i'm going to grab those font files here so copy that it's just a bit lengthy to type out i don't want you guys to watch me type that so now that i have that so let me go and actually create the and create the the type in this is that we need so i'm going to give it a padding padding of zero pixels sorry this is zero pixels and i'm going to give it a margin margin of type zero okay and then i'm going to give it a font dash uh family i'm going to be the font for me of our work work uh underscore science regular so work sounds regular is just this uh this uh library this phone that you have included so i'm just going to use that for my application okay and then you also need to i'm going to also change a couple of things so i'm going to say uh nav navbar dash text okay so i'm just going to include some text i'm going to give it a color uh color of type this is an rgb value so this is a rgb rgb value so i'm going to type here sorry uh make sure i keep that right so this is an rgb value so this is going to be a 255. 250 sorry and then 250 250 okay it's also 250 and this is also uh 250. so great so now we also have now that you have that you're also going to have one called uh navbar brand so this is the one we're going to be using so this is going to be a color it's going to have color and the color is going to be of type rgb and rgb value sorry rg rgb value this is going to be uh 250 250 250 uh again 250 that's all and then i'm going to close off that line and then we're also going to have a font uh sorry this is font family and then the font family is going to be loves uh loves loves regular yeah this is just the the font the font that i have used here so i'm going to copy that and then paste it here uh make sure i get this building right so paste it here okay great so and then also i'm going to have a font uh font size and the font size is going to be uh 2.5 um okay okay now that you have that i'm also going to have a navbar navbar brand of type hover and then i'm simply going to have this here i'm going to give it a color uh sorry color of rgb so rgb and it is going to be 250 250 250 grit so let me just uh make sure i fix that and then you're going to have a font uh font family and then the phone family is going to be uh the one that you have just specified there okay great so that's all we need for our our page our css and one more thing that you need here so i'm going to call this site uh dash uh site dash uh header uh dash logo uh h1 so h1 and then this is going to be a full color it's going to be a color and then the color is going to be an rgb rdp value of uh 39 uh 147 to 248 great that's all you need and then you also need to say have a font font family and the phone family is just going to be the this phone that you have been using and then you're going to specify the font size and then the fourth size is going to be three ram and then you're going to also have the margin margin top and then matching top is just going to be uh two right there so great now that you have that css in place we need to now link it to our our main file here so to link it to our main file what you simply need to do we need to include in there uh some code so what you need to do in here i'm going to come here and i'm going to go in say uh sorry this is a link just like that and then i'm going to close off that link so what you're going to specify in here is they're going to say rail and then this is going to be uh this is stylesheet stylesheet and then you're going to specify a uh href where the star sheet is found so this is going to be this type in url underscore 4 and then the url for this is going to be static and then static and then it's a file name and then the file name is going to be uh the file name is going to be uh main.css and then we're going to close off that right there so close of that so what this simply means is yes the url for is at something that is coming from our our flask uh library so we're going to say urls for it's just a way to specify uh where the files are found for our our project so again we're telling flask to go to static which is this folder in here and then search for a file name called main.css which is our css file right here so that's what this syntax simply does and then you're going to specify in here the type and then the type is going to be um sorry this is actually type and the type is going to be a text text and uh this is going to be text text and then for slash css so that's all we need to do for that for the work so now that you have linked our css file in there uh we have we have linked our css india let's try to go back to the front page and now you can see we have used the nav sorry the nav the nav bar right here which is just one of our css classes uh here and this is going to change the font of our of our of our brand name okay so let's go back in here to our web page and then try to refresh this so to refresh to for the the css to load need to do a hard refresh control shift and arrow on your keyboard uh in case if you do the normal refresh it doesn't work you need to do ctrl shift and r i don't know why flask is like that but yeah that's how it is so now that you have that figured out let's go and then try to write our body of our application so the body of application is just going to be uh something that you're going to be going to using template inheritance okay if you're not template inheritances don't worry i'm going to explain to you just in a moment okay so i'm going to give it a bit of space here and i'm going to create mania and then the main the main is going to have a div this is going to be a container okay so it's going to be a container and then i'm going to have a row and then i'm going to have a call md-12 in there and then i'm going to have a call dash sm-12 and then i'm going to have a call dash uh xm12 okay so great so now that i have that in there you're going to also have another one called ml uh this is some bootstrap uh some bootstrap glasses ml auto and then this is going to be mlml ml write again uh auto so this is going to be some bootstrap classes that you need so you just type it as it is this is some bootstrap classes i hope you're familiar with the basics of bootstrap okay so now i have said that you're going to use something known as a template inheritance in flask okay so if you have great application right you want some parts of the ui to be inherited by other pages so you can easily do this in flask like from using the following code so they're simply going to do is they're going to create in here uh we're going to create in here something called i'm going to call it blog content okay and then i'm going to end that blog content right here sorry uh this is actually here uh end and block just like that so i'm going to save this what's this simply does is that whenever we have inherit these templates right all the other code the html and everything above and below these parts right above and below this part will be inherited the only thing that will be overreading is what we place inside of this opening and closing uh content blocks okay it might be a bit confusing but don't worry so if i go back the page right now and refresh nothing will happen because we have not written any template to inherit our current template so i want to write a template called index and then i'm going to go in here to my templates folder create another one called index dot uh dot html uh html and then in the index.html we're going to write a very simple syntax so i have told you that everything else will be inherited the only thing else that will not be inherited is this part of our code so we need to override this part of our code so in the background uh the template the the ginger template ending will concatenate or join everything else including all this html and all the ones that are below it it's going to concatenate it to whatever you're going to uh inherit you're going to override in these blocks okay so now to tell uh to do the template inheritance in flask we're going to say um you need to say extends extends and then you're going to specify the file that you want to extend so this is layout.html which is just our layout.html file great so now that we have that we can now override the content of the block of the blog part right so content blog content and then i can go and actually end that blog content here so i'm going to go and actually end that so i'm going to end a blog right there so whatever we put inside of here right what do i put inside of this blog tags for example i'm just written a h3 and i'm going to say hello hello world and i'm going to save that so when we're going to lay out right hello world will be passed in here so hello world will be passed in here into a cell world okay yeah so that's what basically a template inheritance is so if i go back to the front end and then right now i haven't in i haven't passed and i've uh we are still if you go back to our route you'll see returning layouts so that i want to return index okay save that and then go back to uh go back to our page here and then try to refresh it you can help you can see now we have hello world right there so we can see that we are returning index and in index we don't write in all of the html that we did because we have inherited it and everything else above and below this blog content will be added to this part right here so what would be this part to be taken and injected in place of this block content so that's all that's what template inheritance is all about so great now that we have that let's go back to our routes and actually write our route for to create our app okay so we can write multiple routes so you can just leave this one to be a layout or layout or something like that but but uh let's just create our own route so we're going to call this the photograph you're going to return index.html great and before we return that template you want to do a couple of operations here so we want to draw the graph this is graph one and in graph one what you're simply going to do is i'm going to simply create a created data frame so if you're not pandas is all about i have a small series on finders on my youtube channel you can check that out so i'm just using we're just going to read in some data in here uh please go into reading some data again i got all this code from from the official plotline documentation so you can just go in there and then you can find this code you can copy it and paste it in case you're not familiar with pandas okay so again if you're if you're not familiar with partners i have a whole series on pandas on my youtube channel you can check out that so i'm going to draw again i got this code from the official documentation so you can just go to official documentation and then get that code and copy and paste it here so you can choose any graph that you want get the code copy and paste it in there so now i have that so i'm going to print df and i'm going to say x x is going to be a nation again i got this code from uh the official documentation so this is not my uh my own code so i'm going to say gold uh gold this is actually gold and then this is a silver it's just a graph to display some mineral resources and bronze i'm just going to draw one graph and then the rest will just copy and paste it there so you can since you can find it on the official documentation uh there is no point to wasting time watching me type it out right so uh and then a form input just like that you know that we have that so great so this is going to be our figure right it's going to be our figure if you are coming if you have a data says background or we have done machine learning or did anything with data visualization python you are probably know what i'm trying to do here so i'm just going to just run a graph now i want to convert this graph into json and then send it to the html part and then call the javascript to render.json so that's what i think we're going to do so i'm going to call it i'm going to go graph graph uh one json and this graph one json is going to be a json library that you've imported and you're going to dump s so we're going to dump x i'm going to pass in a figure one i'll call this figure one and then cls is going to be uh so it's going to be bloodly blood lead uh utils and then uh this is bloodly your tails and the dots globally json encoder just like that so we're going to save uh this is the cls it's going to be class is going to be uploadly dot utils dot plotly json encoder that's all we need to do so now that we have the thumbs up we're going to return in here so you can see we can pass in our values to our templates right so i'm going to pass in this value into our index file so i'm going to pass in here graph uh this is going to be graph object so graph just quotation graph one this is going to be a graph of that one so great so we're going to pass in uh this into our our our html and we're going to refer to it using this limit in our html and the and the content is referring to is we did is this uh graphic this graph object variable here it is simply a json version of our plotly express uh file broadly express a graph or chat or figure okay great so now that we have that in there we can go into index right and then we can add in some code here so let's go back to our index uh index uh html file and then we need to add in some content here so instead of just returning uh this uh uh div with hello world i'm going to return something also i'm going to pass in a class here and then the class is going to be uh site dash header side shadow logo and this is just uh from our main dot from our css file right here so i'm going to pass in that and i'm going to keep passing a h1 here and then the h1 is simply going to return the name of our page like so called it prints and then they are going to pass in a class here so we're going to say class and then the class is going to be uh text dash center just like that so i'm going to return the text center in there and then uh we're going to return we're going to pass in here that uh we're going to pass in row uh this is a row and then you're going to give it a padding of dash 4. this is some booster glasses and i'm going to have a a card here so i'm going to create a card this is just a bootstrap card so i'm just going to type it in here quickly so card and then the card is going to have margin auto and then uh sorry this is imagine auto not imagine left auto so imagine auto and then we need to also include some styles in here i have some custom cells so i'm going to say with uh with i'm going to give it a 90 of the page okay great so now that we have that in there uh let's come down here and then notice i'm going to do is just going to create the cardboardy so card dash uh body and then i'm going to create the chat body and i'm going to have like a div here called uh i'm going to create a div object and i'm going to give it an id is going to be uh id is going to mean chat i'm going to call it chat one and then uh that's all we need and then i'm going to create a paragraph here just a simple paragraph uh this is going to be a paragraph so i'm going to go into lorem uh to generate some random text so i'm going to go for 80 and then run that so it's introduced for some random text uh i think this is latin text i'm not sure so now that you have generated the random text let's go back to our page uh right now and let's try to check it out so i'm going to go in here and then try to refresh this so uh the server stopped so if you're right writing the code and you write do a syntactical error it will stop so you just need to restart it again using a python run.pine so great we're gonna refresh this and now this let's see how it's going to be looking so it's taking a bit of time to load so let's just uh come in here so just simply that then is that just created this part is to return the head some it's just some uh this is the text that is going to stay on top of our page and then this part is what you're going to do with it the row it's going to be a row and the row is going to consist a couple of cards so this is the first card and you have this simply return and the card body has to return this text and i'm going to return we have also have a div here uh it's actually div we have a dvr called uh have an i could have an id with called a chat so this is the i this is that this is the uh that we're going to use this to get this we're going to use this id to get this div and instead of this device we're going to plot our our graph so let's just go back in here and just check you can see we have that right there so our graph is supposed to be above this text and it is going to be right inside of here so we're going to use the javascript to get this text right to get this div and then instead of this div you're going to plot our graph great so now let's just uh move down here and then down here right you're going to include some javascript and other stuff here so we're going to say uh plot plotly broadly cdn so properly cdn so this is just a content delivery network that means that you don't have to install portal using javascript in order to in order to use this so i have the cdn i've already copied it is on my github page so let's just go and grab it from there and again this link you can find this link in my disk in the description of the video in case you want to get access to this or you can just search for plot list cdn online and you also get it that way okay so let me just copy from there quickly and then we can save us a lot of time so i'm just going to copy this right here copy that and i'm going to go into our page and i'm going to paste it here so this is just the plotli uh uh content delivery network means that you don't have to install plotly in order to use it in javascript okay so i'm going to have a script tag here so in this script i'm going to have a variable called uh i'm going to call it graph graph one and the graph one is just going to refer to uh uh i told that to access variables from that you have passed in here right to access these variables we need to use the double curly braces so i'm going to copy this in here what i have passed in here which copy this variable name and to access it in here i'm going to use the two curly braces and i'm going to get it that way and i'm going to use the pipe symbol uh pipe symbol and i'm going to type in here safe so safe is just to enable some security uh features okay so now that you have that let's go ahead and actually uh plot itself so i'm going to do it floatly uh this plotley is going to float like a class right it's going to come from this cdn okay so you don't have to worry about where i'm getting it so plot you're going to plot and i'm going to put where we want to plot it you want to plot it right here in this div so i'm going to pass it uh here passing that id uh and then we're going to say now the graph that you want to plot and i'm going to mine is simply uh sorry mine is simply graph1 and then you can pass in here an empty object just like that and then you can save it so that's all we need to plot that graph so i'm going to go back to the front end go back to our page and then try to refresh this so i'm going to have to hide refresh ctrl shift and r now you can see we have that graph right there so it's very very simple to create that graph so now that we have the graph we can simply do the same thing for the other parts of the code uh so you can see if you if you come back here to routes we can do the same thing for other parts of the code so now let's do this one more time and then let's uh and then we can go and actually do the css animations and uh sorry javascript animations on fade on on on uh on scroll and stuff like that so i'm going to come in here called graph uh this is graph uh two so for graph two i'm going to call it graph uh sorry i'm going to create a df here i'm going to get another data frame and i did i'm going to call it px.data again i got all this code from uh from the official documentation so you can just go there grab the code find it find a figure that you want to plot grab the code and then try to play reverse engineer and play around with it so this is going to be a scatter plot a scatter scatter underscore scatter 3d scatter 3d plot and then you're going simply going to pass in a df and then you're going to pass in our x and now x is going to be a simple simple length this is the iris data flow iris data set very famous data set from uh machine learning data science and other fields like that so uh sample underscore width and then you're going to suppose by the x that's all this actually is a z right so because the 3 3 is going to be a three dimensional graph so this is the petal underscore weights okay so the petal width so the width is going to be coming in there and then you're going to specify the color the color you can specify the color to be uh species and then we can specify the title of our graph so title and then the title is going to be uh iris data set okay great so now that we have that graph in there we're going to go ahead and actually copy this great digestion of it and then you're going to pass it down here so come down past plasting that in there uh make sure that i get the indentation right so this i'm going to call this graph2.json so this is going to be figure 2 and then you're going to copy this and you're going to pass it down here okay so i'm going to call figure 2 and then figure 2 is going to be equals to figure 2. great that's all we need to do so now we can go back to in our index.index.js file in any index or ts file we can just copy this card body and duplicate it so copy it and then uh paste it here okay great so make sure we got it right so now that we have that we can just change this to be chat to uh chat too sorry uh i didn't actually copy the card right so let me just undo that so this is a card actually starts from here right so the card starts from here so i'm going to copy that and then paste it here okay it's actually charge 2 so i'm going to change that to chart 2 and then i'm going to copy this part of the code copy it and then re-do the same thing right so it says charge too and then in here you can just fix that indentation this is actually chat uh two change everything in here to be two right and then this should be chat to azure graph two and that's all we need to do so we can go back to the front end and then we try to refresh this the server stopped so i need to uh restart my server and then i need to go in here and then i can do a refresh and then this should now show both charts so it doesn't show both charts so let's see where the error is so we're getting a graph because plotted express let's check if the server is running yeah it is uh graph is what express json one save and then this is json2 and then the graph and then you have passing the graph so this is actually chat too yeah that's why it's getting that error so now we go back in here and then try to refresh this uh we still don't that doesn't work so let's try to inspect this page to see what's the cause of the error so let's just go into console and then uncut reference so let's see okay i think we have made a mistake here so let me just go back to routes you called it this is actually a graph two i call it 21 instead of graph two okay that's where you're getting that error so make sure i save that right and then go back to the front and hopefully uh everything works fine and now we can go back an error so let's see what we got json json2 is not defined so let's see uh json2 json2 uh yeah so that should be fine so let me just go back to index and this is json2 uh chat two let me just save this again and then try to do a hide refresh we still get back the error so let's see here our templates so the or the error is here templates this one one json two equals to graph this one two okay i i did a typo in there so sorry for that guys uh this is actually graph there's a h on it so let's graph and this is also graph yeah so let's try it now to refresh it hopefully i didn't make any more typos okay so let's just wait for that to uh load up so uh now you can see we have those two graphs right there so you can just it has the same functionality to zoom in and all that other stuff so let me just go ahead and actually copy the last graph from my github page and then i'm going to paste it in there uh copy this now let me just get the one from the graph itself from the from the routes and i'm going to copy and paste it in there and then you can go ahead and actually pass it in there so i'm going to copy all of this just copy this and then i'll pass it in there copy that and then go in here and then i'm going to paste it right here above here i'm going to go uh graph 3 and then i'm going to paste that in there okay remove that out so now that we have that this is a graph taste so i'm just going to pass it in here to our template so it's going to be filled uh let me just undo this so just make sure i get this right copy this and then paste it in here and then refer it to it like that and then you go back to our index file and then you're simply going to uh copy this and paste it and change this to be uh three okay so move this properly and then change this to be graph three and then this should be uh three and then this should be uh three great and now we need to create a card for it so we're just going to paste that card right here and this is going to be a three that's all we need to do so let's go back to the front end and then let's go back to the side try to refresh this and then we should see those three graphs right there so now those graphs are showing like let's make the animation uh we have an error right here so let me just check uh where that error is occurring so let's go to the index sorry index file and then let's see so it's actually graph this actually index t sorry uh chart three inverted chart two that's why it's merging those two chats right there so let me just refresh this for now uh and our graph should be working fine so now that we have our graph let's make this go and actually make the fade in and fade out animation so you're going to be using a library called uh aaos like i found this library online so you can find this target i have blueprint story i'm going to leave the link in the description in case you're interested in this github repository so first we need to copy the c i'm going to go to the front uh to my layout my layout.html file and i'm simply going to paste it here because i want all my inherited templates to be able to access it okay great so now i'm also going to go ahead and actually grab this part grab this part and i'm going to paste it in here so i'm going to go at the bottom here and i'm going to just after the bootstrap links and i'm going to paste it in here so i'm also going to copy this part of the code and i'm going to paste it in index.here i'm going to paste it here just uh after they're plotted i'm going to paste that in there so great so now that we have that in there let's go ahead and actually uh begin to uh customize our page that you can be uh so they can use the the actually we don't need this in here so i can just remove that we don't need that in there so what we need to do right now is just um refer keeping the animations right here again you can read the github documentation is actually will detail osx and then i'm going to say this is equals to this is going to be a slide uh dash up okay then i'm going to copy this and i'm going to refer it to the other cards so paste that there this is going to be um this is going to be slide let me just check it out this is going to be fade left so this is a fade left and this is going to be a fade dash right so i'm going to copy this again and then change that left to be right so copy that and then bring it here basically this should be uh this should be right just like that and then uh yeah that's basically it so this is right so let me just check it out to make sure i got everything right so uh yeah it has a documentation here so you can shift uh fade up and other stuff like that so yeah that's all i want for now so this is uh okay and you can find other online documentation that gives you greater detail than this one so this actually let's add this to be fade right all right uh let's use let's change this to be fade uh i think there's one for up i'm not sure let's just leave it to be left for now i'm not sure but this left there is right let's just leave this two to be left and then this one is going to fail upwards okay great so now that we have that that's all we need for now uh let me just go back in here and then let's try to check if it's working and then try to refresh this this should be shift fading in from the from the left so you can see that then if i scroll all the other pages uh appear you can see this one okay great so now it's a bit fast and i want to slow i want to slow make this a bit slower so also here i want to give my card some uh some some padding and stuff like that so i'm going to create some magic bottom so and other stuff like that so i'm going to give it a imagine bottom of our four so that our cards can be spaced out a bit so copy that and paste it in here and then also move up here and then also paste that in here great and then yeah that's all we need to do so i'm going to go back to our uh our index.layout.html you know any i'm going to pass in so i'm going to pass in an object and i'm going to say offset and offset you're going to say it's default is 400 so and then you're going to also say duration so at the end we can make the bit slower so i'm going to specify in there one second okay this is not it's not actually yeah so that's what we need to do so let's go back to the page this should be uh the transitioning should be much a bit slower so let's refresh that and then let's see how it looks like so now you can see the transition a bit slower so if i come down here you can see it face in slow and nice so great so uh it the bootstrap uh the bootstrap matching button actually doesn't reflect so let's see why that's not working matching bottom is four and then matching up two i think we can just change this to be margin left right margin left should be uh auto and then matching uh you can also include the right one imagine mining right dash auto okay so let's try to refresh this and then go back to our page try to refresh this let's check if it works yeah it works for this one so let's just copy that code and then because i said imagine how to say it as does for all the other sides so i'm going to paste that in there and then also here paste that also here and then save that so go back and refresh this now you can see this uh card should be well spaced out so great you can see now the cards are well spaced out and then if i scroll down the card will appear if i i can scroll down here uh the card will move down here so you can see i can even zoom in and other stuff like that that examine this 3d graph you can also download this graph so if you download this it's going to download a png image on your file so this should pop up be right here you can see it has already downloaded so i can go ahead actually open that and this is going to open for us the image of this uh file so that's how we can go and actually create this uh file so i hope you enjoyed this draw so far so if you enjoy this draw please kind of give my channel uh subscribe like this video and uh press the notification bell for other videos like this into data science machine learning web development building dashboards okay so if you're interested in those stuff kindly consider subscribing my youtube channel thanks for watching i'll see you in the next one keep safe

Channel: Code With Prince

Views: 26,329

Keywords: browser-based interactive data visualization, Getting Started with Plotly, Plotly is a plotting library for python, introduction dash plotly, Dash series for Python, web app dashboards, web application dashboard, python, sentdex dash, plotly, flask tutorial, flask and plotl, aos js, tutorial with python in dash, Data Visualization GUIs with Dash, Plotly Dash Tutorial, interactive web applications, Introduction to Plotly Dash Web Application Development, dash, dash plotly callback

Id: B97qWOUvlnU

Length: 56min 37sec (3397 seconds)

Published: Sat Jun 05 2021