Layout - VegaBuilder

Layout.VegaBuilder

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.

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
         .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")
                 })
         )
      ))
      .toTemplate()

Layout

constructor

• new VegaBuilder(name, module):

VegaBuilder

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

Stream within a LayoutBuilder.

Parameters

Name	Type
name	string
module	ModulePath

Returns

VegaBuilder

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
         .fromStream(stream)
         .spec((fields) => ({
             $schema: "https://vega.github.io/schema/vega-lite/v5.json",
             title: "My Chart",
             mark: "point",
             encoding: {
                 x: { field: fields.date, type: 'temporal', title: `Date Range` },
                 y: { field: fields.integer, type: 'quantitative' },
                 color: { field: fields.string, type: 'nominal' },
                 tooltip: [
                     { field: fields.date, aggregate: 'min', type: 'temporal' },
                     { field: fields.integer, aggregate: 'max', type: 'quantitative' },
                     { field: fields.float, type: 'quantitative' },
                 ]
             }
         })
      ))
      .toTemplate()

  // create an area chart in a layout
  const layout2 = new LayoutBuilder("My Other Layout")
      .vega("My Area Chart", builder => builder
         .fromStream(stream)
         .area({
             x: (fields) => fields.string,
             y: (fields) => fields.float,
         })
      )
      .toTemplate()

---

layered

▸ layered(f):

VegaLayeredBuilder

Define a UI Chart based on layered Vega-Lite specifications from a

Stream within a LayoutBuilder.

Parameters

Name	Type
f	(builder: VegaLayeredBuilder) => VegaLayeredBuilder

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
             .layer(
                 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")
                     })
             )
             .layer(
                 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()

---

view

▸ view(f):

VegaViewVisualFinalizer

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

Stream within a LayoutBuilder.

Parameters

Name	Type
f	(builder: VegaViewBuilder) => VegaUnitSpecFinalizer

Returns

VegaViewVisualFinalizer

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
         .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")
                 })
         )
      ))
      .toTemplate()