กราฟและ Figure ใน Plotly

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

Alex Scriven

Data Scientist

Dash คืออะไร?

ไลบรารี Python สำหรับสร้างเว็บแอปพลิเคชันแบบโต้ตอบได้

ข้อดี:

ฟรี! ต่างจาก Tableau หรือ PowerBI
ใช้ JavaScript ได้ผ่านโค้ด Python
โค้ดน้อยกว่า web application framework

Plotly และ Dash

ทำงานร่วมกันได้ดี

Dash: สร้าง interactive dashboard ที่มีกราฟ Plotly หลายชิ้น
ดูตัวอย่างนี้
- รูปภาพ ข้อความ และกราฟ
- ดูซอร์สโค้ด

ภาพหน้าจอตัวอย่าง financial dashboard ที่มีกราฟหลากหลายประเภท ข้อความ ตาราง และรูปภาพ โดยมี line chart พร้อม hover details เป็นองค์ประกอบหลัก

Plotly คืออะไร?

ทบทวน Plotly เพื่อเน้นไปที่ Dash
ไลบรารี Python สำหรับสร้างกราฟ interactive ที่ทันสมัย
- ครอบ JavaScript ไว้แต่เขียนโค้ดด้วย Python
สร้างกราฟด้วย plotly.express

ดูเพิ่มเติมได้ที่ Introduction to Data Visualization with Plotly in Python

ข้อมูล e-commerce ของเรา

ชุดข้อมูลยอดขาย e-commerce

รายละเอียด:
- หมวดหมู่สินค้า (Major, Minor) + คำอธิบาย
- ราคาต่อหน่วย จำนวน (+ OrderValue)
- ประเทศ
- ปี-เดือนที่ขาย

ตัวอย่างข้อมูลยอดขาย e-commerce

Line chart ด้วย plotly.express

import plotly.express as px

line_graph = px.line(

  data_frame=ecom_sales,
  x='Year-Month',
  y='Total Sales ($)', 
  title='Total Sales by Month')

line_graph.show()

GIF ของ line chart แสดงยอดขายรายเดือน โดยเมื่อวางเมาส์บนจุดข้อมูลจะแสดงเดือนและยอดขาย

Bar chart ด้วย plotly.express

bar_fig = px.bar(
  data_frame=ecom_sales,
  x='Total Sales ($)',
  y='Country',
  title='Total Sales by Country',

  orientation='h')

bar_fig.show()

GIF ของ horizontal bar chart แสดงยอดขายรวมบนแกน x และประเทศบนแกน y พร้อมการแสดงข้อมูลเมื่อวางเมาส์บนแถบ

การปรับแต่งกราฟ Plotly

เปลี่ยนความกว้างของแถบใน bar graph:

bar_fig.update_layout({'bargap': 0.5})

bar_fig.show()

ดูเพิ่มเติมได้ที่ เอกสาร Plotly

ภาพ horizontal bar chart แสดงยอดขายรวมบนแกน x และประเทศบนแกน y เหมือนสไลด์ก่อนหน้า แต่ช่องว่างระหว่างแถบแคบลง

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

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