Dash : Python Framework for Machine Learning, AI and Web Analytics

hey what's going on everyone today we are going to talk about dash dash is a python open source framework or library that's used generally to create web-based reactive applications and data visualization interfaces it was a library when it was first released in 2017 and it was on github for two years it was sitting there on github for two years to determine the feasibility of the whole dash idea and to verify that dash will function as envisioned essentially it was just a proof of concept what i really like about dash is that you don't have to know any advanced web development technologies to create your application in fact the technologies that form or constitute the dash application are three different technologies flask which is used for back-end server react which is used for the front-end interface and plot lead.js which creates the different charts for whatever statistics or analysis that you're doing on your application so dash takes care of all of that for you all what you need to do is to understand the set of rules while writing your python code and not only python by the way dash is supported by r and julia languages as well if you know any of those so the company that build dash is plotly and maybe you know that name you know plotly library for machine learning that generates line plots bar charts and so on so plotly is a company which is based in canada and responsible of the development of the dash framework and if you will type plotly.com you will have this page so as we said plotly has open source dash which means it's free you can use dash at no cost but it also offers a commercial version to dash called dash enterprise and this page service provides companies with support services such as hosting deploying authentication on dash applications and so on these features are outside of dash open source ecosystem so if you're a company and want to make use of dash enterprise you will be charged some amount of money in exchange of the premium features of dash enterprise and can take a look here to the different clients of dash you have first republic bank nvidia tesla shell big names as you see okay so you can build your application very easily build your dash app in few lines of python r or julia code as we said okay you can deploy your application very easily and then you have hyperscale here you can deploy unlimited dash apps to unlimited end users so dash enterprise is the fastest way to elevate ai machine learning and python analytics to business users and i'm not trying to promote dash enterprise it's just it is what it is you know i'm not gaining a penny of that um take a look here they have collected 30 million dollars funding toward advancing open source data visualization and python and r user interfaces all right plus 10 million downloads 59 000 stars on github and 50 million users so plotly users worldwide are making data science and ai accessible to everyone even take a look standard and poor select nash enterprise for data apps obviously this is their promotion for dash enterprise but we'll be working today with the free dash library okay we will not touch the dash enterprise again dash enterprise is working with the world's largest businesses such as bas cisco tesla nvidia okay air canada so you can see here big big names enough for the dash enterprise i would like to show you some of the very cool interesting projects that were built using only dash so this is a dashboard to analyze trading positions in real time and as you can see here that the indexes are changing red for losing points and green four points gained alright another interesting project is the new york uber rides which is a visualization of millions of uber rides in new york all right you can check out your location you can select any location that you want of course in the source code you're going to just define these these are not given and also you can select the hour and the last project is just a financial or interactive financial report okay get price performance portfolio management fees and minimums distributions and news and reviews okay so you can create a full dashboard for your company for your financial company and you can take a look to the source code of that project and change it accordingly all right so in this very quick application we're going to be building you will select a value in this drop down so you have here google apple microsoft tesla and lenovo these are the companies that we can choose from and the code will dynamically export data from the yahoo finance services into pandas data frame so in the backend we'll be working with flask and the rendering of the page will be in react and this chart is going to be provided by pandas data reader all right it's simple as that so let's change from google to apple you'll find that the value has changed august 13th um 19 today is 22. so this is the last day august 19th is 146.7 for one apple stock let's take a look to microsoft it's 304 it's 20 of august so it's 304.36 dollars which is quite high let's take a look to tesla it's 709.82 dollars it's very very high what was that here the peak it almost reached 900 dollars per stock almost you can see 883.09 all right so this is what we're going to be building now let's not waste time let's roll up our sleeves and get started alright so let me just go to desktop first and i will create a folder i will call it dash dot okay and you will need to install a couple of dependencies i've installed them already but what you will need to install is dash obviously and pandas underscore data reader okay go ahead and hit enter you will install that and you will be ready to go all right and now let's go ahead and open our folder with visual studio code all right so let's create a file we'll call it main.pi and we're going to write a flask application actually okay and the rendering will be react so if you have react devtools in your google chrome um you will check it out you will find all the react elements there and you will not need to write react actually dash will take care of that all right so inside our main.pi i want to import dash also i want to import input and output okay so input and output are imported from dash.dependencies so from dash dot dependencies i will import input and output and the inputs and outputs are simply the properties of the application okay dash works around this idea of getting an input and generating a graphical output okay also i want to import dash underscore core components and i will give it an alias of dcc okay so this is just a library that generates higher level components like controls and graphs and so on and the idea will be clear once we will use it also i want to import html so import dash underscore html underscore components and we'll give it an alias also as html we need also data reader so from pandas underscore data reader i will import data as pd um as web actually and the pandas data reader module is used to read data it's as simple as that also i will need date time so from date time date i want to import date time i will give it an alias of dt okay and we'll be using datetime for time span okay you will see what i mean later let's now create a dash application so app equal to dash dot dash so this is our main application and we want to design a layout for that application and we will use the html components module and we will access div class and in the div class i want to have different properties and here we will have our main layout for the page okay so i will take the dash oops let me actually put it on a different line so i will take the dash core components the dcc and i will create a drop down and that drop down will have an id of my dash drop down you can call it anything that you want as long as it's meaningful of course also we'll have options and the options will be equal to a list of different key value pairs we will have a label and a value so the label will be the name of um the company that you're interested to check out its price so for example google and its sticker name which will be g double o g l for example okay and we will need four more and let me actually change uh google to apple i want also microsoft alright and that's it i also want to have a default value and we'll make it google for example all right this is for the drop down we want also dcc for the graph so we'll make it on the same line with the dcc dot drop down but we want dcc dot graph graph with the capital g okay we'll also give it an id of my graph all right and that's all here and before the ending parenthesis we'll give a style with the width of 500 pixels all right next i want to write a decorator and let's write here the main block at the bottom so if name is equal to main [Music] i want to run the app or run the server app.run underscore server and run it at the development mode where debug is equal to true alright now i want to write a callback decorator and by writing this decorator we will tell dash to call the function that will come after that the creator so at app.callback and as a parameter we will have two parameters actually we will have output and input so the output with a capital o will be in form of graph okay so we will use the my graph id and this is a figure actually okay so this is as far as the output for the input we will use the my drop-down id here because this is the input this is where we're going to retrieve information from yahoo finance and we're going to define that later so input my drop down and we'll take that from the value all right from these sticker values and now let's create our function i will call it graph and graph will take a parameter or an input we will call it selected drop-down value so actually what we have done now is that we have told dash to call the graph function whenever the value of the input component changes in order to update the children of the output component on the page so we'll need data frame right and the data frame is equal to web dot data reader and the data reader we will take that input selected drop down value as the first argument the second argument will be yahoo it used to be google but there is something wrong with the google finance so yahoo is working perfectly and then the time span okay so we will need the date time we have um we have an alias for daytime here the dt okay so we'll use that dt and let's start from 2018 so 2018 1 1. okay the 1st of january 2018 and the ending date will be till today till this moment so dt dot now all right and what we want to return is data so the data that we want to return will be in the form of x y axis so the data here is going to be a list of a key value pairs the first key will be the x coordinate and this is going to be equal to the data frame dot index and the y axis or the vertical axis is set to oops is set to data frame dot close all right then we will have just a normal margin and all of that is documented guys i'm not inventing anything from my head these are just set of standard rules that you'll need to follow in order to get that layout so the margin here will be set to also a set of key value pairs so only just to determine the layout in terms of pixels left right top and bottom okay so let's start by the left and the left will be set to 40 pixels then we have our right which will be zero top 20. and bottom 30. and that's all it is so as you can see with 42 lines of code we have written a decent application that actually retrieves financial information for different stock prices all right so let's go ahead and open a new terminal or you can just hit ctrl shift and backtick python main.pi it's not data it's date okay python main.pi all right so opening at localhost port 8050. go ahead and click that so see here serving flask app main and debug mode on so any changes that you will do you will not need to interrupt the server in order to reflect the changes um the changes will be applied immediately okay let's make that bigger so we have google apple microsoft tesla lenovo let's check out lenovo okay so as of august 23rd 2021 it has a price of 21. only okay all right um yeah so that's basically it thank you very much guys for watching and i will see you in the next video take it easy guys

Channel: Bek Brace

Views: 10,200

Keywords: dash, python, machine learning, web analytics, trading dashboards

Id: i2bk7M1NbIs

Length: 16min 48sec (1008 seconds)

Published: Thu Aug 26 2021