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)