Python Bokeh基本分组vbar-简化x轴

Question

The x-axis is unreadably cluttered for a grouped vbar plot for some very simple data, & I can't find how to fix it.

The intent is to show on a single plot the # of tweets/hr over both the lifetime and last 90 days of a twitter acct.

I already have a working version for just the lifetime data which produces a suitably simple/tidy output.

For the grouped version I want show a simple ticker like the single version & use a colour legend to indicate data label for columns.

from bokeh.io import show, output_file, export_png
from bokeh.plotting import figure
from bokeh.models import ColumnDataSource, FactorRange, Label, Title
from bokeh.transform import factor_cmap    

data = {'hours_active': {0: 11, 1: 0, 2: 0, 3: 0, 4: 0, 5: 2, 6: 15, 7: 27, 8: 75, 9: 96, 10: 205, 11: 278, 12: 241, 13: 238, 14: 236, 15: 184, 16: 232, 17: 164, 18: 211, 19: 236, 20: 197, 21: 199, 22: 253, 23: 97}, 'ninety_days_hours_active': {0: 0, 1: 0, 2: 0, 3: 0, 4: 0, 5: 2, 6: 15, 7: 23, 8: 68, 9: 78, 10: 94, 11: 111, 12: 135, 13: 80, 14: 109, 15: 102, 16: 94, 17: 58, 18: 106, 19: 94, 20: 110, 21: 98, 22: 89, 23: 2}}

    hours = [str(i) for i in range(0, 24)]
    days =  ['all', '90']

    data = {'hours' : hours, 'all':list(data['hours_active'].values()), '90': list(data['ninety_days_hours_active'].values())}

    x = [ (str(hour), day) for hour in hours for day in days ]

    counts = sum(zip(data['all'], data['90']), ())

    colors = ['#ffff1a', '#191971']

    source = ColumnDataSource(data=dict(x=x, counts=counts))

    p = figure(x_range=FactorRange(*x), plot_width=500, plot_height=500, title="Tweets All/Last 90 Days", )

    p.toolbar_location = None
    p.xgrid.grid_line_color = None
    p.min_border = 40
    p.axis.axis_line_width = 2
    p.y_range.start = 0
    p.vbar(x='x', top='counts', width=0.9, source=source, fill_color=factor_cmap('x', palette=colors, factors=days, start=1, end=2))

    show(p)

Output from above code:

Example with suitable x-axis

I've chosen to avoid using pandas/dataframes because I want to keep the dependencies as minimal as I can & because it's another package to learn (I'm quite stupid & not a programmer); The data is a subdict of another dictionary that's being used in a bigger program.

But I am not locked into the above code if there is a neater simpler way to do it.

---

UPDATE

The suggestion to use dodges was just right. The following code produces almost what I want, but see attached image as a couple of things are not rendering exactly as I'd wish. I haven't bothered with a legend just yet.

from bokeh.io import show, output_file
from bokeh.models import ColumnDataSource
from bokeh.plotting import figure
from bokeh.transform import dodge

with open('dsd_dict') as d:
    ddict = json.load(d)

hours = [str(i) for i in range(0, 24)]  # 'fruits'

data = {'hours' : hours, 'all':list(ddict['hours_active'].values()), '90': list(ddict['ninety_days_hours_active'].values()), '30': list(ddict['thirty_days_hours_active'].values())}

colors = ['#ffff1a', '#338dff', '#191971', 'firebrick']

source = ColumnDataSource(data=data)

p = figure(x_range=hours, plot_width=600, plot_height=500, title="Tweets All/Last 90/30 Days",  toolbar_location=None, tools="")

p.xgrid.grid_line_color = None
p.xgrid.grid_line_color = None
p.min_border = 40
p.y_range.start = 0

# X-AXIS SETTINGS #
p.xaxis[0].formatter = PrintfTickFormatter(format="%'02s")
p.xaxis.axis_label = '24 Hour Clock - UTC/GMT'
p.xaxis.axis_label_standoff = 10
p.xaxis.axis_label_text_font = 'dejavu sans'
p.xaxis.axis_label_text_font_size = '8pt'
p.xaxis.axis_label_text_color = 'black'
p.xaxis.axis_label_text_font_style = 'bold'

r = p.vbar(x=dodge('hours', 0.0, range=p.x_range), top='all', width=0.33, source=source, color=colors[0])

glyph = r.glyph
glyph.line_color = "black"
glyph.line_dash = 'solid'
glyph.line_width = 0.1

p.vbar(x=dodge('hours', 0.33, range=p.x_range), top='90', width=0.33, source=source, color=colors[1])

p.vbar(x=dodge('hours', 0.66, range=p.x_range), top='30', width=0.33, source=source, color=colors[3])

show(p)

Output from updated code

As we can see, the RHS end is crushed and doesn't show the third bar fully, and the columns don't locate vertically over the x-axis ticks clearly enough. I'd prefer them located between ticks so it's clear that the values are from (eg) 0100 - 0200.

I'm guessing I just need to look into how to tweak the offsets for that, but any further pointers would be most welcome

Answer 1

One option would be to rotate the tick labels:

p.xaxis.major_label_orientation = "vertical" # or value in radians works too

But is sounds like you don't want the nested hierarchical axis at all. In that case, you should use a Visual Dodge instead, so that there is only one level of labels on the axis. Here is a complete example:

from bokeh.core.properties import value
from bokeh.io import show, output_file
from bokeh.models import ColumnDataSource
from bokeh.plotting import figure
from bokeh.transform import dodge

fruits = ['Apples', 'Pears', 'Nectarines', 'Plums', 'Grapes', 'Strawberries']
years = ['2015', '2016', '2017']

data = {'fruits' : fruits,
        '2015'   : [2, 1, 4, 3, 2, 4],
        '2016'   : [5, 3, 3, 2, 4, 6],
        '2017'   : [3, 2, 4, 4, 5, 3]}

source = ColumnDataSource(data=data)

p = figure(x_range=fruits, y_range=(0, 10), plot_height=250, title="Fruit Counts by Year",
           toolbar_location=None, tools="")

p.vbar(x=dodge('fruits', -0.25, range=p.x_range), top='2015', width=0.2, source=source,
       color="#c9d9d3", legend=value("2015"))

p.vbar(x=dodge('fruits',  0.0,  range=p.x_range), top='2016', width=0.2, source=source,
       color="#718dbf", legend=value("2016"))

p.vbar(x=dodge('fruits',  0.25, range=p.x_range), top='2017', width=0.2, source=source,
       color="#e84d60", legend=value("2017"))

p.x_range.range_padding = 0.1
p.xgrid.grid_line_color = None
p.legend.location = "top_left"
p.legend.orientation = "horizontal"

show(p)