All language subtitles for English captions

hey everybody welcome welcome

today i'm going to talk to you about

dash 2.0.

Dash is a library that makes it very

easy to create web apps in python,

especially analytic web apps like the

one that you see in here on the page.

In this tutorial i'm going to tell you

all you need to know in order to get

started with Dash.

At the end of this tutorial not only

will you be able to build this app, I

will also share with you exercises and

learning resources so you can continue

building powerful web apps in python

with Dash.

I divided this tutorial into certain

chapters and sections

for you to rewatch them if you're

interested. Just go under the video and

click on the section that you want to

rewatch.

So,

a dash app is best defined as

components

that are displayed on a page

through the layout

which interact with each other

through the callback.

That is all you need to know.

Components,

Layout,

and Callback.

If you remember those three things,

you can do anything you want to do with

Dash,

especially as you start building out

these apps.

So,

the components are anything from

a date picker, a slider

a check box, a checklist, a radio button

or a dropdown, like the one that you see

here and many many more.

Layout

is

the part of Dash that allows you to

customize

how the components and how your app is

displayed on the page.

So you can use the layout to

have the dropdown appear to the left of

the map or to the right of the graph, on

top of the graph,

maybe you want a sidebar,

maybe you want

tabs, or navigation bar, or a multi-page

app.

Everything is done through the layout.

The callback

is what gives life to the app. The

callback is what allows the app to be

fully

functional and interactive.

So let's build a few apps together so

you can see this in action.

I recommend going into my github, this

link is under the video,

and opening the file where I have the

code for this video.

In fact, this whole github repository

Dash-by-Plotly, and this

Charming Data channel -

the purpose of these

is to teach you Dash, teach you Plotly, and

also

help you understand how to build web

apps in Python.

So,

go to Good-to-know. This link is under

the video.

Go to

Dash 2.0,

and here you have all the files in

python if you're using pycharm or VS

Code. And here you have

Jupyter Notebook files.

We also have a few exercises that I

built for you and some solutions

that

you can do in order to better learn Dash

and feel stronger with it.

Now,

in case

you do not have Python on your computer

or you don't have Pycharm or VS Code or

Spider installed,

you can also run the code

for this tutorial,

and any other piece of code on my github

repository,

you can run it on your browser, directly

online.

You don't need to use your computer. If

you want to do that, go all the way down

in my Readme,

copy the link

right here, and paste it into your web

browser like this. This will allow you to

execute everything online. Just follow

the instructions on this gif.

All right so let's get started. I'm going

to open my code,

we're going to start with hello-world.py.

So open this piece of code, this Python

file

from the github

and

let's let's see what exactly is

happening inside this file.

So first of all, we're importing the two

libraries that we need for this Dash app.

First we import Dash and Core Components,

and then we import Dash Bootstrap

Components. These are components that

will help you style your app and

customize your layout and do many other

things as well.

If you don't have Dash or Dash Bootstrap

installed, you have to open your command

prompt or your terminal

and pip install these two libraries just

like this.

Terminal,

pip install Dash and then pip install

Dash Bootstrap Components, and this app

will run successfully.

Now,

the first part of a Dash app, remember,

are components,

so let's build our components.

Here,

we start our Dash app and we choose a

Dash Bootstrap theme. In this case the

theme is called BOOTSTRAP.

This will almost always be the same.

Then we start building our components.

In this case I'm building a variable

called mytext, and this mytext variable

is actually a Markdown component. It's a

Dash Core Component

Markdown.

The property

of this, the children property of the

Markdown

is a string in this case.

And this is markdown um format,

so this will appear on the page as an h1

or as a Header.

After we build our components

we have our layout.

And we put the component inside the

layout

for this to be displayed on the page. So

if we run this app,

click on this,

we'll see our Markdown component: "hello

world let's build web apps in Python".

This is exactly what we put here.

If i want to change that I can say

"hi world", and then re-run the app

and that will that will change the title

of the app. We can go back here,

refresh, and now we see "hi world".

Now,

this app is

not interactive.

If we want to add interactivity to the

app

that is when we have to use the callback.

So let's open

this file: interactive-app.py

and let's see what is happening here.

Here we import the same

um the same libraries, but we also import

output and input, which is part of the

callback.

Then we build our components, we're

instantiating and starting our app. We

choose the solar theme, so if you run

this you'll see

a

solar theme. Let's close this.

See this is a darker theme,

and then

we create the same markdown

but this, in this case, the Markdown

children is going to be an empty string.

There's not going to be anything in it.

And then

we're creating myinput which is a Dash

Bootstrap Component Input component.

The value or the value property is going

to be this full string.

And then we're putting both components

that we created

inside the layout, one on top of the

other:

mytext which is the markdown and then

myinput. Now

if we just do that, without the callback,

Control +

question mark,

hashtag it out,

let's rerun the app.

If we do that we'll see

that

we don't have the Markdown,

we only have the dbc Input.

Let's go like this, "let's build web apps

now."

That's it, it doesn't do anything, there is

no interactivity, this is only the Input.

It only represents this.

Why is that?

That is because the children of the

Markdown is empty, there's nothing in

here. So although we put mytext inside

the container,

there is inside the layout, there is

nothing in here. So you can't see

anything inside the Markdown.

But we're going to activate the callback,

we'll hashtag this out,

and activate the callback so if the user

changes anything in the Input

it will also change the title of the

page or the Markdown.

Like this,

go back,

refresh,

and now if I write anything in the page -

"Hi mom

I missed you",

it's going to translate into the

children

of the Markdown.

And that is done through the callback.

And what's cool about Markdown

is that

you can add even links or anything you

want to do really. As long as it has

markdown format, so let's say

"check out",

let's put,

"this link",

like that,

like that. Click https

google.com,

and now you see that this is a link. We

can open it and go to google.com.

So this is all done, this interactivity,

is done through the callback.

Let's see

how we define the callback.

Okay,

so the callback

typically is built from, not typically

but always, is built from a callback

decorator

and a callback function.

The callback decorator

will have an Output

and an Input.

Each Output and Input

have the component ID,

which is the name of the component or

the ID,

and it will have the component property

belonging

to that component.

So in this case,

the Input has,

we're using the value property

of myinput which is this.

And in the Output we're using the

children property

of mytext. Mytext is the Markdown so

we're using this. This is empty right now.

Now, what I mean about,

what I mean when I say "using".

This all comes together, this is all

explained

through the callback function.

The callback function has the callback

signature or the argument

and a returned value.

In this case

the function argument

comes from the component property of the

Input.

It's actually always the case.

Very important, if you understand these

two lines then you understand the

callback.

Function arguments, this,

come from the component property

of the Input.

So in this case,

this comes from the value

of myinput, which is

this right here, right?!

So this is the same as this -

user_input

is this.

And if user goes in there and the user

says I'm going to change the Input and

i'm going to put

"hi there", then now this

goes in here.

Now this

is "hi there"

and if this is "hi there"

then,

I return it

as the user_input, so I'm actually

returning

"hi there"

Now,

return objects or return values are

assigned to the component property of

the Output.

So this string, this "hi there"

is returned to the component property to

the children

of the Output, of the Output.

Right, and the Output is mytext, so this is

going to be returned right here.

"hi there".

But we want this to be interactive so we

can't pre-define the text.

We just use this as, we leave it as user_

input or you can call it anything you

want. You can call it user_inputs you can

give it any name that you want.

But remember,

your return values are assigned to the

component property of the Output,

so if you have multiple Outputs, you need

to return multiple

values. If you have multiple Inputs

you need to return multiple arguments,

each one representing the component

property of that Input.

Alright,

so now that we understood the callback,

let's see how we add a graph component

to our app.

Close this,

open your app-with-graph file that you

have on the github that I showed you.

And in this

file we're going to import the same

libraries,

but we're also going to import Plotly

Express. Plotly Express

is the library that allows you to build

graphs.

Every graph

plots some data so we also need to

incorporate data into our app, and we're

going to take this medals long

built-in data inside Plotly Express,

and we're going to call it df. This is

our, this is our data frame, this is our

data.

Okay remember, every Dash app is

components

that are displayed on the page through

the layout which interact with each

other

through

the callback.

So let's build our components first.

Here we start our app

but we're going to use a VAPOR theme, and

you can see other themes, just like this,

dot, and it'll give you different

themes.

We're going to use the vapor theme.

Let's actually start this app

and see what we get, and see how the

VAPOR theme looks like.

Here's a VAPOR theme.

And in this app we offer a dropdown

that, if the user changes it, will also

update the type of graph that it did

that is displayed on the page.

So let's see how we do that.

Here we build our components, we're going

to take uh a markdown

and we're going to

populate it

with this

with this title: a header h1 app that

analyzes olympic medals, right here.

And then we're going to use the dcc.dash

core component graph component with an

empty figure. There's nothing in there at

the beginning,

and we're going to uh

a DCC dropdown.

And DCC dropdown, if you click

control left-click, you can see all the

different properties that you can have

inside a dropdown.

We're going to use three different

properties. The "options" property to tell

the app

what options the dropdown will have.

In this case, scatter plot string or bar

plot string.

We're going to define the initial value,

this is the initial "value" that will be

displayed when the page first load,

loads. Bar plot if I first load it.

You'll see that it's going to be bar

plot.

"Clearable" means that I'm not going to

erase the dropdown, It's always going to

be populated with one value.

And then we build our layout, in this

case one

component

above the other, so first mytitle

then my empty graph and then my

downdown.

Here as well, if you hashtag this out

and re-run the app,

you'll see

that the graph is empty

because there is no callback that

creates an interaction between the dropdown

and the graph. We just have a

dropdown

with certain options,

and we have an empty graph, as you can

see here,

this empty empty figure inside the Dash

Core Component Graph.

So let's

connect between

the dropdown and the graph

so every time a user chooses a value

it creates a graph and populates it

into

the figure, right here.

All right, let's just Control-Z.

The callback is back

on the page

and here

we're going to take the dropdown as an

Input, specifically

the component property, the "value"

of the dropdown.

All right, because we have one Input,

meaning one component property, we need

one argument, and we'll call it

user_input.

Now this argument comes from

what is assigned to the value. So this,

in this case, this one is the bar plot.

This is the same as this.

Bar plot, like that,

And then, before we return a value,

we're going to

build the graph

inside the callback function body.

And we're saying,

if the user_input chose

bar plot,

that string, if it's equal to bar plot,

then create this Plotly Express bar plot

with our data, x-axis, y-axis, and color,

and we'll call it "fig".

But if the user chose

in the dropdown a scatter plot, because

this is the second option, this is the

second value that can be chosen.

If they chose that, then build a Plotly

Express scatter plot, so either you have

this figure or you have this figure.

And then you return this fig, remember,

return values, returned objects are

assigned to the component property of

the Output, so this fig

is going to be assigned to the

figure

of my graph component. So it's going to

be assigned right here,

like that.

Okay, and that is why if you go here,

let's rerun this,

with the callback, if you go there you'll

see that if the user chooses

scatter plot

it builds a scatter plot, called "fig" and

returns the fig

to the

DCC

Graph component

figure property, right here.

All right,

now for the most exciting part, we're

going to learn

how to build the app with the Choropleth

map.

Let's pause this.

Let's open Dash

2 point 2 dot py.

And let's actually run it and see what

we have.

Here I'm also going to teach you a

little bit about the layout.

All right, so we have a choropleth map where

we have an animation

play button

and we have a dropdown

that will change

the legend or the color, right. This is

percent of babies born to unmarried

mothers,

or you can change it to suicide

mortality

per 100 000.

And then you can play the animation

to see the difference over the years.

So,

let's see what is happening in this

Python file.

Actually before that we'll take a a

quick commercial break

and say that if uh you've enjoyed the

tutorial so far

and

if you feel that you learned a lot

then,

if you want to show your appreciation,

you can always go into my Patreon and show

your support or

Youtube membership. I'll be

grateful to you if you're interested.

Thank you.

Okay,

so in this case

we're also importing the pandas library,

and we're importing pandas because

because we're going to read

this

CSV sheet, that's on my GitHub,

into a pandas DataFrame, df.

So you need to install pandas if you

don't have pandas on your local computer.

So we're reading this file, which is

actually right here, you can see it, these

are the column names

and these are the rows.

We're going to read this file into a

pandas DataFrame

and then we're going to build our

components that are going to go inside

the layout and interact with each other

in the callback.

So let's see the components.

Here I'm using the LUX theme

I'm building an empty markdown, there's

not going to be anything in there,

an empty figure inside this DCC Graph

and a dropdown

that has initial "value"

of cesarean delivery rate

And the "options"

are the column values of the df,

starting from the third column, zero, one

two. Two is the third, all the way to the

end. So not this one,

not this one, but only from here. All

these columns are the options.

Let's

hashtag out the callback.

And now,

let's see the layout. In the layout we

have a container, now i'm going to

customize the layout a little bit more.

So instead of putting one,

just everything inside the container, I'm

going to define

the row

and then dbc col to define the column

or the column width. So I'm going to say

in this row,

right here in the first row,

we're going to put mytitle,

which is the Markdown empty Markdown,

there's nothing there,

inside as the top row

with six columns wide.

And i'm going to put it in the center of

the page. The second row is going to be

"mygraph"

12 columns wide, and the third row on the

bottom is going to be my dropdown, only

six columns wide. I don't want it to be

like this, you see how it's 12 columns, it's

the full width of the page. I want it to

be only half of the page.

And I'm centering it,

so this is my container, this is my

layout. And you can see because my

callback is

commented out,

there is no interactivity, there is a

an empty graph, there's dropdown

options that don't do anything,

and there is no lay... there's no title

because the title

is our Markdown. You see the first

Markdown, but it's an empty children.

We're going to populate this

according to

the dropdown type string chosen.

All right,

so let's see how we do that. Let's

comment the callback back in.

And now you see that we have here in the

callback decorator,

we have two Outputs

and one Input.

The first Output is

going to represent the component

property "figure"

of our DCC Graph,

right here.

The second Output is the "children" of the

Markdown,

and the Input is the component property

"value" of the dropdown, so whatever

value the user chooses.

Now, remember because we have two outputs

we need to return

two

values, or two variables. This variable

and this variable here.

If you have three outputs you have to

return three variables.

In this case we only have one Input

or component property "value".

So we only need one argument,

and this, we're going to call this the

column_name.

Remember this function argument comes

from the component property. So this

refers to this.

So the value of the dropdown,

the initial value is "cesarean delivery

rate".

So this is like

saying cesarean delivery rate,

cesarean delivery rate, and so on and so

on.

So we're going to take this

and we're saying, print out the column_name

and print the type. This is very

helpful

as you start working with Dash and

creating more

complex callbacks. It's important you

know what

the, what the value looks like that the

user is choosing, and it's important you

know the type

because it might be a list, it might be a

dictionary, it might be a string.

You need to know what type it is.

So here,

we're going to build the Plotly Express

Choropleth map,

and I just took this example from this,

from the Python documentation,

and I just changed the

parameters of the choropleth map. So we're

using the "df",

location is "STATE"

and then the height is going to be 600

pixels.

And

the animation_frame is "YEAR" so you can,

let's rerun this.

The animation_frame is "YEAR"

so that's why if you play this you'll

see different years pass by.

And the color is the column_name

so if the user chooses

"cesarean delivery rate",

then, the color or the legend is going to

be cesarean

cesarean uh delivery rate. If it's going to

be "drug overdose

mortality" then this is going to be the

color that defines or categorizes the

choropleth map.

And then we just return the figure as

the first object. The first object is the

first component property output, so it's

this.

So I'm returning the "fig"

right here.

"fig".

Like that.

And then the second output property is

"children".

And let's see what I'm returning there.

In this case it's um

it's a concoctinated string, so this is

a hashtag to make this

um an H1 header because it's Markdown. So

now it's bigger, it's like a title,

and this goes into the "children" of the

Markdown.

So if I go to my app, you'll see if I,

"teen birth for 1000", you'll see it's the

title, right here.

And it's an H1 header because it's a lot

bigger.

And this is on top of the page because

remember in the layout

this is the first row "mytitle".

Okay,

so I hope you learned a lot.

I don't want you to stop there. I want, I

built some um,

exercises for you to help speed up your

learning process in Dash and create

these powerful Dash apps.

To see these exercises you can go into

my github,

let me first shut this down,

and in my github go to the

"good to know",

Dash2, and then go to "Exercises". You'll

see here a bunch of assignments and

solutions for every assignment.

Try them out before you look at the

solution. It's really going to help you

learn Dash.

I also created a "learning-resources" for

you, this Markdown file.

And here

there's a few things that I believe

would really help you

learn Dash a lot faster,

instead of reading for hours and hours.

First of all, I have this new book that I

wrote with my friends over the last year.

They're Dash experts.

And

uh it's now in pre-order stage, so

I hope this can help you. Go check it out.

Then we have important app components.

You have the Dash Core Components, and if

you go here and click on, it you'll see

all the Core Components, markdown, text

area, check boxes.

You also have Bootstrap Components

that include the Layout, Form, Fade,

Collapse, really good components,

especially the Card, really nice.

And Mantine Components. This is a

beautiful library that has a bunch of

components here

that can beautify your app and allow you

to create more powerful apps. And all of

this is built on top of Dash, so

completely compatible with Dash.

And then you have the Bootstrap

Components for Layouts, the dbc.Col, the

dbc.

row

to style your layout.

Then you have the Plotly Graphing

Library and Express API.

This is a graphing library where you can

build all the different apps,

graphs.

Plotly Express High Level, so we did

the choropleth. If we go look at the

choropleth right here,

we'll see all

the different types of

attributes

that we can use, so it's good to read.

The Dash Boostrap Sheet,

very powerful.

Let's reload this. This will allow you to

style your app in many different ways

with just a few lines of code. Um if you

want to see the video or introduction to

bootstrap, just click on the video above.

And then you have the Plotly

Community. If you go here, join the Plotly

Community,

this is really going to help you learn

Dash and solve questions that you might

have about Dash or Plotly. So just open

an account, join us,

and contribute to this thriving

community.

Lastly,

if you are done with your app, you're

proud of it, you like it, and you want to

deploy it to the web so you can share it

with your colleagues, friends,

parents, professors, bosses, you can deploy

it using

Dash-tools. This is a new library that

makes it very easy and very quick to

deploy your app to the web. I'll try to

make a youtube tutorial

um in a couple of weeks on this library

as well.

Thank you for joining me,

thank you for hanging in there.

Again, if you like this tutorial, don't

forget to subscribe below. If you want to

show your appreciation on Patreon or

youtube membership or that youtube

Thanks button,

I will be very grateful.

Thanks for watching

and

have a good day.