लोगो और नोट्स जोड़ना
एक तस्वीर (या ग्राफ!) बहुत कुछ कहती है, लेकिन कई बार डैशबोर्ड में अतिरिक्त व्याख्यात्मक नोट्स की जरूरत होती है. अच्छी बात यह है कि आप टेक्स्ट, इमेज, और अपने Dash ऐप्स में आगे की स्ट्रक्चरिंग जोड़ने और फॉर्मेट करने की स्किल पर काम कर रहे हैं.
चलिए एक ऐसा डैशबोर्ड बनाते हैं जिसमें कंपनी का लोगो, एक सिंगल ग्राफ, और कुछ संक्षिप्त व्याख्यात्मक नोट्स शामिल हों.
यह अभ्यास पाठ्यक्रम का हिस्सा है
Dash और Plotly के साथ डैशबोर्ड बनाना
अभ्यास निर्देश
- लाइन
13के नीचेlogo_linkURL का उपयोग करके कंपनी का लोगो जोड़ें. - लाइन
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)