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, kursun bir parçasıdır

Dash ve Plotly ile Paneller Oluşturma

Kursa Göz Atın

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ı etkileşimli egzersiz

Bu egzersizi bu örnek kodu tamamlayarak deneyin.

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