title: How to translate mean aggregation vega-lite grammar to vega-lite-api code
body: <p>I was trying to learn vega-lite-api. I came across <a href="https://vega.github.io/vega-lite/docs/aggregate.html#encoding" rel="nofollow noreferrer">this</a> vega-lite example:</p>
  <pre><code>{
    &quot;data&quot;: {&quot;url&quot;: &quot;data/cars.json&quot;},
    &quot;mark&quot;: &quot;bar&quot;,
    &quot;encoding&quot;: {
      &quot;x&quot;: {&quot;field&quot;: &quot;Cylinders&quot;},
      &quot;y&quot;: {&quot;aggregate&quot;: &quot;mean&quot;, &quot;field&quot;: &quot;Acceleration&quot;}
    }
  }
  </code></pre>
  <p>It outputs:</p>
  <p><a href="https://i.stack.imgur.com/p6pex.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p6pex.png" alt="enter image description here" /></a></p>
  <p>I tried to translate it to vega-lite-api code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/vega@5.21.0/build/vega.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/vega-lite@5.2.0/build/vega-lite.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://www.unpkg.com/vega-embed@6.20.8/build/vega-embed.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/vega-lite-api@5.0.0/build/vega-lite-api.min.js"&gt;&lt;/script&gt;
  &lt;div id="stats" /&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Run above code. It will output following:</p>
  <p><a href="https://i.stack.imgur.com/iTjrR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iTjrR.png" alt="enter image description here" /></a></p>
  <p>Now, I am unable to figure out how can I translate this vega-lite grammar to vega-lite-api code.
  <a href="https://observablehq.com/d/271e5d460344dc2e#mean_acceleration" rel="nofollow noreferrer">Here</a> is the link to observable notebook.</p>
  <p><strong>Update</strong></p>
  <p>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.</p>
  <p>Now I have following doubts:</p>
  <p><strong>Q1.</strong> Why the bars are thinner and not wider as in case of doc's visualization ?</p>
  <p><strong>Q2.</strong> Why there is difference between scales? Does vega-lite-api defines different default scale configuration than vega-lite?</p>
  <p><strong>Q3.</strong> Also I have specified grammar inside <code>vl()</code>. How do I do it with &quot;corresponding&quot; api using <a href="https://vega.github.io/vega-lite-api/api/aggregate.html#aggregate" rel="nofollow noreferrer"><code>aggregate()</code></a>?</p>