Need help with varea_stack

Hello everyone,

Recently I have been trying to create a stacked area plot with bokeh, and I have all the code written as shown in the documentation but when I plot it I just get an empty plot with nothing (not even the axes or titles show up). All other types of plots work fine. Is this a bug or a version related issue? I am working in jupyter lab btw…

Thanks in advance!

Hi @Lolopopo,

Can you copy and paste a minimal version of what you’re trying to do so that we can reproduce the error?

So I have this dataframe that is stored in a variable called stackpivot (which is from filtered data):

isotopologue 0 1 2 3
ID
AB_T0_1 1.044900e+07 0.000000 358634.72230 0.0
AB_T0_2 9.916351e+06 0.000000 341824.28890 0.0
AB_T0_3 1.082071e+07 0.000000 363851.58410 0.0
AB_T24_1 4.549589e+06 83858.148820 776159.72860 0.0
AB_T24_2 3.982211e+06 20773.377790 421450.29120 0.0
AB_T24_3 5.067336e+06 59757.875400 609331.62450 0.0
AB_T48_1 4.232127e+05 0.000000 18597.13348 0.0
AB_T48_2 4.514516e+05 0.000000 19649.82340 0.0
AB_T48_3 4.548425e+05 0.000000 16087.77405 0.0
A_T0_1 2.208558e+06 0.000000 70974.99235 0.0
A_T0_2 1.383929e+06 0.000000 88351.64619 0.0
A_T0_3 1.353626e+06 0.000000 69426.04765 0.0
A_T24_1 1.719572e+06 0.000000 603790.36790 0.0
A_T24_2 6.273819e+05 0.000000 532317.09770 0.0
A_T24_3 5.932668e+05 0.000000 444319.97190 0.0
A_T48_1 7.946897e+05 0.000000 571617.23170 0.0
A_T48_2 9.362936e+05 0.000000 585213.18460 0.0
A_T48_3 1.626985e+06 0.000000 640666.84670 0.0
B_T0_1 1.419713e+06 0.000000 66628.00679 0.0
B_T0_2 1.127683e+06 0.000000 90181.98656 0.0
B_T0_3 8.134736e+05 0.000000 67714.80619 0.0
B_T24_1 6.117049e+05 0.000000 208573.57000 0.0
B_T24_2 7.046409e+05 0.000000 256209.33170 0.0
B_T24_3 5.281952e+05 0.000000 261510.76900 0.0
B_T48_1 8.335955e+05 23.436827 523822.85160 0.0
B_T48_2 1.134204e+06 0.000000 571270.52120 0.0
B_T48_3 7.733166e+05 0.000000 476640.02170 0.0
Cont_T0_1 1.157039e+06 0.000000 50101.20318 0.0
Cont_T0_2 1.040915e+06 0.000000 68032.05349 0.0
Cont_T0_3 9.358978e+05 0.000000 47680.98929 0.0
Cont_T24_1 9.335906e+05 0.000000 536125.54840 0.0
Cont_T24_2 9.127426e+05 0.000000 532222.34070 0.0
Cont_T24_3 8.656086e+05 0.000000 505802.09300 0.0
Cont_T48_1 1.927492e+06 0.000000 595076.21350 0.0
Cont_T48_2 1.370422e+06 0.000000 449739.11980 0.0
Cont_T48_3 1.359404e+06 0.000000 527492.00380 0.0

Here is the code:

stackpivot.columns = stackpivot.columns.astype(str)
mysource = bk.models.ColumnDataSource(data=stackpivot)
mystackers = stackpivot.columns.tolist()
colors = cc.glasbey_dark[:len(mystackers)]


TOOLTIPS = [
    ("", "<strong>@ID</strong>"),
    ("isotopologue", "$name"),
    ("ID", "@$name"),
    ]

plot = figure(
width=1000,
height = 600,
tools="save,wheel_zoom,reset,hover",
tooltips=TOOLTIPS
)

plot.varea_stack(mystackers, x = "ID", color=colors, source=mysource)
show(plot)

The ID column is an index in the dataframe. I hope my example is understandable, I am a biochemist so not very fluent with how I should present my question…

Sorry abouut the not so comprehensible dataframe. Any suggestions on how I could present this any better?

The best example is a both a minimal and a reproducible one. Your code above does not have imports and missing the data loading part, for example, so it’s not easily reproducible. And to incorporate the data in a better way, you can just put it right there in the source code and read it as a file with StringIO from the io module.

2 Likes

So I put the data that I am using in a csv file with “;” separator. Here is my example now, it should be much easier to work with:

from bokeh.plotting import figure, output_file, show
import bokeh as bk
import pandas as pd
import colorcet as cc

test_data = pd.read_csv("./example Data bokeh.csv" ,sep=";")

def stacked_area_plot(data, titre, value, width, height, metabolite=None, condition=None, time=None):
    #Commençons par la préparation de data
    bk.plotting.output_file(filename = titre + ".html", title = titre + ".html")
    
    stackdf = data[((metabolite is None) | (data['metabolite'] == metabolite)) & (data['condition'].isin(condition)) & (data['time'].isin(time))]
    stackpivot = stackdf.pivot(index='ID', columns='isotopologue', values=value)
    stackpivot.columns = stackpivot.columns.astype(str)
    mysource = bk.models.ColumnDataSource(data=stackpivot)
    mystackers = stackpivot.columns.tolist()
    colors = cc.glasbey_dark[:len(mystackers)]
   
    
    TOOLTIPS = [
        ("", "<strong>@ID</strong>"),
        ("isotopologue", "$name"),
        ("ID", "@$name"),
        ]

    plot = figure(
    width=width,
    height = height,
    tools="save,wheel_zoom,reset,hover",
    tooltips=TOOLTIPS
    )

    plot.varea_stack(mystackers, x = "ID", color=colors, source=mysource)
    print(stackpivot)
    show(plot)

stacked_area_plot(test_data, "Example", "corrected_area", width=1000, height=600, metabolite = "2_3-PG", condition =["A", "B", "AB", "Cont"], time =["0", "24", "48"]  )

Thanks in advance!

@Lolopopo did you mean to include a link to the file example Data bokeh.csv somewhere?

Oops clearly I am really not good at this! Here is the file I forgot…
Test Data

Tell me if you have any problem accessing it!

I didn’t try to investigate this further after finding this error:

type(test_data['corrected_area'][0])
=> <class 'str'>

You’re trying to use corrected_area as numbers, but Pandas has parsed it as strings. Probably because your decimal separator is a comma and not a dot.

@Lolopopo

As pointed out by @p-himik, your delimited data uses a comma to prescribe the decimal separator. You can handle this with your dataframe import via the decimal argument to read_csv() as follows.

test_data = pd.read_csv("./example Data bokeh.csv" ,sep=";", decimal=',')

You should also be able to get the stacked-area plot to render if you let Bokeh know that your x-axis is a categorical one by specifying the x_range property explicitly when creating the figure in your stacked_area_plot() function as follows

plot = figure(
width=width,
height = height,
tools="save,wheel_zoom,reset,hover",
tooltips=TOOLTIPS,
x_range=stackpivot.index.values
)

Thanks a lot, specifying the x_range as categorical data fixed my problem! :slight_smile:

1 Like