# LAB: Data Visualization

#### ลิ้งเนื้อหา [Data Visualization ](https://docs.aic-eec.com/artificial-intelligence-ai/data-analytics/data-analytics)

### ติดตั้ง Library สำหรับ Data Visualization

* **pywebio**
* **pandas**
* **plotly**

```python
pip install pywebio
pip install pandas
pip install plotly
```

### **Get start with pywebio**

          เริ่มต้นด้วยการสร้างไฟล์โปรแกรมชื่อว่า “webBMI.py” และคัดลอกโค้ดด้านล่าง ซึ่งเป็นโปรแกรมการคำนวณค่า BMI โดยใส่ข้อมูลน้ำหนัก (weight) และ ส่วนสูง (height) ลงบนหา web โปรแกรม

```python
# 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&#x20;

![](https://lh5.googleusercontent.com/mopW8_ZIUjM4jGoj7ZdXt2l-Wcru-LLl5-E0mnbXvaxX4TOmZDMj7W2t2Sy-FbZlX_qPlZA63jjnA7ZuLgpgVnKK1xN5iLJs5ySQaLJ04-CeAoy7YrHXplKo0cgoyEZ_CpYvJFre)

![](https://lh4.googleusercontent.com/GFSEOqk0tIUEpxqMuB_mmCPaUb3dElOYJshg6g3HA3q-m85bbXDDDWK3SmLvk8zjWwPlkf933dFlS9T8atJOjEk8cqjEPF4w4mBXd5ws2o9RMZZJnK-Fx8KICwcC--mbNaW0m84W)

เมื่อใส่ค่าครบแล้วโปรแกรมจะแสดงผลการคำนวณค่า BMI

![](https://lh3.googleusercontent.com/mJbGEVv5b-o4UqcrJf11Mm93rKBnmfHYBsQ451cHULqrI2yKHIb48RW3-egH6sfm4sS7iRfwZDBrN7JekyAxAmZghfIeovahZlMKTL5dp3mvXlLNZYZHYLltT35aF86PubSovizr)

### **Plot bar graph**

สร้างไฟล์ python ใหม่ขึ้นมา1 ไฟล์เพื่อนำมาใส่ code สำหรับการ plot graph สำหรับ library ที่ใช้ในการ plot กราฟมีดังนี้

```python
import plotly.graph_objects as go
import pandas as pd
import numpy as np
```

ใส่ code ด้านล่างลงไปใน python ไฟล์โดย บรรทัดแรกนั้นจะเป็น path ของไฟล์ .csv ที่เราต้องการจะนำค่าด้านในออกมาพล๊อตเป็นกราฟ

```python
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 จะได้ผลดังกราฟด้านล่าง

![](https://lh3.googleusercontent.com/NoDEJhK10S67_mso2fVk6CdBJrZ2ezOpcan8olMogO3whgeNm4nij_4XrRhZxgWsQCl08wL692EsJER23qRGV1SP0q-8rR1EXGt0Oubacj_Gr6zzhg3_ofmo-0aQ5Qlm_3ZiQ5Ha)

### Show your CSV in the table

สร้างไฟล์ python ใหม่ขึ้นมา1 ไฟล์เพื่อนำมาใส่ code สำหรับการแสดงผลค่าที่อยู่ใน csv ไฟล์ในรูปแบบของตาราง

สำหรับ library ที่ใช้ในการ plot ตารางมีดังนี้

```python
import plotly.graph_objects as go
import pandas as pd
import numpy as np
```

ใส่ code ด้านล่างลงไปใน python ไฟล์โดย บรรทัดแรกนั้นจะเป็น path ของไฟล์ .csv ที่เราต้องการจะนำค่าด้านในออกมาพล๊อตเป็นตาราง

```python
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 จะได้ผลดังเป็นตารางด้านล่าง

![](https://lh3.googleusercontent.com/rQW3EiHCzVTQibl60Nk_rGziC02B0zkYChYlqSx5p8hzE26vBZ_flXVJ_kqVEOuxRjG51iW8Z2wlbb-UN-zudo7KKdIrOyIN1UsTVJl3NVLk2_1t7paCewn321gxFxLppAcCyke0)

จากตารางด้านบนจะเห็นว่ามีค่าด้านหลังที่ยังไม่มีการใส่ค่าลงไป ให้แก้ไข code และเก็บภาพผลการรันใหม่อีกครั้งเพื่อให้ตารางเต็มครบถ้วน

กรอก code ที่แก้ไข

```
 
```

จากโค้ดด้านบนเมื่อทำการรันโปรแกรม python จะได้ผลดังเป็น ……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………

### **Plot graph with a CSV file**

สร้างไฟล์ python ใหม่ขึ้นมา1 ไฟล์เพื่อนำมาใส่ code สำหรับการ plot graph&#x20;

สำหรับ library ที่ใช้ในการ plot กราฟมีดังนี้

```python
import plotly.graph_objects as go
import pandas as pd
import numpy as np
```

ใส่ code ด้านล่างลงไปใน python ไฟล์โดย บรรทัดแรกนั้นจะเป็น path ของไฟล์ .csv ที่เราต้องการจะนำค่าด้านในออกมาพล๊อตเป็นกราฟ

```python
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 จะได้ผลดังกราฟด้านล่าง

![](https://lh6.googleusercontent.com/CkZvPB95WPf6YO12voCTkvQS_IDPIr2y0eeevzpDgOciQz5NdZV1HWS8LOVvYF-Ay3Hf0O8fQK3lifzFQwSf0TyWOc5ezageCTOfga8y6OWrYUw_92wdPg9tN3YjQfzOftF9hx1O)

เราสามารถเพิ่มกราฟ หลายเส้นเข้าไปได้ ตามตัวอย่างด้านล่าง

```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)