使用Dash開發互動式資料視覺化網頁頁面布局

後續的操作前,需要安裝如下python包

pip install dash==0.20.0  # the core dash backend
pip install dash-renderer==0.11.2  # the dash front-end
pip install dash-html-components==0.8.0  # html components
pip install dash-core-components==0.18.1  # supercharged components
pip install plotly --upgrade  # plotly graphing library used in examples

dash應用包括兩個部分，應用布局(layout)和資料互動(interactivity)。其中布局部分用來展示資料以及引導使用者使用。dash提供了dash_core_components和dash_html_components, 以類的方式對html和js進行封裝，便於呼叫。下面先構建乙個最簡單的布局

import dash
import dash_core_components as dcc
import dash_html_components as html
html.h1(children = 'hello dash'),
html.div(children = '''
'''),
dcc.graph(
id = 'example-graph',
figure = ,,],
'layout':})
])if __name__ == '__main__':

其次這個應用的布局(layout)由html元件(html.div等)和圖形元件(dcc.graph等)構成。其中基礎的html標籤來自於dash_html_components，而更加react.js庫里的高階元件則是由dash_core_components提供。

最後的展示形式需要後期慢慢的調整，比如說調整一下字型對齊, 字型顏色和背景顏色等

import dash_core_components as dcc
import dash_html_components as html
colors = 
children=[
html.h1(
children = 'hello dash',
style = 
),html.div(children = '''
''', style = 
),dcc.graph(
id = 'example-graph',
figure = ,,],
'layout':,
'title':'dash data visualization'}}
)])if __name__ == '__main__':

這裡的html元件都設定了style，用來調整樣式，

比如說這裡可以基於pandas的資料庫建立散點圖

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd
df = pd.read_csv(
'' +
'5d1ea79569ed194d432e56108a04d188/raw/' +
'a9f9e8076b837d541398e999dcbac2b2826a81f8/'+
'gdp-life-exp-2007.csv')
plot = [dcc.graph(
id = 'life-exp-vs-gdp',
figure = 
},name = i
) for i in df.continent.unique()
],'layout': go.layout(
xaxis=,
yaxis=,
margin=,
legend=,
hovermode='closest')}
)]html.div(children=[
html.div(classname='col-md-4'),
html.div(plot,classname='col-md-4')],
classname='row'
))my_css_url = ""
"external_url": my_css_url
})my_js_url = ''
"external_url": my_js_url
})if __name__ == '__main__':

這部分**將圖形部分的**從html元件中抽離出來，寫完之後，再新增到html總體元件中。此外還增加了bootstrap的css樣式。

dash的dash_html_components支援原生的html語句，而dash_core_components得markdown提供了markdown得渲染。

import dash
import dash_core_components as dcc
import dash_html_components as html
markdown_text = '''
### dash and markdown
dash uses the [commonmark](
specification of markdown.
check out their [60 second markdown tutorial](
if this is your first introduction to markdown!
'''    dcc.markdown(children=markdown_text)
])if __name__ == '__main__':

dash_core_components裡不僅僅提供了markdown, graphs這些圖形元件，還支援下拉欄等其他使用工具，可在進一步了解

這部分主要是學習了dash應用得layout.layout是不同元件的層級關係樹，最後結果是html頁面。html頁面的html基本語法由dash_html_components提供，而高階的繪圖和下拉欄等則是由dash_core_components提供.

使用Dash開發互動式資料視覺化網頁頁面布局

dash文件 Part4 互動式視覺化

Python資料互動式視覺化互動式視覺化

Python資料互動式視覺化地理資料

使用Dash開發互動式資料視覺化網頁 頁面布局

dash文件 Part4 互動式視覺化

Python資料互動式視覺化 互動式視覺化

Python資料互動式視覺化 地理資料

相關推薦

使用Dash開發互動式資料視覺化網頁頁面布局

Python資料互動式視覺化互動式視覺化

Python資料互動式視覺化地理資料