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.

Cannot fix aspect ratio and remove padding simultaneously

See original GitHub issue

I am trying to plot an image using the xarray accessor, but can’t seem to be able to specify the aspect ratio and also remove padding simultaneously.

Demonstration:

import xarray as xr
import hvplot.xarray  # noqa

air_ds = xr.tutorial.open_dataset('air_temperature').load()
air2d = air_ds.air.sel(time='2013-06-01 12:00')

default behaviour

air2d.hvplot.image()

bokeh_plot

air2d.hvplot.image().opts(data_aspect=True)

bokeh_plot (1)

air2d.hvplot.image(padding=0)

bokeh_plot (2)

air2d.hvplot.image(padding=0).opts(data_aspect=True)

bokeh_plot (3)

I would have expected the last figure not to have any padding at the sides.

This shows that I can’t currently choose my axis to have the same aspect ratio as the data, and also remove all padding simultaneously. I don’t know whether this is a bokeh problem or a hvplot problem, but I thought I would raise it here first.

I also tried setting xlim but that did not remove the padding either.

Issue Analytics

  • State:open
  • Created a year ago
  • Comments:8 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
Hoxbrocommented, Oct 12, 2022

Two things that might work:

  1. Run air2d.hvplot.image(data_aspect=True)
  2. Manipulate the frame_width / frame_height to match the ratio of data_aspect.
frame_height = 300
data_aspect = 1

ratio = (air2d.lon.max() - air2d.lon.min()).values /  (air2d.lat.max() - air2d.lat.min()).values
frame_width = int(ratio * frame_height / data_aspect)
air2d.hvplot.image().opts(data_aspect=data_aspect, frame_width=frame_width, frame_height=frame_height)

image

0reactions
jbednarcommented, Oct 14, 2022

Oh! I didn’t spot that in your response! Ah, this is an interaction between hvPlot and HoloViews, then. I think hvPlot sets the height and width when it hands things over to HoloViews, and once that’s happened, HoloViews sees data_aspect, height, and width as all having been specified by the user, and thus tries to achieve all three instructions. When data_aspect is given to hvPlot directly, it can take effect before height and width are given values in hvPlot.

So it’s great that there is a reasonable way to achieve the desired behavior, but it’s not at all a good situation, because having data_aspect behave so differently depending on whether it’s passed to hvPlot or HoloViews is very tricky and subtle. I think I’ve noticed similar issues with responsive and sizing_mode, i.e. things where it matters whether a height or width has been set explicitly by the user. Definitely a topic for someone who knows that interface between hvPlot and HoloViews better than I do to address!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Maintain aspect ratio of div but fill screen width and height ...
Use the new CSS viewport units vw and vh (viewport width / viewport height). FIDDLE. Resize vertically and horizontally and you'll see that ......
Read more >
aspect-ratio
unset : Removes the current aspect ratio from the element. It can take two values. This property can take two values at the...
Read more >
Aspect Ratios in CSS are a Hack
Technique #1: Vertical Padding ... A (hopefully) well known and longstanding hack to faking aspect ratios on the web is to abuse the...
Read more >
Responsive iframes with the CSS aspect-ratio property
Today, I want to show you can use a few lines of CSS to make your embedded iframes fully responsive. Let's dig in!...
Read more >
Avoiding <img> layout shifts: aspect-ratio vs width & height ...
In this case, the two images have different aspect ratios. Chrome and Safari use the correct width and height depending on which source...
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