शुरू करेंमुफ़्त में शुरू करें

लोगो और नोट्स जोड़ना

एक तस्वीर (या ग्राफ!) बहुत कुछ कहती है, लेकिन कई बार डैशबोर्ड में अतिरिक्त व्याख्यात्मक नोट्स की जरूरत होती है. अच्छी बात यह है कि आप टेक्स्ट, इमेज, और अपने Dash ऐप्स में आगे की स्ट्रक्चरिंग जोड़ने और फॉर्मेट करने की स्किल पर काम कर रहे हैं.

चलिए एक ऐसा डैशबोर्ड बनाते हैं जिसमें कंपनी का लोगो, एक सिंगल ग्राफ, और कुछ संक्षिप्त व्याख्यात्मक नोट्स शामिल हों.

यह अभ्यास पाठ्यक्रम का हिस्सा है

Dash और Plotly के साथ डैशबोर्ड बनाना

पाठ्यक्रम देखें

अभ्यास निर्देश

  • लाइन 13 के नीचे logo_link URL का उपयोग करके कंपनी का लोगो जोड़ें.
  • लाइन 20 पर दिए गए टेक्स्ट के बाद, बोल्ड में top_country वैरिएबल जोड़ें.
  • लाइन 24 के नीचे, कंपनी का कॉपीराइट नोटिस ' Copyright E-Com INC' इटैलिक्स में जोड़ें.

इंटरैक्टिव व्यावहारिक अभ्यास

इस अभ्यास को इस नमूना कोड को पूरा करके आज़माएँ।

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)
कोड संपादित करें और चलाएँ