Frame mark

The frame mark draws a rectangle around the plot area.

Plot.frame().plot({x: {domain: [0, 1], grid: true}})

Frames are most commonly used in conjunction with facets to provide better separation (Gestalt grouping) of faceted marks. Without a frame, it can be hard to tell where one facet ends and the next begins.

Show frame:

Plot.plot({
  grid: true,
  inset: 10,
  marks: [
    framed ? Plot.frame() : null,
    Plot.dot(penguins, {x: "culmen_length_mm", y: "culmen_depth_mm", fill: "#eee"}),
    Plot.dot(penguins, {x: "culmen_length_mm", y: "culmen_depth_mm", fx: "species"})
  ]
})

Unlike most marks, a frame never takes data; the first argument to frame is the options object. (For data-driven rectangles, see the rect mark.)

Plot.frame({stroke: "red"}).plot({x: {domain: [0, 1], grid: true}})

While options are often specified in literal values, such as red above, the standard mark channels such as fill and stroke can also be specified as abstract values. For example, in the density heatmap below comparing the delay between eruptions of the Old Faithful geyser (waiting) in x→ and the duration of the eruption (eruptions) in y↑, both in minutes, we fill the frame with black representing zero density.

Plot.plot({
  inset: 30,
  marks: [
    Plot.frame({fill: 0}),
    Plot.density(faithful, {x: "waiting", y: "eruptions", fill: "density"})
  ]
})

TIP

This is equivalent to a rect: Plot.rect({length: 1}, {fill: 0}).

You can also place a frame on a specific facet using the fx or fy option. Below, a frame emphasizes the Gentoo facet, say to draw attention to how much bigger they are. 🐧

Plot.plot({
  marginLeft: 80,
  inset: 10,
  marks: [
    Plot.frame({fy: "Gentoo"}),
    Plot.dot(penguins, {x: "body_mass_g", fy: "species"})
  ]
})

TIP

Or: Plot.rect({length: 1}, {fy: ["Gentoo"], stroke: "currentColor"}).

The anchor option ^0.6.3, if specified to a value of left, right, top or bottom, draws only that side of the frame. In that case, the fill and rx, ry options are ignored.

Plot.plot({
  x: {
    domain: [0, 1],
    grid: true
  },
  marks: [
    Plot.frame({stroke: "red", anchor: "bottom"})
  ]
})

Frame options

The frame mark supports the standard mark options, including insets and rounded corners. It does not accept any data. The default stroke is currentColor, and the default fill is none.

If the anchor option is specified as one of left, right, top, or bottom, that side is rendered as a single line (and the fill, fillOpacity, rx, and ry options are ignored).

frame(options)

Plot.frame({stroke: "red"})

Returns a new frame mark with the specified options.