मुख्य सामग्री पर जाएँ

शुरुआती के लिए Dash

Python में Dash का उपयोग करके डैशबोर्ड बनाना सीखें।
· 12 मि॰ पढ़ें

AI के साथ खोजें

Datacamp के Python कोर्स लाइब्रेरी को एक्सप्लोर करें

Dash वेब एप्लिकेशन बनाने के लिए Python का एक फ्रेमवर्क है। यह Flask, Plotly.js, React और React Js के ऊपर बना है। यह आपको शुद्ध Python से डैशबोर्ड बनाने में सक्षम बनाता है। Dash ओपन सोर्स है, और इसकी ऐप्स वेब ब्राउज़र में चलती हैं। इस ट्यूटोरियल में, हम पाठक को Dash की बुनियादी बातों से परिचित कराते हैं और मानते हैं कि उन्हें Plotly का पूर्व अनुभव है।

Dash इंस्टॉलेशन

Dash का उपयोग शुरू करने के लिए, हमें कई पैकेज इंस्टॉल करने होंगे।

  1. कोर डैश बैकएंड
  2. Dash फ्रंट-एंड
  3. Dash HTML कॉम्पोनेंट्स
  4. Dash कोर कॉम्पोनेंट्स
  5. Plotly
pip install dash==0.21.1  
pip install dash-renderer==0.13.0  
pip install dash-html-components==0.11.0
pip install dash-core-components==0.23.0  
pip install plotly --upgrade

Dash ऐप लेआउट

आम तौर पर एक Dash एप्लिकेशन दो भागों से बना होता है। पहला भाग लेआउट है और बताता है कि ऐप कैसा दिखेगा, और दूसरा भाग एप्लिकेशन की इंटरएक्टिविटी का वर्णन करता है। Dash HTML क्लासेस प्रदान करता है जो हमें Python के साथ HTML कंटेंट जेनरेट करने में सक्षम बनाती हैं। इन क्लासेस का उपयोग करने के लिए, हमें dash_core_components और dash_html_components इम्पोर्ट करने की आवश्यकता है। आप Javascript और React Js का उपयोग करके अपने कस्टम कॉम्पोनेंट्स भी बना सकते हैं।

शुरू करने के लिए हम अपने पसंदीदा टेक्स्ट एडिटर से app.py नाम की एक फ़ाइल बनाएंगे और फिर ये पैकेज इम्पोर्ट करेंगे।

import dash
import dash_core_components as dcc
import dash_html_components as html

Flask की तरह ही, हम dash के Dash क्लास को कॉल करके Dash को इनिशियलाइज़ करते हैं। इसके बाद हम अपने एप्लिकेशन का लेआउट बना सकते हैं। हम dash_html_components से Div क्लास का उपयोग करके एक HTML Div बनाते हैं। फिर हम HTML कॉम्पोनेंट्स का उपयोग करके H1, H2 आदि जैसे HTML कॉम्पोनेंट्स जेनरेट करते हैं। dash_html_components में सभी HTML टैग्स मौजूद हैं। अपने लेआउट पर ग्राफ बनाने के लिए, हम dash_core_components से Graph क्लास का उपयोग करते हैं। Graph, plotly.js का उपयोग करके इंटरएक्टिव डेटा विज़ुअलाइज़ेशन रेंडर करता है। Graph क्लास एक figure ऑब्जेक्ट की अपेक्षा करता है जिसमें प्लॉट होने वाला data और layout विवरण होता है। Dash आपको स्टाइलिंग करने की भी अनुमति देता है, जैसे बैकग्राउंड रंग और टेक्स्ट रंग बदलना। आप style एट्रिब्यूट का उपयोग करके और अपनी पसंद का रंग रखने वाले ऑब्जेक्ट को पास करके बैकग्राउंड बदल सकते हैं। हमारे मामले में, हमने बैकग्राउंड और टेक्स्ट रंग वाला एक color डिक्शनरी परिभाषित की है। इसी तरह, हम plot_bgcolor एट्रिब्यूट का उपयोग करके लेआउट बैकग्राउंड बदल सकते हैं।

HTML में style प्रॉपर्टी सेमीकोलन के साथ निर्दिष्ट होती है, लेकिन Dash में एक डिक्शनरी दी जाती है। डिक्शनरी में keys camelCase में होती हैं, जैसे text-align की जगह textAlign। HTML की तरह क्लासेस की बजाय, Dash में className का उपयोग होता है।

 app = dash.Dash()
colors = {
    'background': '#111111',
    'text': '#7FDBFF'
}
app.layout = html.Div(style={'backgroundColor': colors['background']}, children=[
    html.H1(
        children='Hello Dash',
        style={
            'textAlign': 'center',
            'color': colors['text']
        }
    ),
    html.Div(children='Dash: A web application framework for Python.', style={
        'textAlign': 'center',
        'color': colors['text']
    }),
    dcc.Graph(
        id='Graph1',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
            ],
            'layout': {
                'plot_bgcolor': colors['background'],
                'paper_bgcolor': colors['background'],
                'font': {
                    'color': colors['text']
                }
            }
        }
    )
])

अपनी विज़ुअलाइज़ेशन देखने के लिए, हमें Flask की तरह ही अपना वेब सर्वर चलाना होगा। याद रखें Dash, Flask के ऊपर बना है। हम debug को true पर सेट करते हैं ताकि हर बदलाव पर सर्वर को बार-बार रिफ्रेश न करना पड़े।

 if __name__ == '__main__':
    app.run_server(debug=True)

अब टर्मिनल पर जाएँ और नीचे दिया गया कोड टाइप करके सर्वर शुरू करें: python app.py

यह http://127.0.0.1:8050/ पर एक नया वेब सर्वर शुरू करेगा। वहां जाएँ और अपना नया बनाया हुआ डैशबोर्ड देखें।

बार चार्ट

स्कैटर प्लॉट बनाना

स्कैटर प्लॉट प्लॉट करने के लिए, हम पहले की तरह सामान्य dash कॉम्पोनेंट्स इम्पोर्ट करते हैं। हमें स्कैटर प्लॉट प्लॉट करने के लिए Plotly के graph_objs को भी इम्पोर्ट करना होगा। जैसा कि पहले बताया गया, हम इसे पूरा करने के लिए Dash से Div क्लास और Graph कॉम्पोनेंट्स का उपयोग करते हैं। Graph कॉम्पोनेंट एक figure ऑब्जेक्ट लेता है जिसमें डेटा और लेआउट का विवरण होता है। हम graph_objs की scatter प्रॉपर्टी का उपयोग करके स्कैटर प्लॉट बनाते हैं। यह सुनिश्चित करने के लिए कि प्लॉट स्कैटर प्लॉट ही हो, हम mode एट्रिब्यूट पास करते हैं और उसे markers सेट करते हैं। अन्यथा, ग्राफ पर लाइन्स दिखाई देंगी।

 import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go

app = dash.Dash()

df = pd.read_csv(
    'https://gist.githubusercontent.com/chriddyp/' +
    '5d1ea79569ed194d432e56108a04d188/raw/' +
    'a9f9e8076b837d541398e999dcbac2b2826a81f8/'+
    'gdp-life-exp-2007.csv')


app.layout = html.Div([
    dcc.Graph(
        id='life-exp-vs-gdp',
        figure={
            'data': [
                go.Scatter(
                    x=df[df['continent'] == i]['gdp per capita'],
                    y=df[df['continent'] == i]['life expectancy'],
                    text=df[df['continent'] == i]['country'],
                    mode='markers',
                    opacity=0.8,
                    marker={
                        'size': 15,
                        'line': {'width': 0.5, 'color': 'white'}
                    },
                    name=i
                ) for i in df.continent.unique()
            ],
            'layout': go.Layout(
                xaxis={'type': 'log', 'title': 'GDP Per Capita'},
                yaxis={'title': 'Life Expectancy'},
                margin={'l': 40, 'b': 40, 't': 10, 'r': 10},
                legend={'x': 0, 'y': 1},
                hovermode='closest'
            )
        }
    )
])

if __name__ == '__main__':
    app.run_server()

महाद्वीप बनाम प्रति व्यक्ति GDP स्कैटर प्लॉट

Markdown

कभी-कभी आपको अपने डैशबोर्ड्स में बहुत सारा टेक्स्ट शामिल करने की आवश्यकता हो सकती है। आप इसे dash_core_components के Mardown एट्रिब्यूट का उपयोग करके नीचे दिखाए अनुसार कर सकते हैं।

 import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

markdown_text = '''
### Dash and Markdown
A lot of text
'''

app.layout = html.Div([
    dcc.Markdown(children=markdown_text)
])

if __name__ == '__main__':
    app.run_server()

कोर कॉम्पोनेंट्स

अब आइए कुछ dash_core_components पर नज़र डालें जिनका सामना आप Dash का उपयोग करते समय करेंगे। आप नीचे दिखाए अनुसार एक ड्रॉपडाउन बना सकते हैं। यह आप dash_core_components से Dropdown कॉल करके और विकल्पों को डिक्शनरी की सूची के रूप में पास करके करते हैं। आप values एट्रिब्यूट का उपयोग करके और डिफ़ॉल्ट विकल्प पास करके डिफ़ॉल्ट मान सेट कर सकते हैं।

  dcc.Dropdown(
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': u'Montréal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value='MTL'
    )

मल्टी-सेलेक्ट ड्रॉपडाउन बनाना ऊपर जैसा ही है। एकमात्र बदलाव यह है कि आप multi एट्रिब्यूट को true पर सेट करते हैं क्योंकि डिफ़ॉल्ट रूप से यह False होता है। फिर आप values एट्रिब्यूट निर्दिष्ट करके वे आइटम सेट कर सकते हैं जिन्हें आप डिफ़ॉल्ट रूप से मल्टी-सेलेक्ट करना चाहते हैं।

    html.Label('Multi-Select Dropdown'),
    dcc.Dropdown(
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': u'Montréal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value=['MTL', 'SF'],
        multi=True
    )

रेडियो बटन RadioItems एट्रिब्यूट का उपयोग करके बनाए जा सकते हैं। फिर आप विकल्पों को डिक्शनरी की सूची के रूप में पास करते हैं। आप values एट्रिब्यूट निर्दिष्ट करके डिफ़ॉल्ट मान भी सेट कर सकते हैं।

 html.Label('Radio Items'),
    dcc.RadioItems(
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': u'Montréal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value='MTL'
    )

चेकबॉक्स जनरेट करने के लिए, आप dash_core_components से Checklist एट्रिब्यूट कॉल करते हैं। विकल्प और डिफ़ॉल्ट मान ऊपर की तरह पास किए जाते हैं।

  html.Label('Checkboxes'),
    dcc.Checklist(
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': u'Montréal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        values=['MTL', 'SF']
    )

आपको अपनी एप्लिकेशन में इनपुट टेक्स्ट की निश्चित रूप से आवश्यकता होगी। इन्हें जनरेट करने के लिए आप Input एट्रिब्यूट का उपयोग करेंगे। Html Label टैग का उपयोग करके, आप इनपुट फ़ील्ड के लिए लेबल बना सकते हैं। values एट्रिब्यूट का उपयोग करके आप फ़ील्ड में कुछ टेक्स्ट निर्दिष्ट कर सकते हैं और प्रकार निर्दिष्ट करने के लिए type का उपयोग करें और दर्शाएँ कि यह टेक्स्ट फ़ील्ड है, संख्या आदि।

 html.Label('Text Box'),
    dcc.Input(value='MTL', type='text')

मल्टी-सेलेक्ट ड्रॉपडाउन

मदद कैसे लें

क्योंकि Dash कॉम्पोनेंट्स डिक्लेरेटिव हैं, किसी भी कॉम्पोनेंट पर help कमांड कॉल करने से उस कॉम्पोनेंट की मदद जेनरेट हो जाएगी।

help(dcc.Input)

इंटरएक्टिविटी

अब आइए देखें कि हम अपनी Dash ऐप्स को इंटरएक्टिव कैसे बना सकते हैं। ऐसा करने के लिए, हमें dash.dependencies से Input और Output इम्पोर्ट करने की आवश्यकता है। इन्हें HTML Input से भ्रमित न करें क्योंकि ये अलग हैं। HTML Input, dash core components से इम्पोर्ट होता है। नीचे हम एक इनपुट टेक्स्ट बनाते हैं और उसे एक कॉलबैक से बाँधते हैं ताकि जब भी आप उस बॉक्स में कुछ टाइप करें, वह वास्तविक समय में my-div को अपडेट करे। इसे सक्षम करने के लिए Dash एक डेकोरेटर @app प्रदान करता है जो my-div और HTML इनपुट फ़ील्ड से एक कॉलबैक फ़ंक्शन को बाँधना संभव बनाता है। ध्यान दें कि हम update_output_div फ़ंक्शन को घोषित करने से पहले डेकोरेटर का उपयोग करते हैं।

 import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash()

app.layout = html.Div([
    dcc.Input(id='my-id', value='Dash App', type='text'),
    html.Div(id='my-div')
])


@app.callback(
    Output(component_id='my-div', component_property='children'),
    [Input(component_id='my-id', component_property='value')]
)
def update_output_div(input_value):
    return 'You\'ve entered "{}"'.format(input_value)


if __name__ == '__main__':
    app.run_server()

Authentication

Dash, dash-auth नामक एक अलग पैकेज के माध्यम से प्रमाणीकरण प्रदान करता है। यह दो प्रकार के प्रमाणीकरण प्रदान करता है: HTTP Basic Auth और Plotly OAuth। बेसिक ऑथ में, आप अपने एप्लिकेशन में उपयोगकर्ता नाम और पासवर्ड के एक सेट को हार्डकोड करते हैं। इस विधि में कुछ चुनौतियाँ हैं, जैसे उपयोगकर्ता आपकी एप्लिकेशन से लॉग आउट नहीं कर सकते, उपयोगकर्ता खाते नहीं बना सकते या पासवर्ड नहीं बदल सकते, और कोड में उपयोगकर्ता नामों और पासवर्डों को सुरक्षित रूप से स्टोर करने की ज़िम्मेदारी आपकी होती है। Plotly OAuth आपके ऑनलाइन Plotly खाते के माध्यम से प्रमाणीकरण प्रदान करता है, और यह निःशुल्क नहीं है।

बेसिक ऑथ सेट करने के लिए निम्नलिखित चरणों का पालन करें। पहले, आवश्यक पैकेज इंस्टॉल करें।

 pip install dash==0.21.1
pip install dash-auth==1.0.0

इसके बाद, वे यूज़रनेम और पासवर्ड पेयर्स सेट करें जिन्हें आप अपनी एप्लिकेशन में रखना चाहेंगे।

 VALID_USERNAME_PASSWORD_PAIRS = [
    ['hello', 'world']
]

पासवर्ड पेयर्स सेट हो जाने के बाद, Dash का dash_auth.BasicAuth यूटिलिटी आपके लिए प्रमाणीकरण संभाल लेगा। आपको बस पासवर्ड पेयर्स और अपनी एप्लिकेशन का नाम dash_auth.BasicAuth को पास करना है।

 app = dash.Dash('auth')
auth = dash_auth.BasicAuth(
    app,
    VALID_USERNAME_PASSWORD_PAIRS
)

Dash एप्लिकेशन साइन इन

Heroku पर डैशबोर्ड होस्ट करना

Heroku पर अपना डैशबोर्ड होस्ट करना काफ़ी आसान है, लेकिन इसमें कुछ चरण लगेंगे।

सबसे पहले, एक डायरेक्टरी बनाएँ जो आपकी सभी प्रोजेक्ट फ़ाइलों को रखेगी। आप Ubuntu पर mkdir कमांड का उपयोग करके यह कर सकते हैं।

$ mkdir my_dash_app
$ cd my_dash_app

इसके बाद, फ़ोल्डर को git और virtualenv के साथ इनिशियलाइज़ करें। Git वर्शन कंट्रोल के लिए है, और virtualenv हमें सभी Python डिपेंडेंसीज़ रखने के लिए एक वर्चुअल वातावरण बनाने में सक्षम करेगा। वातावरण बनाने के बाद, हम source कमांड का उपयोग करके इसे सक्रिय करते हैं।

$ git init
$ virtualenv venv
$ source venv/bin/activate

अगले चरण में, हम अपनी Dash एप्लिकेशन के लिए आवश्यक सभी पैकेज इंस्टॉल करते हैं:

$ pip install dash
$ pip install dash-renderer
$ pip install dash-core-components
$ pip install dash-html-components
$ pip install plotly

अपनी Dash एप्लिकेशन को सर्व करने के लिए हमें एक Python वेब सर्वर की आवश्यकता है। हम प्रोडक्शन में कभी भी Flask का डेवलपमेंट सर्वर उपयोग नहीं करते। इसके लिए हम Gunicorn वेब सर्वर का उपयोग करते हैं। इसे नीचे दिखाए अनुसार इंस्टॉल करें:

$ pip install gunicorn

इसके बाद, हमें अपने फ़ोल्डर में कुछ फ़ाइलें बनानी होंगी:

  1. app.py जहाँ हम अपनी Dash एप्लिकेशन का कोड लिखेंगे।
  2. .gitignore ताकि अनावश्यक फ़ाइलें प्रोडक्शन में पुश न हों
  3. requirements.txt फ़ाइल जिसमें सभी Python डिपेंडेंसीज़ और उनके वर्शन होंगे।
  4. डिप्लॉयमेंट के लिए Procfile।

app.py में निम्नलिखित जोड़ें। यह सिर्फ एक उदाहरण है, आप अपनी स्वयं की Dash डैशबोर्ड का उपयोग कर सकते हैं।

import os
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
server = app.server
app.layout = html.Div([
    html.H2('Hello World'),
    dcc.Dropdown(
        id='dropdown',
        options=[{'label': i, 'value': i} for i in ['LA', 'NYC', 'MTL']],
        value='LA'
    ),
    html.Div(id='display-value')
])
@app.callback(dash.dependencies.Output('display-value', 'children'),
              [dash.dependencies.Input('dropdown', 'value')])
def display_value(value):
    return 'You have selected "{}"'.format(value)
if __name__ == '__main__':
    app.run_server(debug=True)

यह याद रखना महत्वपूर्ण है कि अपने मूल में Dash एप्लिकेशन भी एक Flask एप्लिकेशन है। डिप्लॉयमेंट के उद्देश्य से, हमें Flask एप्लिकेशन इंस्टेंस तक पहुँचना होगा। Dash हमें यह करने में सक्षम बनाता है 

app.server
app = dash.Dash(__name__)
server = app.server

.gitignore फ़ाइल में वे फ़ाइलें जोड़ें जिन्हें आप प्रोडक्शन में पुश नहीं करना चाहेंगे। एक अच्छा Python .gitignore फ़ाइल Github पर उपलब्ध है।

अब Procfile में अपनी डिप्लॉयमेंट जानकारी निर्दिष्ट करें। हम web वेरिएबल का उपयोग करके अपने सर्वर को gunicorn के रूप में निर्दिष्ट करते हैं। हम app वेरिएबल का उपयोग करके अपनी ऐप डिटेल्स भी निर्दिष्ट करते हैं। app, फ़ाइलनाम app.py को संदर्भित करता है और server, उस फ़ाइल के अंदर server वेरिएबल को।

web: gunicorn app:server

हमें अपनी Python डिपेंडेंसीज़ को requirements फ़ाइल में भी लिखना होगा। Heroku उन्हें डिप्लॉयमेंट के दौरान इंस्टॉल करेगा।

pip freeze > requirements.txt

अगले चरण मानते हैं कि आपका Heroku अकाउंट है और आपने Heroku CLI इंस्टॉल किया हुआ है। यदि यह सेटअप नहीं है तो https://www.heroku.com पर जाएँ और इन्हें सेट करें।

अगला चरण टर्मिनल पर एक Heroku ऐप बनाना और हमारी एप्लिकेशन पैकेजेज़ जोड़ना है। एक बार जब आपने बदलाव कमिट कर दिए; अपनी एप्लिकेशन को heroku master पर पुश करें। इस कमांड का आउटपुट Heroku पर आपकी लाइव Dash एप्लिकेशन के लिए एक लिंक देगा।

$ heroku create your-app-name
$ git add .
$ git commit -m 'Your-commit-message'
$ git push heroku master

यह, Plotly के Dash का उपयोग करके शुद्ध Python में डैशबोर्ड बनाने का एक परिचय है। Dash के बारे में और जानने के लिए आधिकारिक डॉक्स देखें।

यदि आप Python के बारे में और सीखने में रुचि रखते हैं, तो हमारा Python Tutorial for Beginners और Intermediate Python for Data Science कोर्स देखें।

विषय

Pythonडेटा साइंस