Layout - VegaLayeredBuilder

Layout.VegaLayeredBuilder

Define a UI Chart based on a Vega-Lite specification from a

Stream within a LayoutBuilder.

Remarks

See

Vega-Lite for more information about specifications.

Layout

view

▸ view(f):

VegaLayeredBuilder

Add a UI Chart layer based on layered Vega-Lite specifications from a

Stream within a LayoutBuilder.

Parameters

Name	Type
f	(builder: VegaViewBuilder) => VegaUnitSpecFinalizer

Returns

VegaLayeredBuilder

Remarks

See

Vega-Lite for more information about specifications.

Example

  // use a DictType stream
  const stream = Stream(
      "My Stream",
      DictType(
          StringType,
          StructType({
              string: StringType,
              date: DateTimeType,
              float: FloatType,
          })
      )
  );
  
  // create a vega specification in a layout
  const layout = new LayoutBuilder("My Layout")
      .vega("My Vega-Lite Chart", builder => builder
         .layered(builder => builder
             .view(
                 builder => builder
                     .fromStream(stream)
                     .line({
                         x: builder => builder
                             .value(fields => fields.date)
                             .title("X Title")
                             .sort('descending'),
                         y: builder => builder
                             .value(fields => fields.float)
                             .title("Y Title")
                             .sort('ascending'),
                         color: builder => builder
                             .value(fields => fields.string)
                             .title("Color Title")
                     })
             )
             .view(
                 builder => builder
                     .fromStream(stream)
                     .scatter({
                         x: builder => builder
                             .value(fields => fields.date)
                             .title("X Title")
                             .sort('descending'),
                         y: builder => builder
                             .value(fields => fields.float)
                             .title("Y Title")
                             .sort('ascending'),
                         color: builder => builder
                             .value(fields => fields.string)
                             .title("Color Title")
                     })
             )
         )
      ))
      .toTemplate()