How to translate mean aggregation vega-lite grammar to vega-lite-api code

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()?

To me, the two screenshots show the same data. What is your problem exactly ? — Romka, Jun 10 '22 at 11:47
Aah I see. 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 bars. They are exact in terms of data / height, but same width with non aggregated one tricked me in thinking that it did not change. Any reason why the bars are thinner and not wider and also why there is difference between scales? Also I have specified grammar inside `vl()`. How do I do it with api using `aggregate()`? — Mahesha999, Jun 10 '22 at 11:58

score 0 · Accepted Answer · answered Jun 10 '22 at 12:21

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();
}

How to translate mean aggregation vega-lite grammar to vega-lite-api code

1 Answers1