CODEWITHSUNDEEP
vega-lite
GuitarExtended
GuitarExtended

Reputation: 827

Faceting issue with Vega Lite Javascript API

I'm trying to turn a slopechart into several single-line charts using faceting in Vega Lite. I've made an Observable notebook to show my data and code here : https://observablehq.com/@mavromatika/faceting .

When I add the commented line, it throws an obscure error about "t [not being] defined". Is there a problem with the way my data is formatted ?

Upvotes: 0

Views: 88

Answers (1)

John Alexis Guerra Gómez
John Alexis Guerra Gómez

Reputation: 523

You cannot use the rows, columns, or facet encoding inside a layer (https://vega.github.io/vega-lite-api/api/layer#layer). Try wrapping the layer inside a facet operator. You can do this in vega-lite-api like this: 

    {  const lines = vl.markLine()
                      .encode(
                        vl.y().fieldN('a'),
                        vl.x().fieldQ('v'),
                        vl.color().fieldN("p")
                      );

      return vl.layer(lines,
                     lines.markCircle())
        .facet({row: vl.fieldN("p")})
        .data(data)
        .render();
    }

See this observable (https://observablehq.com/d/807e861358981da4) for a demonstration.

Upvotes: 1

Related Questions