Slide in 2022 PyCon APAC Data scientists are always asked to provide charts of data. Drawing a chart is very easy by Matplotlib or Seaborn, and we can get a chart image file. However, sometimes data scientists' boss may ask for charts which are interactable. In this situation, data scientists can use Bokeh to draw charts. Bokeh will generate HTML/JS files with charts, so that you can get an interactive chart in website. But what if data scientists' boss asked a real-time charts that can draw charts dynamically according to the change of data? In this case, we can run Bokeh in back-end and send dynamic charts to front-end. In this presentation, I will share my experience of setup Bokeh in back-end and getting a real-time chart in front-end, so that data scientists can work with web developer easily and happily.

1. Ko Ko, Microsoft AI MVP
2022 PyCon APAC
Run Bokeh in back-end,
draw real-time charts to front-end,
and make data scientists happy

2. About Ko Ko
• Just call me Ko Ko.
• Microsoft AI MVP.
• Lecturer in large conference, such as COSCUP,
.NET Conf, ModernWeb and so on.
• https://www.linkedin.com/in/ko-ko-b12a3474/

3. Contents
1. How data scientists draw charts and their dilemma
2. Introduction to Bokeh
- Compare Bokeh with other library
- How to use Bokeh to draw charts in brief (with demo)
- Bokeh.js
3. Bokeh in back-end (with demo)
- Setup Bokeh back-end step by step
- Integration with other websites
- Security
4. Conclusion

4. How data scientists draw charts and
their dilemma

5. Boss always ask data scientists…
Can I zoom in so I can see clearly this graph?
Can you update graphs real-time?
Can you put these charts to website?
Can you …….
More and more requirements on graphs….

6. Data scientists need develop website?
Developing a website is another job.
Should data scientists spend more time to learn HTML/CSS/JS ?
Learning curve of D3.js is really steep.

7. Introduction to Bokeh

8. Compare Bokeh
with other library
Bokeh focuses on interactive chart.
Bokeh can generate chart with
HTML/CSS/JS.
Bokeh can generate real-time chart
to website.
Bokeh sometimes is slower.

9. Live Deme with Bokeh

10. Key points in Live Demo
Use Azure ML notebook for easier setup.
How to show interactive graph in Jupyter Notebook?
Basic concept of Bokeh.
How to export static files?

11. Bokeh js
Another way to develop with Bokeh
Bokeh provides JavaScript library.
API is similar to Python.
https://docs.bokeh.org/en/latest/docs/user_guide/bokehjs.html

12. Python Bokeh V.S. JavaScript Bokeh

13. Run Bokeh in back-end

14. Run Bokeh in back-end
When you need real-time data from back-end

15. Run Bokeh in back-end
When you need real-time data from Database

16. Live Deme with Bokeh back-end

17. Key points in Live Demo
Install Bokeh on your server
Two ways run Bokeh app
-$ bokeh serve --show myapp.py
-$ bokeh serve --show dash
Sample demo
File directory
myapp
|
+---__init__.py
+---app_hooks.py
+---main.py
+---request_handler.py
+---static
+---theme.yaml
+---templates
+---index.html

18. Life Cycle Hook
You may want to execute code at
specific points of server or session
runtime.
For instance, 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.
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.

19. Integration with other websites
Standalone Content
- HTML files
- JSON items
- Components ( <div> targeted)
Bokeh Server Applications
- App documents (The easiest one)
- App sessions
- Standard template (Jinja template)

20. Some 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

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

22. Thank you!
Ko Ko

25. ICON