จาก Plotly สู่ Dash

การสร้างแดชบอร์ดด้วย Dash และ Plotly

Alex Scriven

Data Scientist

แอป Dash แรก

แอป Dash แบบสมบูรณ์:

from dash import Dash, dcc
app = Dash()
app.layout = [dcc.Graph(id='example-graph', figure=bar_fig)]
if __name__ == '__main__':
    app.run(debug=True)

ใช้ฟังก์ชันของ Python ได้
- เช่น String interpolation print("f{my_variable}")

การ import หลักของ Dash

from dash import Dash, dcc

Dash ใช้เริ่มต้นแอป
dcc มี UI component เช่น กราฟและอินพุต
- แอปของเรามี component เดียว
- จะได้ใช้ component เพิ่มเติมตลอดคอร์ส

Layout ของแอป

app = Dash()

app.layout = [dcc.Graph(
  id='example-graph',
  figure=bar_fig)]

สร้าง app object ด้วย Dash()
กำหนด app.layout
- ใช้ dcc.Graph()
  - figure = Plotly figure ที่จะแสดงผล
  - id = สำคัญสำหรับ callback ในภายหลัง

การรันแอป

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

รันสคริปต์จาก command-line
- เช่น python my_app.py ใน command-line
debug ช่วยให้เห็น feedback ขณะทดสอบ

แอปของเรา

เข้าถึงได้ผ่านเว็บเบราว์เซอร์ เช่น Google Chrome
ขณะที่เซิร์ฟเวอร์ทำงานอยู่ แก้ไขและบันทึกไฟล์ .py เพื่อดูการเปลี่ยนแปลงแบบ live ในเบราว์เซอร์

ภาพหน้าจอของ terminal หลังรันแอป Dash แสดงข้อความสีขาวบนพื้นหลังสีดำพร้อมรายละเอียดต่าง ๆ

แอปของเราในเบราว์เซอร์

GIF ของแผนภูมิแท่งแนวนอนแสดงยอดขายรวมบนแกน x และประเทศบนแกน y กราฟเดียวกับในบทเรียนก่อนหน้า แต่แสดงในเบราว์เซอร์ Chrome พร้อม URL ของเซิร์ฟเวอร์ในแถบที่อยู่ เมาส์วางบนกราฟและคลิกที่แถบ URL เพื่อแสดงว่าเซิร์ฟเวอร์ทำงานอยู่

Dash ใน DataCamp

ความแตกต่างจากแบบฝึกหัด DataCamp อื่น ๆ:
- มีบรรทัด setup ที่ด้านบนของแบบฝึกหัด
- รันทั้งหมดพร้อมกัน (ไม่ใช่ทีละบรรทัด)
- โค้ดยาวกว่า (มาก)
ได้ dashboard ที่ใช้งานได้จริง (ขยายหน้าต่างเพื่อดู!)

ภาพหน้าจอด้านบนของแบบฝึกหัด Dash ที่รันแล้ว แสดงปุ่มสำหรับขยาย HTML output เพื่อดูแอปแบบเต็มจอ

มาฝึกกันเถอะ!

การสร้างแดชบอร์ดด้วย Dash และ Plotly