Can I make my domain scale in increment of a number at a time?

Community Help
1

I’m using Vega lite v5, I used:

vl.x().fieldQ(“pl_flux”).scale({domain:[0, 2]})

As a test to create my domain range but I haven’t found a way that the scale goes from 0 to 0.25, 0.50, 0.75 until 2 and see if I can make my Y scale go from 0 to 3000 and from 3000 to 4000 and increment 1000 until reaching 8000.
I tried using

vl.x().fieldQ(“pl_flux”).scale({domain:[-1,2]}, {domainWidth:[.25]})

But it’s not working, It’s not the right format or way

2

I think you may be confusing two concepts. The scale determines the mapping from data value to position. But what you wanting to control are the axis tick labels.

Vega-Lite will do its best to place ‘nice’ axis labels at round numbers at intervals determined by the size of the axis on screen (to avoid over-crowded labels). Depending on the size of your chart and domain of the data, this may or may not include 0.25, 0.5 etc.

You can influence axis label placement ‘gently’ with properties such as tickCount and tickMinStep. This does not guarantee the values you supply, as the size of the axis may prevent clear labelling.

To set the values explicitly, which appears to be what you need for your y-axis example with irregular tick labels, you can set the values property with the tick values you want. In the example below, which I think matches your example, I have also set the format of the numbers on the x-axis, so that the 2 decimal places of 0.25, 0.75 etc. are respected.

{
  const data = [{ x: 0.1, y: 5500 }];
  return vl
    .markCircle()
    .data(data)
    .encode(
      vl
        .x()
        .fieldQ("x")
        .scale({ domain: [0, 2] })
        .axis({
          values: [0, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
          format: ".2f"
        }),
      vl
        .y()
        .fieldQ("y")
        .scale({ domain: [0, 8000] })
        .axis({
          values: [0, 3000, 4000, 5000, 6000, 7000, 8000]
        })
    )
    .width(300)
    .height(300)
    .render();
}
1 Like