Big Data and Analytics User Input এবং Interaction এর মাধ্যমে Data Visualization গাইড ও নোট

User Input এবং Interaction দ্বারা Data Visualization তৈরি করার মাধ্যমে আপনি ইন্টারেকটিভ এবং ডায়নামিক গ্রাফ তৈরি করতে পারেন, যা ব্যবহারকারীদের ডেটা বিশ্লেষণ করতে সহায়তা করে। Plotly এবং Dash ফ্রেমওয়ার্ক ব্যবহার করে আপনি বিভিন্ন ধরণের UI Components (যেমন ড্রপডাউন, স্লাইডার, ইনপুট বক্স) ব্যবহার করে ব্যবহারকারীর ইনপুট গ্রহণ করতে পারেন এবং সেই অনুযায়ী গ্রাফের আপডেট করতে পারেন।

এখানে, আমরা দেখবো কীভাবে User Input (যেমন ড্রপডাউন, স্লাইডার, টেক্সট ইনপুট) দিয়ে ইন্টারঅ্যাকটিভ Data Visualization তৈরি করা যায়।

Dash ব্যবহার করে User Input এবং Interaction

Dash ফ্রেমওয়ার্ক দিয়ে আপনি ইন্টারেকটিভ গ্রাফ তৈরি করতে পারেন, যেখানে ব্যবহারকারীরা বিভিন্ন UI উপাদানের মাধ্যমে ইনপুট দিতে পারেন এবং সেই ইনপুটের ভিত্তিতে গ্রাফের ডেটা আপডেট হয়। Dash মূলত Callbacks ব্যবহারের মাধ্যমে এই ইন্টারেকশনগুলো পরিচালনা করে।

Dash Layout এবং Components

1. Dropdown: ব্যবহারকারীকে একটি বা একাধিক বিকল্প নির্বাচন করার সুযোগ দেয়।
2. Slider: ব্যবহারকারীকে একটি রেঞ্জ নির্বাচন করতে দেয়।
3. Input: ব্যবহারকারীকে টেক্সট ইনপুট দেওয়ার সুযোগ দেয়।
4. Graph: Plotly এর গ্রাফ উপাদান ব্যবহার করে ডেটার ভিজুয়াল প্রদর্শন করা হয়।
5. Button: ব্যবহারকারীকে একটি কাজ সম্পাদন করার জন্য বোতাম প্রদান করা।

Dash দিয়ে Interactive Data Visualization উদাহরণ

এখানে আমরা একটি Dropdown এবং Slider ব্যবহার করে Plotly গ্রাফ ইন্টারেক্টিভভাবে আপডেট করব। ব্যবহারকারী একটি মহাদেশ এবং একটি বছরের নির্বাচন করবেন, এবং সেই অনুযায়ী গ্রাফ আপডেট হবে।

উদাহরণ: Dash দিয়ে User Interaction এর মাধ্যমে Data Visualization

import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd

# Dash অ্যাপ্লিকেশন তৈরি
app = dash.Dash(__name__)

# উদাহরণ ডেটাসেট
df = px.data.gapminder()

# Layout তৈরি করা
app.layout = html.Div([
    html.H1("Interactive Data Visualization with User Input"),
    
    # Dropdown কম্পোনেন্ট: মহাদেশ নির্বাচন
    dcc.Dropdown(
        id='continent-dropdown',
        options=[{'label': continent, 'value': continent} for continent in df['continent'].unique()],
        value='Asia',  # ডিফল্ট মহাদেশ
        style={'width': '50%'}
    ),
    
    # Slider কম্পোনেন্ট: বছর নির্বাচন
    dcc.Slider(
        id='year-slider',
        min=df['year'].min(),
        max=df['year'].max(),
        value=df['year'].max(),
        marks={year: str(year) for year in range(df['year'].min(), df['year'].max() + 1, 5)},
        step=1
    ),
    
    # গ্রাফ প্লট করার জন্য Div
    dcc.Graph(id='life-exp-vs-gdp'),
])

# Callback ফাংশন: ইউজারের ইনপুট অনুযায়ী গ্রাফ আপডেট করা
@app.callback(
    Output('life-exp-vs-gdp', 'figure'),
    [Input('continent-dropdown', 'value'),
     Input('year-slider', 'value')]
)
def update_graph(selected_continent, selected_year):
    # ডেটা ফিল্টার করা
    filtered_df = df[(df['continent'] == selected_continent) & (df['year'] == selected_year)]
    
    # গ্রাফ তৈরি করা
    fig = px.scatter(filtered_df, x="gdpPercap", y="lifeExp", color="country", size="pop", 
                     log_x=True, title=f"Life Expectancy vs GDP per Capita ({selected_continent}, {selected_year})")
    
    return fig

# অ্যাপ চালানো
if __name__ == '__main__':
    app.run_server(debug=True)

ব্যাখ্যা:

1. Layout:
   • html.H1: একটি হেডিং (Title) তৈরি করা হয়েছে।
   • dcc.Dropdown: ড্রপডাউন দিয়ে ইউজারকে মহাদেশ নির্বাচন করার সুযোগ দেওয়া হয়েছে।
   • dcc.Slider: স্লাইডারের মাধ্যমে ইউজারকে একটি বছর নির্বাচন করতে দেয়া হয়েছে।
   • dcc.Graph: এখানে গ্রাফ প্রদর্শিত হবে, যা ইউজারের ইনপুটের ভিত্তিতে আপডেট হবে।
2. Callback:
   • @app.callback: এই ডেকোরেটরের মাধ্যমে, ইউজারের ইনপুট গ্রহণ করা হয় এবং গ্রাফের আপডেট করা হয়।
   • Input: continent-dropdown এবং year-slider থেকে ইউজারের ইনপুট নেওয়া হচ্ছে।
   • Output: গ্রাফের figure আপডেট হচ্ছে যা ইউজারের ইনপুটের ভিত্তিতে নতুন ডেটা দিয়ে তৈরি হচ্ছে।

১. Input Components: Dropdown, Slider, RadioItems

Dash এ বিভিন্ন ধরনের Input Components ব্যবহার করা যায় যেমন:

1. Dropdown: এক বা একাধিক বিকল্প নির্বাচন করার জন্য।
2. Slider: একটি নির্দিষ্ট রেঞ্জ থেকে মান নির্বাচন করার জন্য।
3. RadioItems: একাধিক বিকল্প থেকে একটি নির্বাচন করার জন্য।
4. Input: টেক্সট ইনপুট নেয়ার জন্য।

উদাহরণ: RadioItems এবং Input ব্যবহার

import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.graph_objects as go
import pandas as pd

# Dash অ্যাপ্লিকেশন তৈরি
app = dash.Dash(__name__)

# ডেটাসেট
df = px.data.gapminder()

# Layout
app.layout = html.Div([
    html.H1("Interactive Dashboard with RadioItems and Input"),
    
    # RadioItems ব্যবহার করা
    dcc.RadioItems(
        id='continent-radio',
        options=[{'label': 'Africa', 'value': 'Africa'},
                 {'label': 'Americas', 'value': 'Americas'},
                 {'label': 'Asia', 'value': 'Asia'},
                 {'label': 'Europe', 'value': 'Europe'},
                 {'label': 'Oceania', 'value': 'Oceania'}],
        value='Asia'
    ),
    
    # Input: ইউজারের ইনপুট নেয়ার জন্য
    dcc.Input(id='year-input', type='number', value=2007),
    
    # গ্রাফ
    dcc.Graph(id='scatter-plot'),
])

# Callback ফাংশন
@app.callback(
    Output('scatter-plot', 'figure'),
    [Input('continent-radio', 'value'),
     Input('year-input', 'value')]
)
def update_graph(selected_continent, selected_year):
    # ডেটা ফিল্টার করা
    filtered_df = df[(df['continent'] == selected_continent) & (df['year'] == selected_year)]
    
    # Scatter plot তৈরি
    fig = go.Figure(go.Scatter(x=filtered_df['gdpPercap'], y=filtered_df['lifeExp'], mode='markers'))
    return fig

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

এখানে RadioItems এবং Input ব্যবহার করা হয়েছে যাতে ইউজার মহাদেশ এবং বছর নির্বাচন করতে পারে এবং গ্রাফ পরিবর্তিত হবে।

২. Handling Multiple Inputs

Dash আপনাকে Multiple Inputs পরিচালনা করতে সাহায্য করে, যেমন একাধিক Dropdown বা Slider। এর মাধ্যমে ইউজার বিভিন্ন কন্ট্রোল দিয়ে গ্রাফের ডেটা কাস্টমাইজ করতে পারেন।

উদাহরণ: Multiple Inputs Handling

import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.express as px

# Dash অ্যাপ্লিকেশন তৈরি
app = dash.Dash(__name__)

# উদাহরণ ডেটাসেট
df = px.data.gapminder()

# Layout
app.layout = html.Div([
    html.H1("Interactive Data Visualization with Multiple Inputs"),
    
    # Dropdowns: মহাদেশ এবং দেশের নির্বাচন
    dcc.Dropdown(id='continent-dropdown', options=[{'label': continent, 'value': continent} for continent in df['continent'].unique()], value='Asia'),
    dcc.Dropdown(id='country-dropdown'),
    
    # গ্রাফ
    dcc.Graph(id='life-exp-vs-gdp'),
])

# Callback: দুইটি ইনপুটের মাধ্যমে ডেটা আপডেট করা
@app.callback(
    Output('country-dropdown', 'options'),
    [Input('continent-dropdown', 'value')]
)
def set_country_options(selected_continent):
    countries = df[df['continent'] == selected_continent]['country'].unique()
    return [{'label': country, 'value': country} for country in countries]

@app.callback(
    Output('life-exp-vs-gdp', 'figure'),
    [Input('continent-dropdown', 'value'),
     Input('country-dropdown', 'value')]
)
def update_graph(selected_continent, selected_country):
    filtered_df = df[(df['continent'] == selected_continent) & (df['country'] == selected_country)]
    fig = px.scatter(filtered_df, x='gdpPercap', y='lifeExp', color='country', title=f"{selected_country} - {selected_continent}")
    return fig

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

এখানে, প্রথম Dropdown এ মহাদেশ এবং দ্বিতীয় Dropdown এ দেশের পছন্দ অনুযায়ী গ্রাফ পরিবর্তিত হচ্ছে।

সারাংশ

Plotly এবং Dash ফ্রেমওয়ার্ক ব্যবহার করে আপনি সহজেই User Input এবং Interaction এর মাধ্যমে ইন্টারেকটিভ Data Visualization তৈরি করতে পারেন। Dash তে Dropdown, Slider, Input, এবং RadioItems সহ বিভিন্ন কম্পোনেন্ট ব্যবহার করে ব্যবহারকারীকে ইনপুট দেয়ার সুযোগ দেয়া হয়, এবং সেই ইনপুট অনুযায়ী গ্রাফ আপডেট হয়। Dash ব্যবহার করে ডেটার বিশ্লেষণ ও ভিজুয়ালাইজেশন আরও সহজ এবং ইন্টারেকটিভ করা যায়।