Thanh trượt

Nhập môn Trực quan hóa Dữ liệu với Plotly trong Python

Alex Scriven

Data Scientist

Thanh trượt là gì?

 

  • Phần tử tương tác để chuyển giữa các giá trị và cập nhật biểu đồ

  • Dùng để xem dữ liệu theo thời gian

  • Có thể áp dụng cho bất kỳ nhóm nào

$$

$$

$$

  • 💡 Đảm bảo phù hợp với biểu đồ của bạn

 

Thanh trượt theo năm:

Một thanh trượt theo năm

Thanh trượt theo đảo chim cánh cụt:

Một thanh trượt theo đảo chim cánh cụt

Nhập môn Trực quan hóa Dữ liệu với Plotly trong Python

Slider trong plotly.express

 

  • animation_frame: Nội dung trên slider (Year hoặc Island ở trang trước)

$$

  • animation_group: Xác định mẫu nào giữ nguyên qua các frame
Nhập môn Trực quan hóa Dữ liệu với Plotly trong Python

Doanh thu vs. Nhân viên với slider

fig = px.scatter(
  data_frame=revenues, 
  y='Revenue',
  x='Employees',
  color='Industry',

  animation_frame='Year',
  animation_group='Company')


fig.update_layout({
  'yaxis': {'range': [0, 500000]},
  'xaxis': {'range': [-100000, 2500000]}
})


fig['layout'].pop('updatemenus')
fig.show()

 

Doanh thu theo năm

Nhập môn Trực quan hóa Dữ liệu với Plotly trong Python

Hạn chế: phương thức animate

plotly.express dùng phương thức animate để tạo slider

$$

fig['layout']['sliders'][0].steps[0]['method']

animate

$$

  • Chỉ hoạt họa cùng một điểm dữ liệu theo thời gian
  • Tự xây slider bằng các trace
Nhập môn Trực quan hóa Dữ liệu với Plotly trong Python

Kế hoạch

 

  1. Tạo figure với các trace cần thiết
  2. Định nghĩa sliders để ẩn/hiện các trace
  3. Cập nhật layout để thêm slider vào figure
Nhập môn Trực quan hóa Dữ liệu với Plotly trong Python

Tạo figure

 

fig = go.Figure()

for island in ['Torgersen', 'Biscoe', 'Dream']:
    df = penguins[penguins.Island == island]

    temp_trace = px.scatter(df, x="Culmen Length (mm)", y="Culmen Depth (mm)")
    fig.add_trace(temp_trace.data[0])
Nhập môn Trực quan hóa Dữ liệu với Plotly trong Python

Tạo slider

sliders = [
  {'steps':[

    {'method': 'update', 'label': 'Torgersen',

    'args': [{'visible': [True, False, False]}]},

    {'method': 'update', 'label': 'Bisco',

    'args': [{'visible': [False, True, False]}]},

    {'method': 'update', 'label': 'Dream',

    'args': [{'visible': [False, False, True]}]}

  ]}
]

$$

Nhiều tùy chọn định dạng khác trong tài liệu

Nhập môn Trực quan hóa Dữ liệu với Plotly trong Python

Thêm slider

 

$$

fig.update_layout({'sliders': sliders})
fig.show()

Thanh trượt đảo chim cánh cụt cuối cùng

Nhập môn Trực quan hóa Dữ liệu với Plotly trong Python

Ayo berlatih!

Nhập môn Trực quan hóa Dữ liệu với Plotly trong Python

Preparing Video For Download...