การสร้าง Data Visualization ด้วย Dash ตอนที่ 1

ก่อนหน้านี้การสร้าง Web Data Visulization อาจต้องความรู้ด้าน computer programming language มากกว่า 1 ภาษา แต่ปัจจุบันเปลี่ยนไป มี platform เกิดขึ้นหลาย platform ส่งผลให้การทำงานง่ายขึ้น หนึ่งใน platform เหล่านั้นคือ Dash[1]

Dash เป็น dual license (ในข้อเขียนจะใช้ opensource license) เขียนด้วย Python (ปัจจุบันรองรับ R และ Julia) ใช้หลักการของ declarative programming [2] คือผู้พัฒนางานบอกให้ระบบทราบว่าต้องการอะไรบ้าง ลำดับการเสนอผลลัพธ์เป็นอย่างไร โดยไม่ต้องบอกรายละเอียด การคำนวณต่างๆ ระบบจะเป็นผู้กระทำเอง หลักการนี้ช่วยให้ผู้พัฒนาไม่จำเป็นต้องเรียนรู้การใช้ภาษาคอมพิวเตอร์มากเกินไป ยกตัวอย่างกรณีการใช้งาน Dash ใช้ภาษา Python ภาษาเดียว ไม่จำเป็นต้องใช้ javascript , CSS, HTML (จำเป็นต้องมีความรู้บ้างเพื่อให้เข้าใจโครงสร้างของงาน)

องค์ประกอบหลักในการทำงานของ Dash มี 3 ส่วนคือ

Flask ทำหน้าที่ของ web server [3]
Plottly เป็น interactive graphing python และ javascript library [4]
ReactJs เป็น front end javascript library สำหรับงาน user interface [5]

มีตัวอย่างงานที่พัฒนาด้วย Dash framework มากมาย ดูตัวอย่างได้จาก gallery ของ Dash

รูปที่ 1 ตัวอย่างานของ Uber ที่ใช้ Dash

การติดตั้ง

Hardware :

Raspberry Pi 3 model B ระบบปฎิบัติการ Raspbian buster (debian 10)

สร้าง Virtual environment (venv):

การสร้าง virtual environment อาจไม่จำเป็น แต่หากต้องการให้ระบบนี้แยกออกเป็นอิสระเพื่อจัดการเรื่อง package ง่ายก็ควรจะทำ กรณีที่ไม่ต้องการสร้าง venv ข้ามไปขั้นตอนต่อไปเลย


$ mkdir dash_proj
$ python3 -m vevn dash_proj
$ cd dash_proj
$ source bin/activation

หมายเหตุ หากไม่สามารถใช้คำสั่ง venv ได้ ต้องทำการติดตั้งก่อน ด้วยคำสั่ง sudo pip3 install virtualenv

Install packages:


(dash_proj) $ python -m pip install dash pandas

เนื่องจากกรอบของงานในคราวนี้คือการสร้าง data visualization ซึ่งต้องอาศัย data analysis package และในที่นี้เลือกใช้ pandas [6]

Dash application structure

Packages

ในการสร้าง application เรามักใช้ packages หลัก 3 packages คือ

Dash: เป็น back bone ของ application
Dash Core Components: บรรจุ interactive component เช่น drop down list, date selector ฯล
Dash HTML Component: บรรจุ component ดูแลการใช้ HTML tag เช่น div, h1 ฯล

นอกจากนี้จะเป็น package ที่ผู้พัฒนาต้องพิจารณาเองว่าจะใช้อะไรเพิ่ม

Code structure

โครงสร้างโดยทั่วไปแบ่งได้เป็น 5 ส่วนดังนี้

Part	Python code
1.Libraries	`import dash import dash_core_components as dcc import dash_html_components as html import plotly.express as px import pandas as pd`
2. Initiation	`app = dash.Dash(__name__)`
3. Layout ออกแบบหน้าตาของ application	`app.layout = html.Div(children=[ html.H1(children='Hello Dash'), html.Div(children=''' Dash: A web application framework for Python. '''), dcc.Graph( id='example-graph', figure=fig ), ... ])`
4. Callback	`@app.callback(Output,Input) def what2do(): ....`
5. Running	`if __name__ == '__main__': app.run_server('0.0.0.0',debug=True)`

Hello World App

Application แรกนี้ใช้โครงสร้างแบบที่กล่าวมาข้างต้นยกเว้นในส่วน callback functions

    
import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div(children=[
    html.H1(children='Hello World')    
])

if __name__ == '__main__':
    app.run_server('0.0.0.0',debug=True)

เขียน Code ตามตัวอย่าง บันทึกไว้ในไฟล์ชื่อ hello_world.py (เปลี่ยนได้) แล้วทดลองใช้งานด้วยคำสั่ง

    
(dash_proj) $ python hello_world.py

บนหน้าจอจะปรากฏดังรูปที่ 2

รูปที่ 2

เปิด web browser แล้วใช้ URL "http://[ip address of raspberry pi]:8050" จะได้ดังรูปที่ 3

รูปที่ 3

ถ้าเปิด source code ของหน้าเว็บนี้จะได้ดังรูปที่ 4

รูปที่ 4

จะเห็นได้ว่าสิ่งที่เห็นบนหน้าเว็บไม่สอดคล้องกับ source code ที่เห็น หน้าที่นี้เป็นส่วนของ ReactJs และ Flask ทำงานร่วมกันสร้างเนื้อหาบน web page ขึ้นมาแบบ real time ขั้นตอนต่อจากนี้หากต้องการหยุดการทำงานของ application ก็เพียงกด Ctrl-C

เนื้อหาในตอนนี้ได้แนะนำให้รู้จักกับ Dash ในภาพรวม องค์ประกอบพื้นฐาน โครงสร้างหลักในการสร้าง Dash application การใช้งานในลักษณะของ web application เบื้องต้น การใช้งานที่มากกว่าจะได้กล่าวถึงในตอนต่อๆ ไป