Dash'te HTML

Dash ve Plotly ile Paneller Oluşturma

Alex Scriven

Data Scientist

HTML'e Dönüş

 

  • HTML = Web içeriğini yapılandırma dili
    • Div, H1>H6 gibi 'etiketler' kullanır
  • Dash, dash.html bileşenlerini kullanır
    • H1 etiketi .H1()
    • Div etiketi .Div()
<div>
  <div style=
       "background-color: red; 
        width:250; height:250;">
  </div>
  <div style=
       "background-color: lightblue; 
        width:250; height:250;">
    <h1>This box</h1>
  </div>
</div>
Dash ve Plotly ile Paneller Oluşturma

Yapı etiketleri

 

  • Mevcut HTML etiketleri listesi - dokümantasyon
  • Önemli yapılandırma etiketleri:
    • .Br() = Satır sonu
    • .Img() = Görsel ekler
Dash ve Plotly ile Paneller Oluşturma

HTML Dash'te listeler

 

  • .Ul() \ .Ol() ve .Li() = Listeler oluşturur
    • .Ul() sırasız liste (madde işaretleri, bunun gibi!)
    • .Ol() sıralı liste (numaralı maddeler)
    • .Li() her liste öğesi için
Dash ve Plotly ile Paneller Oluşturma

Şirket logosu ekleme

 

app.layout = [

  html.Img(src='www.website.com/logo.png'),
  html.H1("Our Sales Dashboard")

]

 

URL çubuğunda sunucu adresi görünen bir Chrome tarayıcısının sol üst kısmının ekran görüntüsü. Tarayıcıda bir şirket logosu var: E-com global yazılı pembe bir elmas. Altında 'Our Sales Dashboard' başlığı yer alıyor

Dash ve Plotly ile Paneller Oluşturma

Metin etiketleri

 

Metin içeriğini ayarlayın ve biçimlendirin

  • .P() veya .Span() = Düz metin ekler
    • children bağımsız değişkenini kabul eder (metin listesi, .P() veya .Span())
  • .B() = Metni kalın yapar
  • .I() = Metni italik yapar
Dash ve Plotly ile Paneller Oluşturma

Dash'te HTML metin etiketleri

 

Bazı karmaşık biçimlendirmeler:

app.layout = [
   html.H1("Our Sales Dashboard"),

   html.Span(children=[

   f"Prepared: {datetime.now().date()}",

   " by ", html.B("Jessie Parker, "),

   html.I("Data Scientist")

   ])

]

 

URL çubuğunda sunucu adresi görünen bir Chrome penceresinin sol üst kısmının ekran görüntüsü. Büyük bir başlıkta 'our sales dashboard' yazıyor; altında "Prepared: 2021-06-27 by Jessie Parker, data scientist" ibaresi var. Jessie Parker kalın, data scientist italik yazılmış

Dash ve Plotly ile Paneller Oluşturma

Metni bölmek

$$

app.layout = [
   html.H1("Our Sales Dashboard"),
   html.Span(children=[
   f"Prepared: {datetime.now().date()}", 
   html.Br(),
   " by ", html.B("Jessie Parker, "),
   html.Br(),
   html.I("Data Scientist")])
    ]

 

Önceki slayttakiyle aynı panonun ekran görüntüsü. URL çubuğunda sunucu adresi görünen bir Chrome penceresinin sol üst kısmı. Büyük başlıkta 'our sales dashboard' yazıyor; altında "Prepared: 2021-06-27 by Jessie Parker, data scientist" ibaresi var. Jessie Parker kalın, data scientist italik. Ancak tarih ve isimden sonra artık satır sonları var.

Dash ve Plotly ile Paneller Oluşturma

Haydi pratik yapalım!

Dash ve Plotly ile Paneller Oluşturma

Preparing Video For Download...