code formatting [vega-lite]

Community Help
1

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:

vegalite({
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
  .data(alphabet)
  .layer(
    vl.markBar()
      .encode(
        vl.y().fieldN("letter"),
        vl.x().fieldQ("frequency").axis({ format: "%", grid: false })
      ),
    vl.markText({ align: "left", dx: 5, dy: 1 })
      .encode(
        vl.y().fieldN("letter"),
        vl.x().fieldQ("frequency"),
        vl.text().fieldN("frequency").format(".2%")
      )
  )
  .render()

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

2

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

.data(alphabet)
.autosize("fit")
.layer(
  ...
3

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?

4

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.

3 Likes