如何将平均聚合 vega-lite 语法转换为 vega-lite-api 代码

Question

I was trying to learn vega-lite-api. I came across this vega-lite example:

{
  "data": {"url": "data/cars.json"},
  "mark": "bar",
  "encoding": {
    "x": {"field": "Cylinders"},
    "y": {"aggregate": "mean", "field": "Acceleration"}
  }
}

It outputs:

I tried to translate it to vega-lite-api code:

 var data = JSON.parse($.getJSON({'url': "https://unpkg.com/vega-datasets@1.25.0/data/cars.json", 'async': false}).responseText); createChart = function (data) { const plot = vl.markBar() .data(data) .encode( vl.x() .fieldQ('Cylinders'), vl.y({"aggregate": "mean", "field": "Acceleration", "type": "quantitative"}) // .fieldQ('Acceleration') ) return plot.toObject(); } const chart_spec_json = this.createChart(data) const opt = { renderer: "canvas", actions: false }; vegaEmbed("#stats", chart_spec_json, opt);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script> <script src="https://unpkg.com/vega@5.21.0/build/vega.min.js"></script> <script src="https://unpkg.com/vega-lite@5.2.0/build/vega-lite.min.js"></script> <script src="https://www.unpkg.com/vega-embed@6.20.8/build/vega-embed.min.js"></script> <script src="https://unpkg.com/vega-lite-api@5.0.0/build/vega-lite-api.min.js"></script> <div id="stats" />

Run above code. It will output following:

Now, I am unable to figure out how can I translate this vega-lite grammar to vega-lite-api code. Here is the link to observable notebook.

Update

As pointed out in comments, the data shown by the same graphs is same. So the output is definitely correct. I started up without aggregation (as you can see in the observable notebook) which also had similar thin bar charts. Now after adding aggregation, I was expecting the exact visualization (at least bar widths). They are exact in terms of data / height, but same width with non aggregated one tricked me in thinking that it did not change.

Now I have following doubts:

Q1. Why the bars are thinner and not wider as in case of doc's visualization ?

Q2. Why there is difference between scales? Does vega-lite-api defines different default scale configuration than vega-lite?

Q3. Also I have specified grammar inside vl() . How do I do it with "corresponding" api using aggregate() ?

Answer 1

Try this.

mean_acceleration = {
  const plot = vl.markBar()
                .data(cars_data)
                .encode(
                  vl.x()
                    .field('Cylinders'),
                  vl.y()
                    .field('Acceleration')
                    .aggregate('mean')
                )
  return plot.render();
}