Try   HackMD

Run Bokeh in back-end, draw real-time charts to front-end, and make data scientists happy - Ko Ko

歡迎來到 PyCon APAC 2022 共筆

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

共筆入口:https://hackmd.io/@pycontw/2022
手機版請點選上方 按鈕展開議程列表。
Welcome to PyCon APAC 2022 Collaborative Writing
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Collaborative Writing Workplace:https://hackmd.io/@pycontw/2022
Using mobile please tap to unfold the agenda.

Slide link 投影片連結:https://www.slideshare.net/KoKo164/run-bokeh-in-backend-draw-realtime-charts-to-frontend-and-make-data-scientists-happy-2022-pycon-apac
YouTube link 演講影片連結:TBA

Collaborative writing start from below
從這裡開始共筆

About Speaker Ko Ko

  1. Micrsoft AI MVP
  2. Lecturer in large conference, such as COSCUP, .NET Conf, ModernWeb and so on.
  3. Love NFT

Dilemma of data scientists

  1. Boss want data scientists to do everything which are belong to Front-end engineer
  2. Shouldn't do HTML/CSS/JS because you are a data scientist
  3. Learning curve of D3.js is very steep.

Introduction to Bokeh

  1. An interactive chart library which can make chart vivid.
  2. Bokeh can generate chart with HTML/CSS/JS.
  3. Bokeh can generate real-time chart to website.

Live demo key point

  1. Use Azure ML notebook for easier setup.
  2. How to show interactive graph in Jupyter Notebook?
from bokeh.io import output_notebook
output_notebook()
  1. Basic concept of Bokeh and how to draw.
  2. How to export static files
frome bokeh.plotting import save
save(fig1, 'index.html')

Bokeh JS

  1. Another way to develop with Bokeh
  2. Bokeh provides JavaScript library.
  3. API is similar to Python.

Run Bokeh in back-end

  1. Use Bokeh server, cannot run in notebook.
  2. Can connect to database.

Key points of running Bokeh in back-end in Live Demo

  1. Install Bokeh on your server
  2. $ bokeh serve --show myapp.py
  3. bokeh serve --show dash
  4. Structure
    myapp
    |
    ±init.py
    ±app_hooks.py
    ±main.py
    ±request_handler.py
    ±static
    ±theme.yaml
    ±templates
    ±index.html

Life Cycle Hook

  1. If you are using a Bokeh server with a Django server, you need to call django.setup() for each Bokeh server to properly initialize Django for use by Bokeh application code.
  2. API
def on_server_loaded(server_context):
    # If present, this function executes when the server starts.
   
def on_server_unloaded(server_context):
    # If present, this function executes when the server shuts down.
  
def on_session_created(session_context):
    # If present, this function executes when the server creates a session.
    
def on_session_destroyed(session_context):
    # If present, this function executes when the server closes a session.

Integration with other websites

  1. Many way to integrate
  2. Standalone Content
  • HTML files
  • JSON items
  • Components ( div tage targeted)
  1. Bokeh Server Applications
  • App documents (The easiest one)
  • App sessions
  • Standard template (Jinja template)\
from bokeh.embed import server_document
script = server_document("you bokeh server url")
print(script)

# then copy and paste the script to HTML

Security strategy

bokeh serve --auth-module=/path/to/auth.py

bokeh serve --show --allow-websocket-origin=yourdomain.com myapp.py

BOKEH_SIGN_SESSIONS=yes bokeh serve --allow-websocket-origin=yourdomain.com myapp.py

Conclusion

  1. Use Bokeh for interactive chart.
  2. Basic usage of Bokeh.
  3. Use Bokeh in Back-end.
  4. Integrate Bokeh in existing website.

Below is the part that speaker updated the talk/tutorial after speech
講者於演講後有更新或勘誤投影片的部份