Point

Edit this page 
{
  "data": ... ,
  "mark": "point",
  "encoding": ... ,
  ...
}

point mark represents each data point with a symbol. Point marks are commonly used in visualizations like scatterplots.

Documentation Overview

Point Mark Properties

// Single View Specification
{
  ...
  "mark": {
    "type": "point",
    ...
  },
  "encoding": ... ,
  ...
}

A point mark definition can contain any standard mark properties and the following special properties:

Property Type Description
shape String | String | ExprRef

Shape of the point marks. Supported values include:

  • plotting shapes: "circle", "square", "cross", "diamond", "triangle-up", "triangle-down", "triangle-right", or "triangle-left".
  • the line symbol "stroke"
  • centered directional shapes "arrow", "wedge", or "triangle"
  • a custom SVG path string (For correct sizing, custom shape paths should be defined within a square bounding box with coordinates ranging from -1 to 1 along both the x and y dimensions.)

Default value: "circle"
size Number | ExprRef

Default size for marks.

  • For point/circle/square, this represents the pixel area of the marks. Note that this value sets the area of the symbol; the side lengths will increase with the square root of this value.
  • For bar, this represents the band size of the bar, in pixels.
  • For text, this represents the font size, in pixels.

Default value:

  • 30 for point, circle, square marks; width/height’s step
  • 2 for bar marks with discrete dimensions;
  • 5 for bar marks with continuous dimensions;
  • 11 for text marks.

Examples

Dot Plot

Mapping a field to either only x or only y of point marks creates a dot plot.

Scatter Plot

Mapping fields to both the x and y channels creates a scatter plot.

By default, point marks only have borders and are transparent inside. You can create a filled point by setting filled to true.

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.

Dot Plot with Jittering

To jitter points on a discrete scale, you can add random offset:

Wind Vector Map

We can also use point mark with angle encoding to create a wind vector map.

Geo Point

By mapping geographic coordinate data to longitude and latitude channels of a corresponding projection, we can visualize geographic points. The example below shows major airports in the US.

Point Config

// Top-level View Specification
{
  ...
  "config": {
    "point": ...,
    ...
  }
}

The point property of the top-level config object sets the default properties for all point marks. If mark property encoding channels are specified for marks, these config values will be overridden.

The point config can contain any point mark properties (except type, style, and clip).