Best Way to Visualize Data

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.

My data looks like this:

{'data source 1': True, 
 'data source 2': True, 
 'data source 3', False, 
 'data source 4':True, 
 'data source 5':True}

How can I recreate a similar visualization using Bokeh? Thanks in advance.

Hi @wtaylorb

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))
2 Likes

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.