Vega-lite: How to specify data aspect ratio / equal data scales on Vegalite plot

[kanitw]

From vega-js group:

On an Vegalite xy chart, how do I specify the data aspect ratio to 1? In other words, I want the same scaling from data to plot units for both x and y axes. In Matplotlib this is achieved with matplotlib.axes.Axes.set_aspect('equal'). The set_aspect method sets the aspect ratio of the data (i.e. the ratio of the domains of the x and y scales), and this can be very different from the aspect ratio of the figure itself (the ratio of the ranges of the x and y scales). For geometric data, such as x-y position, unequal scales can severely distort the interpretation and scaling if the data aspect ratio is not 1.

For example, how would I modify the following spec snippet? Thanks

{
  "width": 500,
  "height": 500
  "mark": {"type": "line", "point": {"size": 0}},
  "encoding": {
    "x": {"field": "y", "type": "quantitative"},
    "y": {"field": "x", "type": "quantitative"},
    "color": {
      "field": "run",
      "type": "nominal",
      "scale": {"scheme": "magma"}
    }
  }
}

[kanitw]

The easiest way is to the set the scale domain of the x and y axes to the same values.

[kanitw]

One natural way to support this in an automatic fashion is to allow setting the scale domain to be based on multiple fields like in Vega.

We may then include a special flag (perhaps named aspect_equal in the mark as a special shortcut to apply the domain of both x and y fields to the domain of both x and y scales.

I don't think we need to support setting it to a number.

[domoritz]

Why not just have aspectRatio and let people set it to 1 so we are flexible?

[kanitw]

Because it’s way harder to implement than equal aspect ratio. You need to add extent transform, wire signals, etc. for a feature that is unclear if it is gonna be used.

That said aspectRatio: “equal” is probably the right syntax and it allows extension in the future.

[domoritz]

I agree.

[chairmank]

The easiest way is to the set the scale domain of the x and y axes to the same values.

Perhaps I misunderstood this suggestion, but I don't think that it achieves the desired behavior. Consider a chart with

x domain: [0, 100]
y domain: [-100, 100]

In data space, this is a rectangle that is twice as tall as it is wide.

If the data aspect ratio is 1:1, then this chart ought to be rendered with an x-axis range that is 1 units wide in pixel space, and a y-axis range that is 2 units tall in pixel space.

One can achieve any desired data aspect ratio by setting both the domain and range of the x and y scales. Is it possible to specify both the x range (pixel width) and y range (pixel height) with a variable, instead of absolute pixels, so that the chart is responsive?