Python Data Visualization Transcripts
Chapter: Dash
Lecture: HTML
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
I'm gonna dive in a little more deeply into the html and CSS options that are available to you. So I'm not actually even gonna load any data.
0:09
We're just gonna do a pure html example. So one of the things you can do is develop an external style sheet and pass
0:17
it to your application. I'm going to use one that is available publicly from one
0:22
of the creators or one of the developers plotly and then I'm going to create a fairly complex layout. Now let me put that in here and then we'll walk
0:32
through what we're gonna do. So let's walk through this layout. So once again we have our app we've established we're passing in our style sheet and
0:40
now we're going to create a bunch of different python data structures that match to the html structure that we want to show.
0:49
So we create a top level div. Then we add our H1 and H2. I'm going to add another div underneath that with a paragraph that I'm gonna call my
0:58
annual fuel cost plot. I'm going to add a class name and ID. I'm gonna put some different styling on top of that.
1:06
And then one of the other nice things that you could do is use markdown. So I'm using a DCC component Markdown to actually use markdown.
1:16
It can be a really quick shortcut for developing html without necessarily going to the level
1:22
of detail I have here and then finally I apply a style to all of this with a left margin, I change the width and I add a light gray background
1:31
color and then the final thing we need to do is make sure that we set up this file so they can actually run.
1:37
So now I have my full file here that does nothing more than serve up some html. So let me show you what that looks like.
1:47
So notice how the flask app is called dash. Html_gen, which is the file name. So here is our new file so you can see that.
1:56
I've got a very different styling. I have the heading the H1 in the H2. I have a color here. I have this gray background,
2:03
I have my markdown rendered nicely and you can tell that I'm still running dash because I have this here. So let's compare these side by side.
2:13
Now you can see my code. One of the things I wanted to mention is that the server behind the scenes knows
2:20
when changes have been made. So let's say I want to change this to just update that. And then once I save it,
2:31
dash will know that there's an update and it automatically reload.
2:36
So this makes it really easy when you're doing your development you can play around update
2:40
your file directly. You don't have to rerun that file every time it knows when there's been a change and we could maybe change,
2:50
let's say the font size, maybe make a bigger margin. Now once I save it, we have those changes.
3:00
So this is a really easy way to debug your applications and do your development while you can see what the results are in real time.
3:09
I also just want to call out how much flexibility you have with this structure the dash has. If you compare this to what we did in streamlit,
3:19
where there wasn't really that much detail, you could get to hear essentially anything you can do in html,
3:25
you can do in dash. So it's it's a fine line you don't want to spend too much time just constructing the html.
3:32
But there are certainly use cases where your users or you personally are gonna want that
3:37
fine grain control and this is how you can control that with dash.