BaşlayınÜcretsiz Başlayın

Logo ve notlar ekleme

Bir resim (ya da grafik!) bin kelimeye bedeldir ama bazen bir gösterge paneli daha açıklayıcı notlara ihtiyaç duyar. Neyse ki, Dash uygulamalarına metin, görseller ve ek yapı ekleme ile biçimlendirme becerilerini geliştiriyorsun.

Haydi, şirket logosunu, tek bir grafiği ve kısa açıklayıcı notları içeren bir gösterge paneli oluşturalım.

Bu egzersiz

Dash ve Plotly ile Paneller Oluşturma

kursunun bir parçasıdır
Kursu Görüntüle

Egzersiz talimatları

  • 13 numaralı satırın altına, aşağıdaki logo_link URL'sini kullanarak şirket logosunu ekle.
  • 20 numaralı satırdaki verilen metinden sonra, top_country değişkenini kalın olarak ekle.
  • 24 numaralı satırın altına, şirket telif hakkı bildirimini italik olarak ekle: ' Copyright E-Com INC'.

Uygulamalı interaktif egzersiz

Bu örnek kodu tamamlayarak bu egzersizi bitirin.

from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/2bac9433b0e904735feefa26ca913fba187c0d55/e_com_logo.png'
ecom_bar = ecom_sales.groupby('Country')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)').sort_values(by='Total Sales ($)', ascending=False)
top_country = ecom_bar.loc[0]['Country']            
bar_fig_country = px.bar(ecom_bar, 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 = [
  # Add the company logo
  html.____(src=____),
  html.H1('Sales by Country'),
  dcc.Graph(
    figure=bar_fig_country,
    style={'width':'750px', 'margin':'auto'}),
  html.Span(children=[
    # Add the top country text
    'This year, the most sales came from: ', 
    html.____(____),
    html.Br(),
    # Italicize copyright notice
    html.____(' Copyright E-Com INC')])
    ]

if __name__ == '__main__':
    app.run(debug=True)
Kodu Düzenle ve Çalıştır