question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Better control over data/screen aspect ratios needed for large circles

See original GitHub issue

UPDATE SUMMARY

Te underlying browser API accepts one radius parameter (in pixels). If data/screen aspect ratios are not matched, then the the data-space radius in different dimensions will not match, because “10” in data units will be a different number of pixels in the x- vs y-dimensions. This can also cause issues for hit testing. Things that can be done:

  • using something that scales in both dimensions (e.g. p.ellipse instead of circles)

  • make the aspect ratios match up by controlling padding, labels size and orientation, and canvas size and data ranges explicitly.

Making the aspect is a slight chore currently, but still doable. There is an open issue to make controlling aspects ratios easier to do.

In the event different aspect ratios are necessary, then this situation is mathematically unavoidable with canvas circles, and so they may simply not be appropriate to use in that case (i.e. use ellipses instead)


As far as I can see, the issue is caused by a large (read: orders of magnitude) scale difference between the x and y coordinates. Here’s an example, modified from hover.py, that triggers the issue in 0.4.2:

from __future__ import division

import numpy as np
from six.moves import zip
from collections import OrderedDict
from bokeh.plotting import *
from bokeh.objects import HoverTool, Range1d

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

x = range(0, 1000, 10)
y = range(10000,20000,100) # <--

radii = [5]*100
colors = ['black']*100

source = ColumnDataSource(
    data=dict(
        x=x,
        y=y,
        radius=radii,
        colors=colors,
    )
)

output_file("hover.html")

hold()

circle('x', 'y', radius='radius', source=source, tools=TOOLS,
       fill_color='colors', fill_alpha=0.6,
       line_color=None, Title="Hoverful Scatter")


# We want to add some fields for the hover tool to interrogate, but first we
# have to get ahold of the tool. This will be made easier in future releases.
hover = [t for t in curplot().tools if isinstance(t, HoverTool)][0]

hover.tooltips = OrderedDict([
    ("index", "$index"),
    ("(x,y)", "($x, $y)"),
    ("radius", "@radius"),
])

show()  # open a browser

Issue Analytics

  • State:closed
  • Created 9 years ago
  • Comments:13 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
bryevdvcommented, Jun 7, 2017

@leopd The developer’s guide is here:

http://bokeh.pydata.org/en/latest/docs/dev_guide.html

Please feel free to help out, some of us are already working at our limits.

0reactions
bryevdvcommented, Sep 14, 2020

Explicitly for everyone who needs to see it: #6784 added a match_aspect option that can be set to True when needed for “large” circles.

Read more comments on GitHub >

github_iconTop Results From Across the Web

The Complete Guide to Understanding Video Aspect Ratios
Wondering what video aspect ratio is the best for broadcasting your content? This guide to aspect ratios covers resolution to common ratios ...
Read more >
Understanding aspect ratios - Squarespace Help Center
An aspect ratio is a proportional relationship between an image's width and height. Essentially, it describes an image's shape.
Read more >
Work with aspect ratios in Premiere Pro - Adobe Support
An aspect ratio specifies the ratio of width to height. Video and still picture frames have a frame aspect ratio.
Read more >
Choosing the Right Videowall Shape and Size - Extron
Deciding how large a videowall should be is more than a matter of determining how many display devices are required to fill a...
Read more >
Add multiple aspect ratios to templates in Motion - Apple Support
The most common aspect ratios are 4:33 (also referred to as standard, 4 x 3, or 1.33:1) and 16:9 (widescreen, 16 x 9,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found