【Dash】plotly.express 气泡图

一、More about Visualization

The Dash Core Compnents module dash.dcc includes a componenet called Graph.

Graph renders interactive data visualizations using the open source plotly.js javaScript graphing library.Plotly.js supports over 35 chart types and renders charts in both vector-quality SVG and high-performance WebGL.

The figure argument in the Graph components is the same figure artument that is used by plotly.py, Plotly's open source Python graphing library.

from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd

app = Dash(__name__)

df = pd.read_csv('https://raw.githubusercontent.com/GarciaShanCW/DATA/main/gdp-life-exp-2007.csv')

fig = px.scatter(df, x='gdp per capita', y='life expectancy',
                 size = 'population', color='continent', hover_name='country',
                 log_x=True, size_max=60)

app.layout = html.Div([
    dcc.Graph(
        id='life-exp-vs-gdp',
        figure=fig
    )
])

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

二、解读

from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd
  • Dash类(用于创建Dash应用程序)、dcc模块(包含Dash核心组件,如Graph等)和html模块(包含HTML元素)
  • 导入Plotly Express库,这是一个用于快速创建图表的库,使用别名px
  • 导入Pandas库,这是一个数据处理和分析库,使用别名pd
app = Dash(__name__)

pf = pd.read_csv('https://raw.githubusercontent.com/GarciaShanCW/DATA/main/gdp-life-exp-2007.csv')
  • 创建一个Dash应用程序实例,__name__是一个Python内置变量,用于获取当前模块的名称
  • 使用Pandas的read_csv函数从提供的URL读取CSV文件
fig = px.scatter(df, x='gdp per capita', y='life expectancy',
                size='population', color='continent', hover_name='country',
                log_x=True, size_max=60)

fig = px.scatter(...):

  • 使用 plotly.express 的 scatter 函数创建一个散点图,其中:
  • df:数据源
  • x='gdp per capita' :X轴表示人均DGP
  • y='life expectancy':Y轴表示预期寿命
  • size='population':点的大小表示人口数量
  • color='continent':点的颜色表示大陆
  • hover_name='country':鼠标悬停时显示国家名称
  • log_x=True:对X轴进行对数变换
  • size_name=60:设置点的最大大小
app.layout = html.Div([
    dcc.Graph(
        id='lief-exp-vs-gdp',
        figure=fig
    )
])
  • app.layout = html.Div([...]):设置Dash 应用程序的布局。
  • dcc.Graph() 组件用于显示图表,id 属性用于标识组件,figure属性用于传递图表数据。
if __name__ == '__main__':
    app.run(debug=True)
  • 这是一个Python 条件语句,用于判断当前脚本是否作为主程序运行。如果是,则执行下面的代码。
  • app.run(debug=True):调用Dash应用程序的run方法来启动服务器,debug=True表示在调试模式下运行,这允许在开发过程中自动重新加载代码。

  • 12
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Dash中,`dash.js`是Dash内部使用的JavaScript库,用于处理与交互相关的功能,其中包括plotly.js的封装。`dash.js`中并没有直接设置`bns`的代码,因为`bns`是plotly.js的配置选项,它是在`dcc.Graph`的`config`属性中设置的。 当用户与图表交互时,`dash.js`会发送请求到Dash后端,后端会根据请求参数生成新的图表,并将其返回给前端。在生成新的图表时,后端会根据`dcc.Graph`的`config`属性中的设置来生成plotly.js的配置,并将其传递给新的图表。因此,`bns`的设置是在后端代码中实现的。 具体来说,在Dash后端代码中,`bns`的默认值是通过`plotly.graph_objs`模块中的`layout`对象来设置的,例如: ```python import dash import dash_core_components as dcc import dash_html_components as html import plotly.graph_objs as go app = dash.Dash(__name__) app.layout = html.Div([ dcc.Graph( id='example-graph', 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': 'Montreal'}, ], 'layout': go.Layout( title='Dash Data Visualization', barmode='stack', xaxis={'title': 'X Axis'}, yaxis={'title': 'Y Axis'}, # 设置buffer size为128 bns=128 ) } ) ]) if __name__ == '__main__': app.run_server(debug=True) ``` 在上面的示例中,使用`go.Layout`来设置图表的布局信息,其中包括`bns`的设置。在后端代码中,根据`dcc.Graph`的`config`属性中的设置来生成plotly.js的配置,并将其传递给新的图表。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值