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
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
VegaBuilderParam
the name for the
VegaBuilderParam
the
VegaBuilderTableFinalizer
Ƭ 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
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
Name | Type |
---|---|
E | extends 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
Name | Type |
---|---|
E | extends 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
Name | Type | Description |
---|---|---|
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
Name | Type | Description |
---|---|---|
interpolate? | Interpolate | the 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
Name | Type |
---|---|
Orient | extends Orientation = Orientation |
BarMarkBase
Ƭ BarMarkBase<Orient
>: Object
Definition a chart mark as a horizontal or vertical bar
Type parameters
Name | Type |
---|---|
Orient | extends Orientation = Orientation |
Type declaration
Name | Type | Description |
---|---|---|
kind | "bar" | the kind of value |
orient? | Orient | the shape to draw for each point |
Bin
Ƭ Bin: Object
Definition for a binning operation
Type declaration
Name | Type | Description |
---|---|---|
anchor? | number | a value in the binned domain at which to anchor the bins |
extent? | [min: number, max: number] | the range of desired bin values |
maxbins? | number | the range of desired bin values |
minstep? | number | a minimum allowable step size |
nice? | boolean | attempts to make the bin boundaries use human-friendly boundaries |
step? | number | an 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
Name | Type |
---|---|
Kind | extends "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
Name | Type |
---|---|
Kind | extends "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
Name | Type | Description |
---|---|---|
color? | ColorEncodingBase | the encoding of a field to the color channel |
detail? | AxisEncodingBase | the encoding of a field to the shape channel, only applicable for a "point" mark |
mark | MarkBase | Marks 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. |
name | string | the human readable name and title for the chart |
size? | AxisEncodingBase | the encoding of a field to the size channel, only applicable for a "point" mark |
x | AxisEncodingBase | Definition 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. |
y | AxisEncodingBase | Definition 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
Name | Type | Description |
---|---|---|
aggregate? | Aggregate | The 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. |
field | string | the data field to encode, this must be a BooleanType, IntegerType, FloatType, StringType or DateTimeType field within the provided data |
title? | string | the title to display |
type | FieldType | the 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
Name | Type | Description |
---|---|---|
field | string | the data field to encode, this must be a BooleanType, IntegerType, FloatType, StringType or DateTimeType field within the provided data |
title? | string | the title to display |
type | FieldType | the 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
Name | Type | Description |
---|---|---|
field | string | the field to sort by |
op | Aggregate | the sort operation |
order | SortOrder | the 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:
- 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.
- 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
Name | Type | Description |
---|---|---|
detail? | AxisEncoding | define how to encode the detail |
fill_opacity? | AxisEncoding | define how to encode the fill opacity |
opacity? | AxisEncoding | define how to encode the opacity |
stroke_dash? | AxisEncoding | define how to encode the stroke dash |
stroke_opacity? | AxisEncoding | define how to encode the stroke opacity |
stroke_width? | AxisEncoding | define 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
Name | Type | Description |
---|---|---|
interpolate? | Interpolate | the 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
Name | Type | Description |
---|---|---|
aggregate? | Aggregate | The 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 | boolean | the binning of the values, used to create discrete bins of data from numeric data |
field | string | the data field to encode, this must be a BooleanType, IntegerType, FloatType, StringType or DateTimeType field within the provided data |
title? | string | the title to display |
type | FieldType | the 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
Name | Type | Description |
---|---|---|
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
Name | Type | Description |
---|---|---|
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
Name | Type | Description |
---|---|---|
field | string | the data field to encode, this must be a BooleanType, IntegerType, FloatType, StringType or DateTimeType field within the provided data |
title? | string | the title to display |
type | FieldType | the 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
Name | Type | Description |
---|---|---|
field | string | the data field to encode, this must be a BooleanType, IntegerType, FloatType, StringType or DateTimeType field within the provided data |
timeUnit? | DiscreteTimeUnit | the time unit to use to discretize the field value if the type is temporal |
title? | string | the 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
Name | Type | Description |
---|---|---|
kind | "tick" | the kind of value |
ValueSort
Ƭ ValueSort: Object
Definition to sort in a direction
Type declaration
Name | Type | Description |
---|---|---|
order | SortOrder | the sort order |
type | "value" | the type of sort |