code formatting [vega-lite]

I looking at different tutorials where the code formatting are different and I’m having trouble translating them. :pensive:
For example, Tom MacWright’s Tutorial 3: Visualizing data does it this way:

data: { values: alphabet },
mark: “bar”,
autosize: “fit”,
encoding: {
x: {
field: “letter”,
type: “ordinal”
y: {
field: “frequency”

while Visnu Pitiyanuvath’s Layers and Facets and Concat, Oh My! looks like this:

viewof layeredBar = vl
        vl.x().fieldQ("frequency").axis({ format: "%", grid: false })
    vl.markText({ align: "left", dx: 5, dy: 1 })

How do I include autosize: "fit" into the latter format?

These two formats are for two different libraries, called “the Vega-Lite JSON API” and "the Vega-Lite JavaScript API, respectively. You can add .autosize("fit") right after the call to data(), like


Thank you, Thomas. May I ask which one’s which and is one better than the other, or is it a matter of coding preference/familiarity?

I prefer the JavaScript API! But it is not as well documented. I learned it reading Visnu’s examples, so quite a biased answer from me.