Skip to main content

Layout

The

Layout module facilitates creation of UI layouts containing visualisations.

Example

  // use a DictType stream
const stream = Stream(
"My Stream",
DictType(
StringType,
StructType({
string: StringType,
date: DateTimeType,
float: FloatType,
min_float: FloatType,
max_float: FloatType,
integer: IntegerType,
boolean: BooleanType,
})
)
);

// use a writable DictType stream (PrimitiveType)
const writeable = Stream(
"My Writable Stream",
DictType(StringType, FloatType),
true
)

// create a table in a layout
const layout = new LayoutBuilder("My Layout")
.table("My Table", builder => builder
.fromStream(stream)
.date("Date", fields => fields.date)
.string("String", fields => fields.string)
.integer("Integer", fields => fields.integer)
.boolean("Boolean", fields => fields.boolean)
.float(
"Float",
{
edit: writeable,
value: fields => fields.float,
min: fields => fields.min_float,
max: fields => fields.max_float,
}
)
)
.toTemplate()

Classes

  • AccordionBuilder
  • AccordionGroupBuilder
  • AccordionItemBuilder
  • ArrayTableFinalizer
  • CalendarBuilder
  • CalendarFinalizer
  • ChatBuilder
  • ChatThreadBuilder
  • ChatThreadFinalizer
  • DictStructTableFinalizer
  • FieldFinalizer
  • FlatLayoutBuilder
  • FlatLayoutFinalizer
  • FormBuilder
  • FormFinalizer
  • GridBuilder
  • HeaderBuilder
  • HeaderItemBuilder
  • HeaderItemFinalizer
  • HeaderItemSpecifier
  • LayoutBuilder
  • PagedLayoutBuilder
  • PanelBuilder
  • PivotBuilder
  • PrimitiveTableFinalizer
  • TabBuilder
  • TableBuilder
  • TimelineBuilder
  • TimelineFinalizer
  • UploadBuilder
  • VegaBuilder
  • VegaCartesianViewFinalizer
  • VegaColorEncodingSpecifier
  • VegaContinuousColorEncodingFinalizer
  • VegaDateTimeEncodingFinalizer
  • VegaDiscreteColorEncodingFinalizer
  • VegaFieldEncodingBuilder
  • VegaFloatEncodingFinalizer
  • VegaIntegerEncodingFinalizer
  • VegaLayeredBuilder
  • VegaRadialViewFinalizer
  • VegaSpecViewFinalizer
  • VegaStringEncodingFinalizer
  • VegaViewBuilder
  • VegaViewSpecifier
  • VegaViewVisualFinalizer

Layout

CalendarEventType

Ƭ CalendarEventType:

StructType<{ color?: Nullable<StringType> | StringType ; end?: DateTimeType ; label?: Nullable<StringType> | StringType ; start: DateTimeType }>

Represents the type for an event within a calendar, CalendarEventType is a

StructType, each task structure consists of the following fields:


GridItem

Ƭ GridItem: { h: number ; is_static: true ; w: number ; x: number ; y: number } | { h: number ; is_static: false ; max_h?: number ; max_w?: number ; min_h?: number ; min_w?: number ; w: number ; x: number ; y: number }

The configuration of a grid item.

Param

the percentage of the parent for the

VegaBuilder

Param

the name for the

VegaBuilder

Param

the

VegaBuilder


TableFinalizer

Ƭ TableFinalizer:

PrimitiveTableFinalizer | DictStructTableFinalizer | ArrayTableFinalizer

Define a UI Table from a

Stream within a LayoutBuilder.


TimelineBoundaryType

Ƭ TimelineBoundaryType:

StructType<{ date: DateTimeType ; stroke_color?: Nullable<StringType> | StringType ; stroke_dash?: Nullable<StructType<{ space: FloatType ; stroke: FloatType }>> | StructType<{ space: FloatType ; stroke: FloatType }> ; stroke_opacity?: Nullable<FloatType> | FloatType ; stroke_width?: Nullable<FloatType> | FloatType }>

Represents the type for a boundary within a timeline, BoundaryType is a

StructType, each task structure consists of the following fields:


TimelineTaskType

Ƭ TimelineTaskType:

StructType<{ color?: Nullable<StringType> | StringType ; dependencies?: SetType<StringType> | ArrayType<StringType> ; end: DateTimeType ; end_target?: Nullable<DateTimeType> | DateTimeType ; id: StringType ; label: StringType ; opacity?: Nullable<FloatType> | FloatType ; start: DateTimeType ; start_target?: Nullable<DateTimeType> | DateTimeType ; stroke_color?: Nullable<StringType> | StringType ; stroke_dash?: Nullable<StructType<{ space: FloatType ; stroke: FloatType }>> | StructType<{ space: FloatType ; stroke: FloatType }> ; stroke_opacity?: Nullable<FloatType> | FloatType ; stroke_width?: Nullable<FloatType> | FloatType ; tooltips?: ArrayType<StructType<{ label: StringType ; value: StringType }>> }>

Represents the type for a task within a timeline.


TimelineTasksType

Ƭ TimelineTasksType:

TimelineTaskType | ArrayType<TimelineTaskType> | DictType<StringType, TimelineTaskType>

Represents the type for tasks within a timeline, can be a

StructType, an ArrayType of StructType, or a DictType with StructType value, mapping strings to task structures, allowing for varied forms of task definitions.


VegaColorEncodingFinalizer

Ƭ VegaColorEncodingFinalizer<E>: E extends

StringType ? VegaDiscreteColorEncodingFinalizer : E extends NumericType | DateTimeType ? VegaContinuousColorEncodingFinalizer : never

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.

Type parameters

NameType
Eextends PrimitiveType = PrimitiveType

VegaFieldEncodingFinalizer

Ƭ VegaFieldEncodingFinalizer<E>: E extends

DateTimeType ? VegaDateTimeEncodingFinalizer : E extends IntegerType ? VegaIntegerEncodingFinalizer : E extends FloatType ? VegaFloatEncodingFinalizer : E extends StringType ? VegaStringEncodingFinalizer : never

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.

Type parameters

NameType
Eextends PrimitiveType = PrimitiveType

VegaUnitSpecFinalizer

Ƭ VegaUnitSpecFinalizer:

VegaSpecViewFinalizer | VegaCartesianViewFinalizer | VegaRadialViewFinalizer

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.


VegaVisualFinalizer

Ƭ VegaVisualFinalizer:

VegaViewVisualFinalizer | 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.

Other

Aggregate

Ƭ Aggregate: "count" | "valid" | "values" | "missing" | "distinct" | "sum" | "product" | "mean" | "average" | "variance" | "variancep" | "stdev" | "stdevp" | "stderr" | "median" | "q1" | "q3" | "ci0" | "ci1" | "min" | "max"

Definition of an aggregation operation to perform on a field, the following aggregations are supported:

  • "count": Calculate the total count of data objects in the group.
  • "valid": Calculate the count of field values that are not null, undefined or NaN.
  • "values": Calculate a list of data objects in the group.
  • "missing": Calculate the count of null or undefined field values.
  • "distinct": Calculate the count of distinct field values.
  • "sum": Calculate the total sum of field values.
  • "product": Calculate the product of field values.
  • "mean": Calculate the mean (average) field value.
  • "average": Calculate the mean (average) field value. Identical to mean.
  • "variance": Calculate the sample variance of field values.
  • "variancep": Calculate the population variance of field values.
  • "stdev": Calculate the sample standard deviation of field values.
  • "stdevp": Calculate the population standard deviation of field values.
  • "stderr": Calculate the standard error of field values.
  • "median": Calculate the median field value.
  • "q1": Calculate the lower quartile boundary of field values.
  • "q3": Calculate the upper quartile boundary of field values.
  • "ci0": Calculate the lower boundary of the bootstrapped 95% confidence interval of the mean field value.
  • "ci1": Calculate the upper boundary of the bootstrapped 95% confidence interval of the mean field value.
  • "min": Calculate the minimum field value.
  • "max": Calculate the maximum field value.

ArcMark

Ƭ ArcMark:

ArcMarkBase & { corner_radius?: number ; fill?: string ; fill_opacity?: number ; opacity?: number ; pad_angle?: number ; stroke?: string ; stroke_dash?: [stroke: number, space: number] ; stroke_opacity?: number ; stroke_width?: number }

Definition a chart mark as arc segments


ArcMarkBase

Ƭ ArcMarkBase: Object

Definition a chart mark as arc segments

Type declaration

NameTypeDescription
kind"arc"the kind of value

AreaMark

Ƭ AreaMark:

AreaMarkBase & { fill?: string ; fill_opacity?: number ; opacity?: number ; stroke?: string ; stroke_dash?: [stroke: number, space: number] ; stroke_opacity?: number ; stroke_width?: number }

Definition a chart mark as a line


AreaMarkBase

Ƭ AreaMarkBase: Object

Definition a chart mark as a line

Type declaration

NameTypeDescription
interpolate?Interpolatethe line interpolation to apply
kind"area"the kind of value

AxisEncoding

Ƭ AxisEncoding:

NumericEncoding | StringEncoding | TemporalEncoding

Definition of all possible field encodings


AxisEncodingBase

Ƭ AxisEncodingBase:

NumericEncodingBase | StringEncodingBase | TemporalEncodingBase

Definition of all possible field encodings


BarMark

Ƭ BarMark<Orient>:

BarMarkBase<Orient> & { fill?: string ; fill_opacity?: number ; opacity?: number ; stroke?: string ; stroke_dash?: [stroke: number, space: number] ; stroke_opacity?: number ; stroke_width?: number }

Definition a chart mark as a horizontal or vertical bar

Type parameters

NameType
Orientextends Orientation = Orientation

BarMarkBase

Ƭ BarMarkBase<Orient>: Object

Definition a chart mark as a horizontal or vertical bar

Type parameters

NameType
Orientextends Orientation = Orientation

Type declaration

NameTypeDescription
kind"bar"the kind of value
orient?Orientthe shape to draw for each point

Bin

Ƭ Bin: Object

Definition for a binning operation

Type declaration

NameTypeDescription
anchor?numbera value in the binned domain at which to anchor the bins
extent?[min: number, max: number]the range of desired bin values
maxbins?numberthe range of desired bin values
minstep?numbera minimum allowable step size
nice?booleanattempts to make the bin boundaries use human-friendly boundaries
step?numberan exact step size to use between bins (If provided, options such as maxbins will be ignored).
steps?number[]an array of allowable step sizes to choose from..

BoxPlotMark

Ƭ BoxPlotMark<Kind>: Kind extends "boxplot" ?

BoxPlotMarkBase<Kind> & { fill?: string ; fill_opacity?: number ; invalid?: "filter" | null ; opacity?: number ; stroke?: string ; stroke_dash?: [stroke: number, space: number] ; stroke_opacity?: number ; stroke_width?: number } : Kind extends "errorband" ? BoxPlotMarkBase<Kind> & { fill?: string ; fill_opacity?: number ; invalid?: "filter" | null ; opacity?: number ; stroke?: string ; stroke_dash?: [stroke: number, space: number] ; stroke_opacity?: number ; stroke_width?: number } : BoxPlotMarkBase<Kind> & { fill?: string ; fill_opacity?: number ; invalid?: "filter" | null ; opacity?: number ; stroke?: string ; stroke_dash?: [stroke: number, space: number] ; stroke_opacity?: number ; stroke_width?: number ; thickness?: number }

Definition a chart mark as a box plot, error band or error bar

Type parameters

NameType
Kindextends "boxplot" | "errorband" | "errorbar" = "boxplot" | "errorband" | "errorbar"

BoxPlotMarkBase

Ƭ BoxPlotMarkBase<Kind>: Kind extends "boxplot" ? { extent?: "min-max" | number ; kind: Kind } : Kind extends "errorband" ? { extent?: "ci" | "stderr" | "stdev" | "iqr" ; kind: Kind } : { extent?: "ci" | "stderr" | "stdev" | "iqr" ; kind: Kind }

Definition a chart mark as a box plot, error band or error bar

Type parameters

NameType
Kindextends "boxplot" | "errorband" | "errorbar" = "boxplot" | "errorband" | "errorbar"

CartesianEncodings

Ƭ CartesianEncodings: { color?:

ColorEncoding ; mark: Mark ; name: string ; shape?: AxisEncoding ; size?: AxisEncoding ; type: "cartesian" ; x?: AxisEncoding ; x2?: AxisEncoding ; y?: AxisEncoding ; y2?: AxisEncoding } & FormatEncodings

Definition of the configuration and channels to encode axes and formatting for a cartesian chart


CartesianEncodingsBase

Ƭ CartesianEncodingsBase: Object

Definition of the configuration and channels to encode axes and formatting for a cartesian chart

Type declaration

NameTypeDescription
color?ColorEncodingBasethe encoding of a field to the color channel
detail?AxisEncodingBasethe encoding of a field to the shape channel, only applicable for a "point" mark
markMarkBaseMarks are the basic visual building block of a visualization. They provide basic shapes whose properties (such as x, y, size, and color) can be used to visually encode data, either from a data field - 'point': point mark represents each data point with a symbol. Point marks are commonly used in visualizations like scatterplots.. - 'bar': Bar marks are useful in many visualizations, including bar charts, stacked bar charts, and timelines. - 'line': The line mark represents the data points stored in a field with a line connecting all of these points. Line marks are commonly used to depict trajectories or change over time. Unlike most other marks that represent one data element per mark, one line mark represents multiple data element as a single line, akin to area and trail. - 'area': area represent multiple data element as a single area shape. Area marks are often used to show change over time, using either a single area or stacked areas. - 'rect': The rect mark represents an arbitrary rectangle. - 'boxplot': A box plot summarizes a distribution of quantitative values using a set of summary statistics. The median tick in the box represents the median. The lower and upper parts of the box represent the first and third quartile respectively. Depending on the type of box plot, the ends of the whiskers can represent multiple things. - 'tick': The tick mark represents each data point as a short line. This is a useful mark for displaying the distribution of values in a field.
namestringthe human readable name and title for the chart
size?AxisEncodingBasethe encoding of a field to the size channel, only applicable for a "point" mark
xAxisEncodingBaseDefinition of how to encode a field into the x coordinates of the marks, or width of horizontal "bar" and "area" without specified x2 or width.
yAxisEncodingBaseDefinition of how to encode a field into the y coordinates of the marks, or height of vertical "bar" and "area" without specified y2 or height.

ColorEncoding

Ƭ ColorEncoding:

DiscreteColorEncoding | ContinuousColorEncoding

Definition of all possible color encodings


ColorEncodingBase

Ƭ ColorEncodingBase:

DiscreteColorEncodingBase | ContinuousColorEncodingBase

Definition of all possible color encodings


ContinuousColorEncoding

Ƭ ContinuousColorEncoding:

ContinuousColorEncodingBase & { bin?: Bin | boolean ; kind: "continuous" ; name: string }

Definition of a continuous field color encoding


ContinuousColorEncodingBase

Ƭ ContinuousColorEncodingBase: Object

Definition of a continuous field color encoding

Type declaration

NameTypeDescription
aggregate?AggregateThe aggregation operation for the field (e.g., "mean", "sum", "median", "min", "max", "count". The aggregate property of a field definition can be used to compute aggregate summary statistics (e.g., median, min, max) over groups of data. If at least one fields in the specified encoding channels contain aggregate, the resulting visualization will show aggregate data. In this case, all fields without aggregation function specified are treated as group-by fields1 in the aggregation process. For example, the following bar chart aggregates mean of Acceleration, grouped by the number of Cylinders. typescript "encodings": { "x": {"field": "Cylinders"}, "color": {"aggregate": "mean", "field": "Acceleration"} } Note: aggregated fields are quantitative by default while unaggregated (group by) fields in aggregated encodings are nominal by default.
fieldstringthe data field to encode, this must be a BooleanType, IntegerType, FloatType, StringType or DateTimeType field within the provided data
title?stringthe title to display
typeFieldTypethe type of encoding

DiscreteColorEncoding

Ƭ DiscreteColorEncoding:

DiscreteColorEncodingBase & { kind: "discrete" ; name: string ; scale?: [value: string, color: string][] }

Definition of a discrete field color encoding, which can be used to visually group data.


DiscreteColorEncodingBase

Ƭ DiscreteColorEncodingBase: Object

Definition of a discrete field color encoding, which can be used to visually group data.

Type declaration

NameTypeDescription
fieldstringthe data field to encode, this must be a BooleanType, IntegerType, FloatType, StringType or DateTimeType field within the provided data
title?stringthe title to display
typeFieldTypethe type of encoding

DiscreteTimeUnit

Ƭ DiscreteTimeUnit: "year" | "quarter" | "month" | "week" | "day" | "dayofyear" | "date" | "hours" | "minutes" | "seconds" | "milliseconds" | "yearquarter" | "yearquartermonth" | "yearmonth" | "yearmonthdate" | "yearmonthdatehours" | "yearmonthdatehoursminutes" | "yearmonthdatehoursminutesseconds" | "yearweek" | "yearweekday" | "yearweekdayhours" | "yearweekdayhoursminutes" | "yearweekdayhoursminutesseconds" | "yeardayofyear" | "quartermonth" | "monthdate" | "monthdatehours" | "monthdatehoursminutes" | "monthdatehoursminutesseconds" | "weekday" | "weeksdayhours" | "weekdayhoursminutes" | "weekdayhoursminutesseconds" | "dayhours" | "dayhoursminutes" | "dayhoursminutesseconds" | "hoursminutes" | "hoursminutesseconds" | "minutesseconds" | "secondsmilliseconds"

Time unit is used to discretize date time field values, the following time units are supported:

  • "year": Gregorian calendar years.
  • "quarter": Three-month intervals, starting in one of January, April, July, and October.
  • "month": Calendar months (January, February, etc.).
  • "date": Calendar day of the month (January 1, January 2, etc.).
  • "week": Sunday-based weeks. Days before the first Sunday of the year are considered to be in week 0, the first Sunday of the year is the start of week 1, the second Sunday week 2, etc..
  • "day": Day of the week (Sunday, Monday, etc.).
  • "dayofyear": Day of the year (1, 2, …, 365, etc.).
  • "hours": Hours of the day (12:00am, 1:00am, etc.).
  • "minutes": Minutes in an hour (12:00, 12:01, etc.).
  • "seconds": Seconds in a minute (12:00:00, 12:00:01, etc.).
  • "milliseconds": Milliseconds in a second. The time units may be used and combined in different ways:
  • (1) Time units can also be a string of consecutive time units to indicate desired intervals of time. For example, yearmonthdate indicates chronological time sensitive to year, month, and date (but not to hours, minutes, or seconds). The specifier monthdate is sensitive to month and date, but not year, which can be useful for binning time values to look at seasonal patterns only.
  • (2) By default, all time units represent date time using local time.
  • (3) To use UTC time, you can add the utc prefix (e.g., "utcyear", "utcyearmonth").
  • (4) (For timeUnit in encoding, you can also add "binned" prefix (e.g., "binnedyearmonth" or "binnedutcyearmonth") for Chronological time units (i.e., units that are truncated date times, as opposed to circle time units, which bin data to parts of date times).

EncodingSort

Ƭ EncodingSort:

FieldSort | ValueSort

Definition for either type of sort


Encodings

Ƭ Encodings:

CartesianEncodings | RadialEncodings

The possible chart encodings, that define the configuration and channels to encode axes and formatting a chart


FieldSort

Ƭ FieldSort: Object

Definition to sort by another field

Type declaration

NameTypeDescription
fieldstringthe field to sort by
opAggregatethe sort operation
orderSortOrderthe sort order
type"field"the type of sort

FieldType

Ƭ FieldType: "nominal" | "ordinal" | "quantitative" | "temporal"

Definition of a data field encoding
The type of measurement ("quantitative", "temporal", "ordinal", or "nominal") for the encoded field or constant value (datum). It can also be a "geojson" type for encoding ‘geoshape’. Data types can be inferred in many cases as discussed below. However, type is required for a field if: (1) the field is not nominal and the field encoding has no specified aggregate (except argmin and argmax), bin, scale type, custom sort order, nor timeUnit or (2) if you wish to use an ordinal scale for a field with bin or timeUnit.

Default value:

  1. For a data field, "nominal" is the default data type unless the field encoding has aggregate, channel, bin, scale type, sort, or timeUnit that satisfies the following criteria:
  • "quantitative" is the default type if (1) the encoded field contains bin or aggregate except "argmin" and "argmax", (2) the encoding channel is latitude or longitude channel or (3) if the specified scale type is a quantitative scale.
  • "temporal" is the default type if (1) the encoded field contains timeUnit or (2) the specified scale type is a time or utc scale
  • "ordinal" is the default type if (1) the encoded field contains a custom sort order, (2) the specified scale type is an ordinal/point/band scale, or (3) the encoding channel is order.
  1. For a constant value in data domain (datum):
  • "quantitative" if the datum is a number
  • "nominal" if the datum is a string
  • "temporal" if the datum is a date time object Note:
  • Data type describes the semantics of the data rather than the primitive data types (number, string, etc.). The same primitive data type can have different types of measurement. For example, numeric data can represent quantitative, ordinal, or nominal data.
  • Data values for a temporal field can be either a date-time string (e.g., "2015-03-07 12:32:17", "17:01", "2015-03-16". "2015") or a timestamp number (e.g., 1552199579097).
  • When using with bin, the type property can be either "quantitative" (for using a linear bin scale) or "ordinal" (for using an ordinal bin scale).
  • When using with timeUnit, the type property can be either "temporal" (default, for using a temporal scale) or "ordinal" (for using an ordinal scale).
  • When using with aggregate, the type property refers to the post-aggregation data type.
  • Secondary channels (e.g., x2, y2, xError, yError) do not have type as they must have exactly the same type as their primary channels (e.g., x, y).

FormatEncodings

Ƭ FormatEncodings: Object

Definition of the channels to encode formatting for a chart

Type declaration

NameTypeDescription
detail?AxisEncodingdefine how to encode the detail
fill_opacity?AxisEncodingdefine how to encode the fill opacity
opacity?AxisEncodingdefine how to encode the opacity
stroke_dash?AxisEncodingdefine how to encode the stroke dash
stroke_opacity?AxisEncodingdefine how to encode the stroke opacity
stroke_width?AxisEncodingdefine how to encode the stroke width

Interpolate

Ƭ Interpolate: "basis" | "basis-open" | "basis-closed" | "bundle" | "cardinal" | "cardinal-open" | "cardinal-closed" | "catmull-rom" | "linear" | "linear-closed" | "monotone" | "natural" | "step" | "step-before" | "step-after"

Definition the interpolation to use for a line or area chart, which may one of the following values:

  • "linear": piecewise linear segments, as in a polyline.
  • "linear-closed": close the linear segments to form a polygon.
  • "step": alternate between horizontal and vertical segments, as in a step function.
  • "step-before": alternate between vertical and horizontal segments, as in a step function.
  • "step-after": alternate between horizontal and vertical segments, as in a step function.
  • "basis": a B-spline, with control point duplication on the ends.
  • "basis-open": an open B-spline; may not intersect the start or end.
  • "basis-closed": a closed B-spline, as in a loop.
  • "cardinal": a Cardinal spline, with control point duplication on the ends.
  • "cardinal-open": an open Cardinal spline; may not intersect the start or end, but will intersect other control points.
  • "cardinal-closed": a closed Cardinal spline, as in a loop.
  • "bundle": equivalent to basis, except the tension parameter is used to straighten the spline.
  • "monotone": cubic interpolation that preserves monotonicity in y.

LineMark

Ƭ LineMark:

LineMarkBase & { fill?: string ; fill_opacity?: number ; opacity?: number ; stroke?: string ; stroke_dash?: [stroke: number, space: number] ; stroke_opacity?: number ; stroke_width?: number }

Definition a chart mark as a line


LineMarkBase

Ƭ LineMarkBase: Object

Definition a chart mark as a line

Type declaration

NameTypeDescription
interpolate?Interpolatethe line interpolation to apply
kind"line"the kind of value

Mark

Ƭ Mark:

BarMark | AreaMark | LineMark | BarMark | PointMark | BoxPlotMark | RectMark | TickMark | ArcMark

Marks are the basic visual building block of a chart, they provide basic shapes whose properties (such as position, size, and color) can be used to visually encode data, either from a data field, or a constant value. *


MarkBase

Ƭ MarkBase:

BarMarkBase | AreaMarkBase | LineMarkBase | BarMarkBase | PointMarkBase | BoxPlotMarkBase | RectMarkBase | TickMarkBase | ArcMarkBase

Marks are the basic visual building block of a chart, they provide basic shapes whose properties (such as position, size, and color) can be used to visually encode data, either from a data field, or a constant value. *


Normalize

Ƭ Normalize: "center" | "normalize" | "zero"

Define the type of stacking offset (normalization) if the field should be stacked. Stack is only applicable for the following channels:

  • (1) x,
  • (2) y,
  • (3) theta,
  • (4) radius channels with continuous domains. Normalization can be one of the following values:
  • "zero": stacking with baseline offset at zero value of the scale (for creating typical stacked bar and area chart).
  • "normalize": stacking with normalized domain (for creating normalized stacked bar and area charts and pie charts with percentage tooltip).
  • "center": stacking with center baseline (for streamgraph).
  • null: No-stacking. This will produce layered bar and area chart.

NumericEncoding

Ƭ NumericEncoding:

NumericEncodingBase & { kind: "numeric" ; name: string ; normalize?: Normalize | null ; sort?: ValueSort }

Definition of a numeric field encoding


NumericEncodingBase

Ƭ NumericEncodingBase: Object

Definition of a numeric field encoding

Type declaration

NameTypeDescription
aggregate?AggregateThe aggregation operation for the field (e.g., "mean", "sum", "median", "min", "max", "count". The aggregate property of a field definition can be used to compute aggregate summary statistics (e.g., median, min, max) over groups of data. If at least one fields in the specified encoding channels contain aggregate, the resulting visualization will show aggregate data. In this case, all fields without aggregation function specified are treated as group-by fields1 in the aggregation process. For example, the following bar chart aggregates mean of Acceleration, grouped by the number of Cylinders. typescript "encodings": { "x": {"field": "Cylinders"}, "y": {"aggregate": "mean", "field": "Acceleration"} } Note: aggregated fields are quantitative by default while unaggregated (group by) fields in aggregated encodings are nominal by default.
bin?Bin | booleanthe binning of the values, used to create discrete bins of data from numeric data
fieldstringthe data field to encode, this must be a BooleanType, IntegerType, FloatType, StringType or DateTimeType field within the provided data
title?stringthe title to display
typeFieldTypethe type of encoding

Orientation

Ƭ Orientation: "horizontal" | "vertical"

Definition for a bar mark orientation


PointMark

Ƭ PointMark:

PointMarkBase & { fill?: string ; fill_opacity?: number ; opacity?: number ; shape?: PointShape ; shape_filled?: boolean ; size?: number ; stroke?: string ; stroke_dash?: [stroke: number, space: number] ; stroke_opacity?: number ; stroke_width?: number }

Definition a chart mark as a point


PointMarkBase

Ƭ PointMarkBase: Object

Definition a chart mark as a point

Type declaration

NameTypeDescription
kind"point"the kind of value

PointShape

Ƭ PointShape: "circle" | "square" | "cross" | "diamond" | "triangle-up" | "triangle-down" | "triangle-right" | "triangle-left"

Definition for a point mark shape.


RadialEncodings

Ƭ RadialEncodings: { angle:

AxisEncoding ; color?: ColorEncoding ; mark: ArcMark ; name: string ; radius?: AxisEncoding ; type: "radial" } & FormatEncodings

Definition of the configuration and channels to encode axes and formatting for a radial chart


RectMark

Ƭ RectMark:

RectMarkBase & { fill?: string ; fill_opacity?: number ; height?: number ; opacity?: number ; stroke?: string ; stroke_dash?: [stroke: number, space: number] ; stroke_opacity?: number ; stroke_width?: number ; width?: number }

Definition a chart mark as a rectangle


RectMarkBase

Ƭ RectMarkBase: Object

Definition a chart mark as a rectangle

Type declaration

NameTypeDescription
kind"rect"the kind of value

SortOrder

Ƭ SortOrder: "ascending" | "descending"

Definition of the sorting to apply to field values To order the data by the field values natural order the sort property can be:

  • "ascending" (Default) – sort by the field values in ascending order.
  • "descending" – sort by the field values in descending order.

StringEncoding

Ƭ StringEncoding:

StringEncodingBase & { kind: "string" ; name: string ; sort?: EncodingSort }

Definition of a string field encoding


StringEncodingBase

Ƭ StringEncodingBase: Object

Definition of a string field encoding

Type declaration

NameTypeDescription
fieldstringthe data field to encode, this must be a BooleanType, IntegerType, FloatType, StringType or DateTimeType field within the provided data
title?stringthe title to display
typeFieldTypethe type of encoding

TemporalEncoding

Ƭ TemporalEncoding:

TemporalEncodingBase & { kind: "datetime" ; name: string ; sort?: ValueSort }

Definition of a date time field encoding


TemporalEncodingBase

Ƭ TemporalEncodingBase: Object

Definition of a date time field encoding

Type declaration

NameTypeDescription
fieldstringthe data field to encode, this must be a BooleanType, IntegerType, FloatType, StringType or DateTimeType field within the provided data
timeUnit?DiscreteTimeUnitthe time unit to use to discretize the field value if the type is temporal
title?stringthe title to display
type"nominal" | "ordinal" | "quantitative" | "temporal"the type of encoding

TickMark

Ƭ TickMark:

TickMarkBase & { corner_radius?: number ; fill?: string ; fill_opacity?: number ; opacity?: number ; stroke?: string ; stroke_dash?: [stroke: number, space: number] ; stroke_opacity?: number ; stroke_width?: number ; thickness?: number }

Definition a chart mark as a tick


TickMarkBase

Ƭ TickMarkBase: Object

Definition a chart mark as a tick

Type declaration

NameTypeDescription
kind"tick"the kind of value

ValueSort

Ƭ ValueSort: Object

Definition to sort in a direction

Type declaration

NameTypeDescription
orderSortOrderthe sort order
type"value"the type of sort