【Dash】简单的直方图

一、Visualizing Data

The Plotly graphing library has more than 50 chart types to choose from. In this example, we will make use of the histogram chart.

# Import packages
from dash import Dash, html, dash_table, dcc
import pandas as pd
import plotly.express as px# Incorporate data
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
# Initialize the app
app = Dash()# App layout
app.layout = html.Div([html.Div(children='My First App with Data and a Graph'),dash_table.DataTable(data=df.to_dict('records'), page_size=15),dcc.Graph(figure=px.histogram(df, x='continent', y='lifeExp', histfunc='avg'))
])# Run the app
if __name__ == '__main__':app.run(debug=True)

二、解读

题目要求创建一个基本的仪表板，包含文本、数据表和图表。

# Import packages
from dash import Dash, html, dash_table, dcc
import pandas as pd
import plotly.express as px

• Dash用于创建Web应用。
• html、dash_table 和 dcc 是 Dash 的组件库。
• pandas 是一个数据处理库。
• plotly.express 用于快速生成图表。

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')

• 使用 pandas 的 read_csv 函数读取 URL 加载的 CSV 数据文件。
• DataFrame df 接收读取的数据。

app = Dash()
app.layout = html.Div([html.Div(children='My First App with Data and a Graph'),dash_table.DataTable(data=df.to_dict('records'), page_size=15),dcc.Graph(figure=px.histogram(df, x='continent', y='lifeExp', histfunc='avg'))
])

• 创建一个 Dash 应用实例。
• app.layout = html.Div([]) 设置 html.Div 组件布局。
• html.Div(......) 创建一个包含文本 "My First App with Data and a Graph" 的 div 元素。
• dash_table.DataTable(......) 接收一个数据框 df 并将其转换成字典列表，然后显示为一个数据表。page_size = 15 指定显示的页数。
• dcc.Graph(......) 用于显示图表，使用 plotly.express 的 px.histogram 函数，根据DataFram df 中的数据创建一个直方图图表的 X 轴是'continent'， Y轴是'liftExp' ，并使用了 'avg' 函数来计算直方图的均值。