LAB: Data Visualization
ลิ้งเนื้อหา Data Visualization
ติดตั้ง Library สำหรับ Data Visualization
pywebio
pandas
plotly
pip install pywebio
pip install pandas
pip install plotly
Get start with pywebio
เริ่มต้นด้วยการสร้างไฟล์โปรแกรมชื่อว่า “webBMI.py” และคัดลอกโค้ดด้านล่าง ซึ่งเป็นโปรแกรมการคำนวณค่า BMI โดยใส่ข้อมูลน้ำหนัก (weight) และ ส่วนสูง (height) ลงบนหา web โปรแกรม
# A simple script to calculate BMI
import pywebio
import plotly.express as px
import pandas as pd
from pywebio.input import input, FLOAT
from pywebio.output import put_text, put_html, put_markdown, put_table
def page():
height = input("Input your height(cm):", type=FLOAT)
weight = input("Input your weight(kg):", type=FLOAT)
BMI = weight / (height / 100) ** 2
top_status = [(16, 'Severely underweight'), (18.5, 'Underweight'),
(25, 'Normal'), (30, 'Overweight'),
(35, 'Moderately obese'), (float('inf'), 'Severely obese')]
for top, status in top_status:
if BMI <= top:
put_markdown('# **Results**')
put_text('Your BMI: %.1f. Category: %s' % (BMI, status))
put_html('<br><br>')
put_markdown('Your BMI: `%.1f`. Category: `%s`' % (BMI, status))
put_html('<hr>')
put_table([
['Your BMI', 'Category'],
[BMI, status],
])
break
html = fig.to_html(include_plotlyjs="require", full_html=False) #convert your figure to html format
put_html(html)
if __name__ == '__main__':
pywebio.start_server(page, port=80) #local default port is 80
ทดลองรันโปรแกรมโดยใส่ คำสั่ง ตามนี้
python webBMI.py
เมื่อรันแล้วไปที่ Browser ใดก็ได้ ใส่ในช่อง url ว่า localhost โดยจาก code ที่รันมาเบื้องต้นจะกำหนด port ที่ใช้งานคือ 80 (default) เว็บ browser จะแสดงให้ใส่ค่า input โดยเริ่มที่ค่า ส่วนสูง กด Submit แล้วใส่ค่า น้ำหนัก กด Submit
เมื่อใส่ค่าครบแล้วโปรแกรมจะแสดงผลการคำนวณค่า BMI
Plot bar graph
สร้างไฟล์ python ใหม่ขึ้นมา1 ไฟล์เพื่อนำมาใส่ code สำหรับการ plot graph สำหรับ library ที่ใช้ในการ plot กราฟมีดังนี้
import plotly.graph_objects as go
import pandas as pd
import numpy as np
ใส่ code ด้านล่างลงไปใน python ไฟล์โดย บรรทัดแรกนั้นจะเป็น path ของไฟล์ .csv ที่เราต้องการจะนำค่าด้านในออกมาพล๊อตเป็นกราฟ
animals=['giraffes', 'orangutans', 'monkeys']
fig = go.Figure(data=[
go.Bar(name='SF Zoo', x=animals, y=[20, 14, 23]),
go.Bar(name='LA Zoo', x=animals, y=[12, 18, 29])
])
fig.show()
จากโค้ดเมื่อทำการรันโปรแกรม python จะได้ผลดังกราฟด้านล่าง
Show your CSV in the table
สร้างไฟล์ python ใหม่ขึ้นมา1 ไฟล์เพื่อนำมาใส่ code สำหรับการแสดงผลค่าที่อยู่ใน csv ไฟล์ในรูปแบบของตาราง
สำหรับ library ที่ใช้ในการ plot ตารางมีดังนี้
import plotly.graph_objects as go
import pandas as pd
import numpy as np
ใส่ code ด้านล่างลงไปใน python ไฟล์โดย บรรทัดแรกนั้นจะเป็น path ของไฟล์ .csv ที่เราต้องการจะนำค่าด้านในออกมาพล๊อตเป็นตาราง
df = pd.read_csv('C:/Documents/PywebIO/dataset/move/move_2.csv')
fig = go.Figure(data=[go.Table(
header=dict(values=list(df.columns),
fill_color='paleturquoise', #set header color
align='left'),
cells=dict(values=[df.timestamp,df.acc_x, df.acc_y, df.acc_z], #add table element here
fill_color='lavender', #set table color
align='left'))
])
fig.show()
จากโค้ดเมื่อทำการรันโปรแกรม python จะได้ผลดังเป็นตารางด้านล่าง
จากตารางด้านบนจะเห็นว่ามีค่าด้านหลังที่ยังไม่มีการใส่ค่าลงไป ให้แก้ไข code และเก็บภาพผลการรันใหม่อีกครั้งเพื่อให้ตารางเต็มครบถ้วน
กรอก code ที่แก้ไข
จากโค้ดด้านบนเมื่อทำการรันโปรแกรม python จะได้ผลดังเป็น ……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………
Plot graph with a CSV file
สร้างไฟล์ python ใหม่ขึ้นมา1 ไฟล์เพื่อนำมาใส่ code สำหรับการ plot graph
สำหรับ library ที่ใช้ในการ plot กราฟมีดังนี้
import plotly.graph_objects as go
import pandas as pd
import numpy as np
ใส่ code ด้านล่างลงไปใน python ไฟล์โดย บรรทัดแรกนั้นจะเป็น path ของไฟล์ .csv ที่เราต้องการจะนำค่าด้านในออกมาพล๊อตเป็นกราฟ
df = pd.read_csv('C:/Documents/PywebIO/dataset/move/move_1.csv')
fig = go.Figure()
# Add traces
fig.add_trace(go.Scatter(x=df['timestamp'], y=df['acc_x'],
mode='lines',
name='acc_x'))
fig.show()
จากโค้ดเมื่อทำการรันโปรแกรม python จะได้ผลดังกราฟด้านล่าง
เราสามารถเพิ่มกราฟ หลายเส้นเข้าไปได้ ตามตัวอย่างด้านล่าง
# Add traces
fig.add_trace(go.Scatter(x=df['timestamp'], y=df['acc_x'],
mode='lines',
name='acc_x'))
fig.add_trace(go.Scatter(x=df['timestamp'], y=df['acc_y'],
mode='lines',
name='acc_y'))
fig.add_trace(go.Scatter(x=df['timestamp'], y=df['acc_z'],
mode='lines',
name='acc_z'))
fig.show()
ใส่ผลการพล๊อตจำนวนหลายเส้น
……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………
Update: May 2023
Author: Thanaluk Pranekunakol (AIC-Researcher)
Last updated
Was this helpful?