White gaps appear in bokeh heatmap

Question

I'm reading in some json data and plotting a heatmap in bokeh:

from math import pi
import pandas as pd
import json

from bokeh.io import show
from bokeh.models import LinearColorMapper, BasicTicker, LogTicker, LogColorMapper, PrintfTickFormatter, ColorBar
from bokeh.plotting import figure

# initialise data of lists. 
#data1 = {'epoch':[63745131000000, 63745131000000, 63745131100000,63745131100000,63745131100000,63745131200000,63745131200000], 'energy':[1.06811, 1.22078, 1.59495, 1.82245,4810.75,1.06811,1.22078],'value':[3981.9308143034305, 2868.5202872178324, 1330.887696894385, 745.6847248644897,0.0,2753.6746333566575,1625.3895394735046]} 

#print(type(data1['epoch'][0]))
#print(type(data1['energy'][0]))
#print(type(data1['value'][0]))

with open('timeseries.json', 'r') as f:
    json_file = json.load(f)

data = json_file['data']

epochs = list(map(int, [item[0] for item in data]))
energies = list(map(float, [item[3] for item in data]))
electrons = list(map(float, [item[4] for item in data]))    

data = {'epoch':epochs, 'energy':energies,'value':electrons}

# Creates pandas DataFrame. 
df = pd.DataFrame(data)
zeros = df[ df['value'] == 0.0 ].index
df.drop(zeros , inplace=True)

# print the data 
print(df)

# this is the colormap from the original NYTimes plot
colors = ['#00007F', '#0000ff', '#007FFF', '#00ffff', '#7FFF7F', '#ffff00', '#FF7F00', '#ff0000', '#7F0000']
#mapper = LinearColorMapper(palette=colors, low=df.value.min()-1, high=df.value.max()+1)
mapper = LogColorMapper(palette=colors, low=df.value.min(), high=df.value.max())

TOOLS = "hover,save,pan,box_zoom,reset,wheel_zoom"

epochs = list(df.epoch.drop_duplicates())
energies = list(df.energy.drop_duplicates())

p = figure(title="Solo_LL02_swa-eas-NM3D-psd",
           plot_width=800,
           plot_height=500,
           x_axis_location="below", y_axis_type="log",
           tools=TOOLS, toolbar_location='below',
           tooltips=[('epoch', '@epoch'), ('energy', '@energy'), ('value', '@value')])

#p.xaxis.ticker = epochs
#p.yaxis.ticker = energies

p.grid.grid_line_color = None
p.axis.axis_line_color = None
p.axis.major_tick_line_color = None
p.axis.major_label_text_font_size = "5pt"
p.axis.major_label_standoff = 0
p.xaxis.major_label_orientation = pi / 3

p.y_range.range_padding = 0
p.x_range.range_padding = 0

p.yaxis.axis_label = "Energy (eV)"
p.yaxis.axis_label_standoff = 30

p.xaxis.axis_label = "Spacecraft Elapsed Time (Ticks)"
p.xaxis.axis_label_standoff = 30

p.rect(x="epoch", y="energy", width=100000, height=1, dilate=True,
       source=df,
       fill_color={'field': 'value', 'transform': mapper},
       line_color=None)

color_bar = ColorBar(color_mapper=mapper, major_label_text_font_size="5pt",
                     ticker=LogTicker(desired_num_ticks=len(colors)),
                     label_standoff=6, border_line_color=None, location=(0, 0), orientation="vertical")

p.add_layout(color_bar, 'right')

show(p)

The y axis is log scale, so I'm using the y_axis_type as log and also trying to use a LogTicker with a LogColorMapper. However I end up with white spaces in parts of the heat map. I tried using the dilate=True property to solve this.

If I play with the height parameter of the rect I get different results.

The test I have looks a like so:

                epoch     energy        value
0      63745131000000    1.06811  3981.930814
1      63745131000000    1.22078  2868.520287
2      63745131000000    1.39537  1330.887697
3      63745131000000    1.59495   745.684725
4      63745131000000    1.82245   212.460348
5      63745131000000    2.08283    91.086408
6      63745131000000    2.38070    67.345788
7      63745131000000    2.72045    27.737441
8      63745131000000    3.10905    16.591390
9      63745131000000    3.55357    10.814430
10     63745131000000    4.06097     4.151903
11     63745131000000    4.64113     0.965110
12     63745131000000    5.30420     0.593733
13     63745131000000    6.06148     0.115238
14     63745131000000    6.92755     0.007410
15     63745131000000    7.91735     0.004325
16     63745131000000    9.04833     0.000983
18     63745131000000   11.81860     0.000952
19     63745131000000   13.50740     0.001077
20     63745131000000   15.43710     0.000139
32     63745131000000   76.64060  2698.687499
33     63745131000000   87.58920  2325.844355
34     63745131000000  100.10200   963.683512
35     63745131000000  114.40200   344.753312
36     63745131000000  130.74500   182.813743
37     63745131000000  149.42300   187.305783
38     63745131000000  170.76900    30.335985
39     63745131000000  195.16500    24.849140
40     63745131000000  223.04600     9.050020
41     63745131000000  254.90900     9.239129
...               ...        ...          ...
62540  63745142300000    5.30420     0.745292
62541  63745142300000    6.06148     0.203581
62542  63745142300000    6.92755     0.035394
62543  63745142300000    7.91735     0.011896
62544  63745142300000    9.04833     0.001618
62545  63745142300000   10.34090     0.000754
62546  63745142300000   11.81860     0.000414
62547  63745142300000   13.50740     0.000049
62548  63745142300000   15.43710     0.000098
62549  63745142300000   17.64220     0.000237
62560  63745142300000   76.64060  2120.544075
62561  63745142300000   87.58920  2403.434099
62562  63745142300000  100.10200  1094.967206
62563  63745142300000  114.40200   328.758205
62564  63745142300000  130.74500   336.424911
62565  63745142300000  149.42300   137.938972
62566  63745142300000  170.76900    58.427662
62567  63745142300000  195.16500    30.303207
62568  63745142300000  223.04600    11.482880
62569  63745142300000  254.90900     4.709684
62570  63745142300000  291.32400     3.075825
62571  63745142300000  332.94300     0.983649
62572  63745142300000  380.50600     0.841412
62573  63745142300000  434.86400     0.111885
62574  63745142300000  496.98700     0.002973
62575  63745142300000  567.98600     0.005794
62576  63745142300000  649.12600     0.000225
62577  63745142300000  741.85800     0.000929
62578  63745142300000  847.83900     0.000639
62579  63745142300000  968.95900     0.000235

This is with the line height at 1

This is with the line height at 100

I'm not sure if I should calculate the height based on the ranges in the data. For the x axis (time) the resolution is fixed.

Any help appreciated Thanks

Answer 1

HTML canvas fill operations are for inside shapes, and the line/stroke operation is around the border, which overlaps half-inside and half-outside the shape. By setting line_color=None you are explicitly telling the underlying canvas to leave that space in between. You probably want to set instead:

color={'field': 'value', 'transform': mapper}

By using color that will set both fill_color and line_color to be the same thing.

Note also that there are convenience APIs for setting up various transforms on columns without constructing those dicts, eg

https://docs.bokeh.org/en/latest/docs/reference/transform.html#bokeh.transform.linear_cmap