وبلاگ

ایجاد یک داشبورد بهتر – افسانه یا واقعیت؟

نسخه بتای من 2.0 با استفاده از Dash & Plotly به جای Matplotlib ایجاد شد

معرفی

در فوریه 2023، اولین پست متوسط ​​خود را نوشتم:

نحوه سفارشی کردن اینفوگرافیک در پایتون: نکات و ترفندها

در اینجا، نحوه ایجاد یک داشبورد ساده با نمودارهای مختلف، از جمله نمودارهای خطی، نمودارهای دایره ای و میله ای و نمودار choropleth را توضیح دادم. برای طرح آنها از Matplotlib “قدیمی خوب” استفاده کردم [1]، چون با کلمات کلیدی و کارکردهای اساسی آن آشنا بودم. من هنوز معتقدم که Matplotlib یک کتابخانه عالی برای شروع سفر داده شما با پایتون است زیرا پایگاه دانش جمعی بسیار بزرگی دارد. اگر چیزی در Matplotlib نامشخص است، می توانید سوالات خود را در گوگل جستجو کنید و به احتمال زیاد پاسخ دریافت خواهید کرد.

با این حال، Matplotlib می تواند هنگام ایجاد تجسم های تعاملی و مبتنی بر وب با مشکلاتی روبرو شود. برای هدف دوم، پلاتلی [2] می تواند جایگزین خوبی باشد که به شما امکان می دهد تخته سفید تعاملی غیرمعمول ایجاد کنید. از سوی دیگر، Matplotlib یک کتابخانه قدرتمند است که کنترل بهتری بر سفارشی‌سازی طرح ارائه می‌دهد، که برای ایجاد تجسم‌های آماده انتشار خوب است.

در این پست سعی می کنم جایگزین کنم کدی که از Matlab استفاده می کند (1) s بر اساس پلاتلی (2). ساختار به دلیل انواع گرافیک ها و داده های ورودی، پست اصلی را تکرار خواهد کرد [3] همان هستند. با این حال، من در اینجا برخی از نظرات را در مورد سطح شباهت بین (1) و (2) برای هر نوع نمودار اضافه می کنم. هدف اصلی من از نوشتن این مقاله این است که به اولین پست خود نگاه کنم و سعی کنم آن را با سطح دانش فعلی خود دوباره انجام دهم.

توجه داشته باشید: تعجب خواهید کرد که کد Plotly مورد نیاز برای ساختن نقشه choropleth چقدر کوتاه است 🙂

اما ابتدا، و با ایجاد یک نمودار خطی در Plotly شروع می کنیم.

#1. برنامه خطی

یک نمودار خطی می تواند انتخاب عاقلانه ای برای نشان دادن پویایی تغییر داده های ما در طول زمان باشد. در مورد زیر، نمودار خطی را با نمودار پراکنده ترکیب می کنیم تا هر مکان را با رنگ خاص خود علامت گذاری کنیم.

در زیر یک قطعه کد با استفاده از Plotly وجود دارد که یک نمودار خطی ایجاد می کند که میانگین حضور در جام جهانی فوتبال را در دوره 1990-2018 نشان می دهد: هر مقدار دارای برچسب و نقطه پراکندگی رنگی است.

## Line Plot ##
import plotly.graph_objects as go
time = [1990, 1994, 1998, 2002, 2006, 2010, 2014, 2018]
numbers = [48411, 68626, 44676, 42571, 52609, 49499, 53772, 47371]
labels = ['Italy', 'USA', 'France', 'Japan / South Korea', 'Germany', 
'South Africa', 'Brazil', 'Russia']
fig = go.Figure()
# Line plot
fig.add_trace(go.Scatter(x=time, y=numbers, mode='lines+markers',
marker=dict(color='black',size=10), line=dict(width=2.5)))
# Scatter plot
for i in range(len(time)):
fig.add_trace(go.Scatter(x=[time[i]], y=[numbers[i]],
mode='markers', name=labels[i]))
# Layout settings
fig.update_layout(title='Average number of attendees per game in 1990-2018',
xaxis=dict(tickvals=time),
yaxis=dict(range=[35000, 70000]),
showlegend=True,
legend=dict(x=0.5, y=-0.2),
plot_bgcolor='white')
fig.show()

و نتیجه به صورت زیر است:

هنگامی که ماوس را روی هر نقطه طرح در Plotly نگه دارید، پنجره ای ظاهر می شود که تعداد بینندگان و نام کشوری را که مسابقات در آن برگزار شده نشان می دهد.

سطح شباهت با نمودار Matplotlib: 8 از 10.
به طور کلی، کد از نظر ساختار و قرارگیری بلوک‌های کد اصلی در آن بسیار شبیه به قطعه اصلی است.

چه فرقی دارد: با این حال، برخی از تفاوت ها نیز ارائه شده است. به عنوان مثال، به جزئیات نحوه اعلان عناصر ترسیمی توجه کنید (مثلاً خطوط حالت ترسیم خط + نشانگرها، که به آنها امکان نمایش همزمان را می دهد).

آنچه مهم است: برای ساخت این نمودار از ماژول plotly.graph_objects استفاده می کنم (که به صورت go وارد می شود). این یک سلسله مراتب خودکار از کلاس ها به نام “اشیاء گرافیکی” را ارائه می دهد که می تواند برای نمایش اشکال مختلف استفاده شود.

#2. نمودار دایره ای (در واقع نمودار دایره ای)

نمودارهای دایره ای و دایره ای در نشان دادن سهم مقادیر مختلف در کل بسیار خوب هستند: آنها به بخش هایی تقسیم می شوند که ارزش متناسب هر قسمت از داده های ما را نشان می دهد.

در اینجا یک قطعه کد در Plotly وجود دارد که برای ایجاد نمودار دایره ای استفاده می شود که نسبت کشورهایی که بیشترین عناوین جام جهانی را دارند نشان می دهد.

## Pie Chart ##
import plotly.express as px
# Data
label_list = ['Brazil', 'Germany', 'Italy', 'Argentina', 'Uruguay', 'France', 'England', 'Spain']
freq = [5, 4, 4, 3, 2, 2, 1, 1]
# Customize colors
colors = ['darkorchid', 'royalblue', 'lightsteelblue', 'silver', 'sandybrown', 'lightcoral', 'seagreen', 'salmon']
# Building chart
fig = px.pie(values=freq, names=label_list, title='Countries with the most FIFA World Cup titles',
color_discrete_map=dict(zip(label_list, colors)),
labels={'label': 'Country', 'value': 'Frequency'},
hole=0.3)
fig.update_traces(textposition='inside', textinfo='percent+label')
fig.show()

تصویر به دست آمده در زیر است (به هر حال این یک نمودار تعاملی است!):

سطح شباهت با نمودار Matplotlib: 7 از 10. باز هم منطق کد برای هر دو نسخه تقریباً یکسان است.

چه فرقی دارد: می توان متوجه شد که با استفاده از کلمه کلیدی سوراخ می توان نمودار دایره ای را به نمودار دایره ای تبدیل کرد. و ببینید چقدر آسان و ساده است که برای هر بخش از نمودار در Plotly در مقایسه با Matplotlib، درصد نمایش داده شود.

آنچه مهم است: به جای استفاده از یک ماژول plotly.graph_objects، در اینجا یک ماژول plotly.express (معمولاً به صورت px وارد می‌شود) را پیاده‌سازی می‌کنم که حاوی توابعی است که می‌تواند کل ارقام را در یک زمان ایجاد کند. این رابط کاربری آسان Plotly است که با انواع مختلف داده کار می کند.

#3. نمودار میله ای

نمودارهای میله ای، چه عمودی یا افقی، مقایسه بین دسته های مختلف را نشان می دهد. محور عمودی (“استادیوم”) نمودار مقوله های خاصی را نشان می دهد که با هم مقایسه می شوند و محور افقی یک مقدار اندازه گیری شده را نشان می دهد. “ظرفیت” خودم.

## Bar Chart ##
import plotly.graph_objects as go
labels = ['Estádio do Maracanã', 'Camp Nou', 'Estadio Azteca',
'Wembley Stadium', 'Rose Bowl', 'Estadio Santiago Bernabéu',
'Estadio Centenario', 'Lusail Stadium']
capacity = [200, 121, 115, 99, 94, 90, 90, 89]
fig = go.Figure()
# Horizontal bar chart
fig.add_trace(go.Bar(y=labels, x=capacity, orientation='h', marker_color='blue'))
# Layout settings
fig.update_layout(title='Top-8 stadiums on capacity (in thousands)',
yaxis=dict(title='Stadiums'),
xaxis=dict(title='Capacity'),
showlegend=False,
plot_bgcolor='white')
fig.show()

سطح شباهت با نمودار Matplotlib: 6 از 10.
به طور کلی، دو بخش کد کمابیش بلوک های مشابهی دارند، اما کد در Plotly کوتاه تر است.

چه فرقی دارد: قطعه کد در Plotly کوتاهتر است زیرا نیازی به اضافه کردن یک پاراگراف برای برچسب زدن هر ستون نداریم—Plotly این کار را به طور خودکار به لطف تعامل آن انجام می دهد.

آنچه مهم است: ماژول plotly.express نیز برای ساخت این نوع نمودار استفاده شد. برای یک نوار افقی char می توانیم از تابع px.bar با orientation=’h’ استفاده کنیم.

#4. نقشه هوروپلث

نقشه Choropleth یک ابزار عالی برای تجسم نحوه تغییر یک متغیر در یک منطقه جغرافیایی است. یک نقشه حرارتی مشابه است، اما از مناطق ترسیم شده بر اساس یک الگوی متغیر، به جای مناطق جغرافیایی، مانند نقشه های choropleth استفاده می کند.

در زیر می توانید کد Plotly برای ترسیم فال را مشاهده کنید. در اینجا، هر کشور بسته به تعداد دفعات میزبانی جام جهانی فوتبال، رنگ خود را می گیرد. کشورهای قرمز تیره 2 بار، کشورهای قرمز روشن 1 بار و بقیه (خاکستری) 0 بار میزبان مسابقات بودند.

## Choropleth Map ##
import polars as pl
import plotly.express as px
df = pl.read_csv('data_football.csv')
df.head(5)
fig = px.choropleth(df, locations='team_code', color='count', 
hover_name='team_name', projection='natural earth',
title='Geography of the FIFA World Cups',
color_continuous_scale='Reds')
fig.show()

سطح شباهت با نمودار Matplotlib: 4 از 10
کد موجود در Plotly سه برابر کوچکتر از کد Matplotlib است.

چه فرقی دارد: در حالی که از Matplotlib برای ساختن یک نقشه choropleth استفاده می کنیم، باید کارهای اضافی زیادی انجام دهیم، به عنوان مثال.

• یک پوشه zip ne_110m_admin_0_countries.zip را با فایل های شکل دانلود کنید تا خود نقشه را بکشید و مرزهای کشور، خطوط شبکه و غیره را بکشید.
• برای وارد کردن عناصر Basemap، Polygon و PatchCollection از کتابخانه های mpl_toolkits.basemap و matplotlib.patches و matplotlib.collections و استفاده از آنها برای ایجاد پس زمینه رنگی بر اساس منطقی که در فایل data_football.csv پیشنهاد کرده ایم.

آنچه مهم است: و پلاتلی چه می کند؟ این فایل همان data_football.csv را می گیرد و با استفاده از تابع px.choropleth داده هایی را نشان می دهد که در مناطق یا کشورهای مختلف نقشه جمع شده اند. هر کدام با توجه به مقدار یک قطعه اطلاعات خاص رنگ می شوند، در مورد ما این متغیر تعداد در فایل ورودی است.

همانطور که می بینید، همه کدهای Plotly کوتاهتر از کدهای Matplotlib هستند (یا در مورد ساخت خط خطی یکسان هستند). این به این دلیل حاصل می شود که Plotly ایجاد طرح های پیچیده را بسیار آسان می کند. Plotly برای ایجاد تجسم های تعاملی تنها با چند خط کد عالی است.

خلاصه: ایجاد یک داشبورد واحد با Dash

Dash امکان ساخت یک داشبورد تعاملی بر اساس کد پایتون را بدون نیاز به یادگیری چارچوب های پیچیده جاوا اسکریپت مانند React.js می دهد.

در اینجا می توانید کد و نظرات بخش های مهم آن را بیابید:

import polars as pl
import plotly.express as px
import plotly.graph_objects as go
import dash
from dash import dcc
from dash import html
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
header = html.H2(children="FIFA World Cup Analysis")
## Line plot with scatters ##
# Data
time = [1990, 1994, 1998, 2002, 2006, 2010, 2014, 2018]
numbers = [48411, 68626, 44676, 42571, 52609, 49499, 53772, 47371]
labels = ['Italy', 'USA', 'France', 'Japan / South Korea', 'Germany', 'South Africa', 'Brazil', 'Russia']
# Building chart
chart1 = go.Figure()
chart1.add_trace(go.Scatter(x=time, y=numbers, mode='lines+markers',
marker=dict(color='black',size=10), line=dict(width=2.5)))
for i in range(len(time)):
chart1.add_trace(go.Scatter(x=[time[i]], y=[numbers[i]],
mode='markers', name=labels[i]))
# Layout settings
chart1.update_layout(title='Average number of attendees per game in 1990-2018',
xaxis=dict(tickvals=time),
yaxis=dict(range=[35000, 70000]),
showlegend=True,
plot_bgcolor='white')
plot1 = dcc.Graph(
id='plot1',
figure=chart1,
className="six columns"
)
## Pie chart ##
# Data
label_list = ['Brazil', 'Germany', 'Italy', 'Argentina', 'Uruguay', 'France', 'England', 'Spain']
freq = [5, 4, 4, 3, 2, 2, 1, 1]
# Customize colors
colors = ['darkorchid', 'royalblue', 'lightsteelblue', 'silver', 'sandybrown', 'lightcoral', 'seagreen', 'salmon']
# Building chart
chart2 = px.pie(values=freq, names=label_list, title='Countries with the most FIFA World Cup titles',
color_discrete_map=dict(zip(label_list, colors)),
labels={'label': 'Country', 'value': 'Frequency'},
hole=0.3)
chart2.update_traces(textposition='inside', textinfo='percent+label')
plot2 = dcc.Graph(
id='plot2',
figure=chart2,
className="six columns"
)
## Horizontal bar chart ##
labels = ['Estádio do Maracanã', 'Camp Nou', 'Estadio Azteca',
'Wembley Stadium', 'Rose Bowl', 'Estadio Santiago Bernabéu',
'Estadio Centenario', 'Lusail Stadium']
capacity = [200, 121, 115, 99, 94, 90, 90, 89]
# Building chart
chart3 = go.Figure()
chart3.add_trace(go.Bar(y=labels, x=capacity, orientation='h', marker_color='blue'))
# Layout settings
chart3.update_layout(title='Top-8 stadiums on capacity (in thousands)',
yaxis=dict(title='Stadiums'),
xaxis=dict(title='Capacity'),
showlegend=False,
plot_bgcolor='white')
plot3 = dcc.Graph(
id='plot3',
figure=chart3,
className="six columns"
)
## Chropleth map ##
# Data
df = pl.read_csv('data_football.csv')
# Building chart
chart4 = px.choropleth(df, locations='team_code', color='count', 
hover_name='team_name', projection='natural earth',
title='Geography of the FIFA World Cups',
color_continuous_scale='Reds')
plot4 = dcc.Graph(
id='plot4',
figure=chart4,
className="six columns"
)
row1 = html.Div(children=[plot1, plot2],)
row2 = html.Div(children=[plot3, plot4])
layout = html.Div(children=[header, row1, row2], style={"text-align": "center"})
app.layout = layout
if __name__ == "__main__":
app.run_server(debug=False)

نظرات کد:

• ابتدا باید تمام کتابخانه ها (از جمله ماژول های HTML) را وارد کنیم و داشبورد را با استفاده از برنامه رشته = dash.Dash(__name__, external_stylesheets=external_stylesheets) مقداردهی کنیم.
• سپس هر نمودار را در اجزای اصلی Dash قرار می دهیم تا آنها را با سایر اجزای HTML (dcc.Graph) ادغام کنیم. در اینجا className=”six columns” باید از نیمی از صفحه برای هر ردیف گرافیک استفاده کند.
• سپس 2 ردیف از اجزای html.Div با 2 گرافیک در هر یک ایجاد می کنیم. علاوه بر این، CSS ساده با ویژگی style می تواند برای نمایش هدر داشبورد ما در رشته طرح بندی استفاده شود. این طرح به‌عنوان طرح‌بندی برنامه اولیه اولیه تنظیم شده است.
• در نهایت، آخرین پاراگراف اجازه می دهد تا برنامه به صورت محلی اجرا شود (app.run_server(debug=False)). برای دیدن داشبورد کافیست لینک http://127.0.0.1:8050/ را دنبال کنید و چیزی شبیه تصویر زیر پیدا خواهید کرد.

نتایجی که اظهار شده

انصافاً سؤال مطرح شده در عنوان شعاری بود و فقط شما خواننده عزیز می توانید تصمیم بگیرید که آیا نسخه فعلی داشبورد بهتر از نسخه قبلی است یا خیر. اما حداقل من سعی کردم (و عمیقاً معتقدم نسخه 2.0 بهتر است) 🙂

ممکن است فکر کنید که این پست حاوی اطلاعات جدیدی نیست، اما من نمی توانم مخالفت کنم. در نوشتن این پست، می‌خواستم بر اهمیت بهبود مهارت‌ها در طول زمان تاکید کنم، حتی اگر نسخه اول کد آنقدرها بد به نظر نرسد.

امیدوارم این پست شما را تشویق کند تا به پروژه های تمام شده خود نگاه کنید و سعی کنید آنها را با استفاده از تکنیک های جدید موجود دوباره انجام دهید. این دلیل اصلی این است که من تصمیم گرفتم Matplotlib را با Plotly & Dash جایگزین کنم (به علاوه دو مورد آخر ایجاد نتایج تجزیه و تحلیل داده ها را آسان می کند).

توانایی بهبود مداوم کار خود با بهبود نسخه قدیمی یا استفاده از کتابخانه های جدید به جای کتابخانه هایی که قبلا استفاده می کردید یک مهارت عالی برای هر برنامه نویسی است. اگر این توصیه را به عنوان یک عادت در نظر بگیرید، شاهد پیشرفت خواهید بود زیرا فقط تمرین باعث کامل شدن می شود.

و مثل همیشه، ممنون که خواندید!

منابع

1. صفحه اصلی کتابخانه Matplotlib: https://matplotlib.org/stable/
2. صفحه اصلی کتابخانه Plotly: https://plotly.com/python/
3. Fjelstul، Joshua C. “The Fjelstul World Cup Database v.1.0.” 8 ژوئیه 2022. https://www.github.com/jfjelstul/worldcup

ایجاد یک داشبورد بهتر – افسانه یا واقعیت؟ در ابتدا در Towards Data Science on Medium پست شد، جایی که مردم با برجسته کردن و پاسخ دادن به این داستان به گفتگو ادامه می‌دهند.

لینک به منبع