I am trying to show a visualization of several APIs and to color them based on whether they are alive or not. Below is an example of how I accomplished this using HTML.
The following implements – at least conceptually – what you have in HTML using bokeh’s Div model.
It’s just a basic static rendering; there was no context to know if you’re ultimately driving for buttons or other widgets or how things should behave dynamically.
Hopefully this still helps.
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
"""
from bokeh.models import Div
from bokeh.layouts import row
from bokeh.io import show
data = {'data source 1': True,
'data source 2': True,
'data source 3': False,
'data source 4': True,
'data source 5': True}
pal = ['#d62728', '#2ca02c']
lbl = lambda name, alive: """
<div style="width: 100px; height: 33px; background-color: {:}; border: 1px solid #000000;
text-align: center;">
<span style="font-weight: bold; color: #FFFFFF; font-size: 100%">
{:}
</span>
</div>""".format(pal[bool(alive)], name)
dd = [Div(text=lbl(k,v)) for k,v in data.items()]
show(row(dd))