Dash bileşenlerini konumlandırma

Dash ve Plotly ile Paneller Oluşturma

Alex Scriven

Data Scientist

HTML ve web

HTML: web sitelerini yapılandırma dili

HTML: bir evin iskeleti
- Nesnelerin konumunu belirler
CSS: odanın boya rengi
- Nesnelerin stili (ör. arka plan rengi)

resmi html logosu. üzerinde mavi yazıyla HTML yazıyor

resmi css logosu. kabartmalı mavi yazıyla css yazıyor

Div ve H etiketleri

Dash, HTML ile Python arasında arayüz için dash.html kullanır

İki önemli HTML yapısı ("etiket"):

Div etiketleri: web sitelerini yapılandırmada önemli
- İçinde farklı şeyler olan, farklı boyutlarda birçok div olabilir
H etiketleri: farklı boyutlarda başlıklar (H1 > H6)

Div ve H etiketlerini kullanma

Genel div (her şey bunun içinde)
İçte div: kırmızı arka plan
Mavi arka planlı div
- İçinde H etiketleri
style kısmını görmezden gelin - 'CSS' konusuna sonra geleceğiz!

<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>

Örneğimizin görünümü

Noktalı kenarlıklı mavi bir kutu görseli. İçinde, sol üst köşeyi kısmen kaplayan dolu kırmızı bir kutu var. Bunun altında, içinde 'This box' ve 'another title' yazan dolu mavi bir kutu bulunuyor

Dikkat:

Kırmızı arka planlı div
H etiketli mavi arka planlı div

Örneğimiz Dash'te

HTML örneğini Dash ile yeniden oluşturma

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'})
    ]

Yerleşimi parçalayalım

HTML etiketleri Dash html.() ile eşleşir
- html.Div() = <div>
- html.H1() = <h1>
Son div, children argümanına sahip
- İçine konacak nesnelerin listesi
dcc.Graph() bileşenlerini de ekleyebiliriz!

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})
]

Yerleşimde grafikler

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)
]

Toplam satışların x ekseninde, ülkelerin y ekseninde olduğu yatay bir çubuk grafiğin Chrome tarayıcıda gösterildiği bir gif. Ülkeler farklı renkte. Fare grafik üzerinde geziniyor ve sonra sunucu adresinin olduğu URL çubuğuna gidiyor

Daha fazla yapı ekleme

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)
]

Önceki alıştırmadakiyle aynı uygulamanın bir gifi; ancak çubuk grafik sayfada aşağı itilmiş ve üstte küçük, açık mavi bir kutu var

Haydi pratik yapalım!

Dash ve Plotly ile Paneller Oluşturma