Mark
Marks are the basic visual building block of a visualization. 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. The mark property in a Vega-Lite specification defines the visualization’s mark type.
The supported mark types are point, circle, square, text, tick, bar, line, and area. In general, one mark instance is generated per input data element. However, line and area mark types represent multiple data elements as a contiguous line or shape.
{
"data": ... ,
"mark": ... , // mark
"encoding": ... ,
...
}
| Property | Type | Description |
|---|---|---|
| mark | String | The mark type. One of "bar", "circle", "square", "tick", "line", "area", "point", and "text" (text table). |
The rest of this page presents different chart types that can be created using each mark type.
Point
point mark represents each data point with a symbol.
Dot Plot
Mapping a field to either only x (or only y) of point mark creates a dot plot.
Scatter Plot
Mapping fields to both the x and y channels creates a scatter plot.
Bubble Plot
By mapping a third field to the size channel in the scatter plot, we can create a bubble plot instead.
Scatter Plot with Color and/or Shape
Fields can also be encoded in the scatter plot using the color or shape channels.
For example, this specification encodes the field Origin with both color and shape.
Note that point marks have a border but no fill by default.
See this section for an example with filled point marks.
Circle and Square
circle and square marks are similar to point mark, except that (1) the shape value is always set to circle or square (2) they are filled by default.
Scatterplot with Circle and Square
Here are some examples of scatter plots with circle and square:
Text
text mark represents each data point with a text instead of a point.
Scatterplot with Text
Mapping a field to text channel of text mark sets the mark’s text value. For example, we can modify the color scatterplot above to have each mark as text showing the initial character of its origin.
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.
Dot Plot
For example, the following dot plot use tick marks to show distribution of each car’s Horsepower.
Strip Plot
The following strip-plot use tick mark to represent its data.
Bar
The bar mark represents each data point as a rectangle, where the length is mapped to a quantitative scale.
Single Bar Chart
Mapping a quantitative field to either x or y of the bar mark produces a single bar. In the following example, note that the x channel encodes the sum of the populations.
Bar Chart
If we map a different ordinal field to the y channel, we can produce a horizontal bar chart. Specifying scale.bandSize of an ordinal field will adjust the ordinal scale’s band size. By default, there will be a 1 pixel offset between bars. (See an example that customizes size of the bars.)
Stacked Bar Chart
Adding color to the bar chart (by using the color attribute) creates a stacked bar chart by default. Here we also customize the color’s scale range to make the color a little nicer.
(See config.stack for more detail about customizing stack.)
Layered Bar Chart
To disable stacking, you can alternatively set config.mark.stacked to "none".
This produces a layered bar chart.
To make it clear that bars are layered, we can make marks semi-transparent by setting the opacity to 0.6.
Normalized Stacked Bar Chart
You can also create a normalized stacked bar chart by setting config.mark.stacked to "normalize". Here we can easily see the percentage of male and female population at different ages.
Grouped Bar Chart
Faceting a bar chart produces a grouped bar chart.
Histogram
If the data is not pre-aggregated (i.e. each record in the data field represents one item),
mapping a binned quantitative field to x and aggregate count to y produces a histogram.
Line
The line mark represents the data points stored in a field with a line connecting all of these points. Unlike other marks except area that represents one data element per mark, one line mark represent multiple data element as a single line.
Line Chart
Using line with one ordinal field (typically on x) and another quantitative field (typically on y) produces a simple line chart with a single line.
We can add create multiple lines by grouping along different attributes, such as color or detail.
Colored Line Chart
In the example below, we group points using a new field mapped to color. This produces a line chart with different colors for each line.
Line Chart with Multiple Lines
Alternatively, we can map the same field to detail, creating multiple lines but with the same color instead.
Line Chart with Custom Path
By default, the line’s path (order of points in the line) is determined by data values on the ordinal dimension (x or y) like shown in previous examples. However, a field can be mapped to path channel for determining custom path.
Area
area represent multiple data element as a single area shape.
Area Chart
Using area mark with one ordinal field (typically on x) and one quantitative field (typically on y) produces an area chart. For example, the following area chart shows a number of unemployment people in US over time.
Stacked Area Chart
Adding a color field to area chart creates stacked area chart by default. For example, here we split the area chart across industry.
Normalized Stacked Area Chart
You can also create a normalized stacked area chart by setting config.mark.stacked to "normalize". Here we can easily see the percentage of unemployment across industry.
You can also create a normalized stacked area chart by setting config.mark.stacked to "normalize". Here we can easily see the percentage of unemployment across industry.
Streamgraph
We can also shift the stacked area chart’s baseline to center and produces a streamgraph by setting config.mark.stacked to "center".