Memposisikan komponen Dash

Membangun Dasbor dengan Dash dan Plotly

Alex Scriven

Data Scientist

HTML dan web

HTML: bahasa untuk menyusun situs web

HTML: rangka kayu sebuah rumah
- Menentukan penempatan objek
CSS: cat warna ruangan
- Gaya (mis. warna latar) objek

logo HTML resmi. Tertulis HTML dengan huruf biru

logo CSS resmi. Tertulis CSS timbul berwarna biru

Tag Div dan H

Dash menggunakan dash.html untuk menjembatani HTML dan Python

Dua struktur HTML penting ("tag"):

Tag div: penting untuk menyusun situs
- Dapat memiliki banyak div berukuran berbeda dengan isi berbeda
Tag H: judul berbagai ukuran (H1 > H6)

Menggunakan tag Div dan H

Div keseluruhan (semuanya di dalamnya)
Div dalam: latar merah
Div berlatar biru
- Berisi tag H
Abaikan bagian style - bahas 'CSS' nanti!

<div>
  <div style="background-color: red; 
              width:250; height:250;">
  </div>
  <div style="background-color: lightblue; 
              width:250; height:250;">
    <h1>This box</h1>
    <h2>Another Title</h2>
  </div>
</div>

Contoh kita ditampilkan

Gambar kotak biru dengan garis tepi putus-putus. Di dalamnya, di kiri atas, ada kotak merah terisi. Di bawahnya, ada kotak biru terisi dengan teks 'This box' dan 'another title'

Catat:

Div latar merah
Div latar biru dengan tag H

Contoh kita di Dash

Merekreasi contoh HTML dengan Dash

from dash import Dash, html
app = Dash()
app.layout = [
    html.Div(style={'height':250, 'width':250, 'background-color':'red'}),
    html.Div(children=[
        html.H1("This box"),
        html.H2("Another Title")], 
        style={'background-color':'lightblue'})
    ]

Memecah layout

Tag HTML selaras dengan html.() di Dash
- html.Div() = <div>
- html.H1() = <h1>
Div terakhir memiliki argumen children
- Daftar objek yang dimasukkan ke dalamnya
Kita juga bisa menaruh komponen dcc.Graph()!

from dash import Dash, html
app.layout = [
  html.Div(
    style={'background-color':'red', 
           'height':250, 'width':250}),
  html.Div(
  children=[
      html.H1("This box"),
      html.H2("Another Title")]
    ,style={'background-color':'lightblue', 
              'height':250, 'width':250})
]

Grafik dalam layout

bar_fig_country = px.bar(ecom_sales, 
 x='Total Sales ($)', y='Country',
 color='Country', color_discrete_map=
 {'United Kingdom':'lightblue', 
 'Germany':'orange', 'France':'darkblue', 
 'Australia':'green', 'Hong Kong':'red'})
app = Dash()

app.layout = [
  html.H1("Sales Proportion by Country"),
  dcc.Graph(id='bar_graph', 
            figure=bar_fig_country)
]

Gif diagram batang horizontal penjualan total pada sumbu x menurut negara pada sumbu y di peramban Chrome. Tiap negara berwarna berbeda. Kursor mengarah ke grafik lalu ke bilah URL yang menampilkan alamat server

Menambah struktur

app.layout = [
  html.Div(style={
    'width':150,'height':150, 
    'background-color':'lightblue'}),
  html.H1("Sales Proportion by Country"),
  dcc.Graph(id='bar_graph', 
            figure=bar_fig_country)
]

Gif aplikasi yang sama seperti latihan sebelumnya, tetapi diagram batang terdorong ke bawah halaman, dan sebuah kotak biru muda kecil berada di atasnya

Ayo berlatih!

Membangun Dasbor dengan Dash dan Plotly