hexgrid constructor signature
Plot.hexgrid({stroke: "red"}) returns a new hexgrid mark with the specified options.
Observable Plot · all subjects
marks
512 notes in this subject, read out of this brain and free to use. This is page 6 of 9.
hexgrid mark supports standard mark options
The hexgrid mark supports the standard mark options.
hexgrid fill option not supported
The fill option is not supported on the hexgrid mark, but a frame mark can be used to achieve the same effect.
hexgrid mark does not accept data or channels
The hexgrid mark does not accept any data and does not support channels.
Grid mark stroke and color option
The color of the grid lines can be controlled with the stroke option, or the alias color. While this option is typically set to a constant color such as red or the default currentColor, it can be specified as a channel to assign colors dynamically based on the associated tick value.
Grid mark overview and purpose
The grid mark is a specially-configured rule for drawing an axis-aligned grid. Like the axis mark, a grid mark is automatically generated by Plot when you use the grid scale option. However, you can also declare a grid mark explicitly, for example to draw grid lines atop rather than below bars.
gridFx function signature and usage
gridFx(data, options) returns a new fx grid with the given options. The optional data is an array of tick values and defaults to the scale's ticks. The grid mark draws a line for each tick value across the whole frame.
gridFy function signature and usage
gridFy(data, options) returns a new fy grid with the given options. The optional data is an array of tick values and defaults to the scale's ticks. The grid mark draws a line for each tick value across the whole frame.
Grid mark example with custom interval and styling
Example: Plot.barX(alphabet, {x: "frequency", y: "letter", sort: {y: "width"}}), Plot.gridX({interval: 1, stroke: "var(--vp-c-bg)", strokeOpacity: 0.5}), Plot.ruleX([0]). This shows grid lines drawn on top of bars with unit intervals and custom stroke styling.
Grid mark example with dashed stroke
Example: Plot.gridX({strokeDasharray: "2", strokeOpacity: 1}).plot({x: {type: "linear"}}). This shows how to create dashed grid lines using the strokeDasharray option.
Grid mark example with dynamic stroke color
Example: Plot.gridX(d3.range(101), {stroke: Plot.identity, strokeOpacity: 1}).plot(). This shows how to use a channel to assign grid colors dynamically based on the associated tick value.
Grid mark interval, ticks, and tickSpacing options
The interval option instructs the grid lines to be drawn at specified intervals. As alternatives, you can use the ticks option to specify the desired number of ticks, or the tickSpacing option to specify the desired separation between adjacent ticks in pixels.
Grid mark options reference
Grid mark options: strokeDasharray (string, defaults to null) for stroke dasharray to create dashed lines; stroke (constant or channel, defaults to currentColor) for the grid color; strokeWidth (constant or channel, defaults to 1) for the grid's line width; strokeOpacity (constant or channel, defaults to 0.1) for stroke opacity; y1 (channel of y positions) for the start of the line; y2 (channel of y positions) for the end of the line. All other common options are supported when applicable, such as title.
Image mark r option for circular clipping
The r option, if not null (the default), enables circular clipping; it may be specified as a constant in pixels or a channel. When r is specified, it defaults the width and height to twice the effective radius. Use the preserveAspectRatio option to control which part of the image is clipped.
Image mark constant options
The following image-specific constant options are supported: frameAnchor (how to position the image within the frame, defaults to 'middle'), preserveAspectRatio (the aspect ratio, defaults to 'xMidYMid meet'), crossOrigin (the cross-origin behavior), and imageRendering (the image-rendering attribute, defaults to 'auto' for bilinear interpolation, added in version 0.6.4).
Image mark preserveAspectRatio slice option
To crop the image instead of scaling it to fit, set preserveAspectRatio to 'xMidYMid slice'. For example, 'xMidYMin slice' favors the top part of an image to show heads in portrait images.
Image mark imageRendering pixelated option
The imageRendering option may be set to 'pixelated' to disable bilinear interpolation on enlarged images; however, this is not supported in WebKit.
Image mark drawing order
Images are drawn in input order, with the last data drawn on top. Images do not support either a fill or a stroke.
Image mark frameAnchor when x or y not specified
If either of the x or y channels are not specified, the corresponding position is controlled by the frameAnchor option.
Plot.image() constructor signature
Plot.image(data, options) returns a new image mark with the given data and options. If neither the x nor y nor frameAnchor options are specified, data is assumed to be an array of pairs [[x₀, y₀], [x₁, y₁], [x₂, y₂], …] such that x = [x₀, x₁, x₂, …] and y = [y₀, y₁, y₂, …].
Image mark example: beeswarm with dodge transform
Plot.plot({ inset: 20, height: 280, marks: [ Plot.image( presidents, Plot.dodgeY({ x: "First Inauguration Date", r: 20, preserveAspectRatio: "xMidYMin slice", src: "Portrait URL", title: "Name" }) ) ] })
Image mark example: circular clipping with preserveAspectRatio
Plot.plot({ x: {inset: 20, label: "First inauguration date"}, y: {insetTop: 4, grid: true, label: "Any opinion (%)", tickFormat: "+f"}, marks: [ Plot.ruleY([0]), Plot.image(presidents, { x: "First Inauguration Date", y: (d) => d["Very Favorable %"] + d["Somewhat Favorable %"] + d["Very Unfavorable %"] + d["Somewhat Unfavorable %"], src: "Portrait URL", r: 20, preserveAspectRatio: "xMidYMin slice", title: "Name" }) ] })
Image mark example: scatterplot with portraits
Plot.plot({ inset: 20, x: {label: "First inauguration date"}, y: {grid: true, label: "Net favorability (%)", tickFormat: "+f"}, marks: [ Plot.ruleY([0]), Plot.image(presidents, { x: "First Inauguration Date", y: (d) => d["Very Favorable %"] + d["Somewhat Favorable %"] - d["Very Unfavorable %"] - d["Somewhat Unfavorable %"], src: "Portrait URL", width: 40, title: "Name" }) ] })
Image mark definition
The image mark draws images centered at the given position in x and y. It is often used to construct scatterplots in place of a dot mark.
Image mark channels
The image mark supports the following channels: x (horizontal position, bound to x scale), y (vertical position, bound to y scale), width (image width in pixels), height (image height in pixels), r (image radius, bound to r scale, added in version 0.6.6), and rotate (rotation angle in degrees clockwise, added in version 0.6.6).
Image mark required option src
The required src option specifies the URL (or relative path) of each image. If src is specified as a string that starts with a dot, slash, or URL protocol (e.g., 'https:') it is assumed to be a constant; otherwise it is interpreted as a channel.
Image mark width and height defaults
The width and height options default to 16 pixels unless r is specified. When width or height is specified as a number, it is interpreted as a constant; otherwise it is interpreted as a channel. Images with a nonpositive width or height are not drawn. If a width is specified but not a height, or vice versa, the one defaults to the other.
line mark z channel null forces single varying-color line
If stroke and y channels are strictly equal (making color encoding redundant with position), z defaults to null, producing a single varying-color line. Setting z to null explicitly forces a single line where stroke varies within the line instead of producing separate lines for each color.
line mark marker options support
The line mark supports marker options to add a marker (such as a dot or an arrowhead) on each of the control points.
line mark required channels x and y
The line mark requires two channels: x for horizontal position (bound to x scale) and y for vertical position (bound to y scale).
line mark shorthand when x and y not defined
If x and y options are not defined, the line mark assumes data is an iterable of points [[x₁, y₁], [x₂, y₂], …], allowing shorthand notation. However, this shorthand loses automatic x and y axis labels, reducing legibility; use the label scale option to restore them.
lineY constructor defaults
The lineY constructor provides default channel definitions where y defaults to identity and x defaults to [0, 1, 2, …], allowing you to pass an array of numbers as data. This renders lines that go up instead of to the right.
lineX constructor defaults
The lineX constructor provides default channel definitions where x defaults to identity and y defaults to [0, 1, 2, …], allowing you to pass an array of numbers as data. This renders lines that go to the right.
line mark points connected in input order
Points in lines are connected in input order: the first point is connected to the second, the second to the third, and so on. Line data is typically in chronological order; unsorted data may produce gibberish. If data is not sorted, use the sort transform.
line mark z channel for grouping series
To draw multiple lines, use the z channel to group tidy data into series. If z is not specified, it defaults to stroke if stroke is a channel, or fill if fill is a channel. This automatically groups series by the stroke or fill value.
line mark series drawing order
When using z, lines are drawn in input order. The last series is drawn on top. Use the sort transform to control drawing order, such as placing highlighted series on top of others for improved readability.
line mark stroke defaults
The stroke defaults to currentColor if fill is none, and to none otherwise. The strokeWidth defaults to 1.5, strokeLinecap and strokeLinejoin default to round, and strokeMiterlimit defaults to 1.
line mark fill defaults
The fill defaults to none for line marks.
line mark channel segmentation on value changes
If the stroke value (or fill, fillOpacity, strokeOpacity, strokeWidth, opacity, href, title, ariaLabel) varies within series, the line will be segmented by that value. The stroke color applies to the interval spanning the current data point and the following data point. This behavior applies to multiple varying channels.
line mark undefined values create gaps
If any channel values are undefined, null, or NaN, gaps will appear between adjacent points, dividing the line into multiple segments. This is different from filtering, which would interpolate between remaining points.
line mark curve option controls interpolation
Interpolation is controlled by the curve option. The default curve is auto, which is equivalent to linear if there is no projection, and otherwise uses the associated projection. Other options include step, basis, and catmull-rom for smoothing. Spherical interpolation can be disabled by setting curve to linear.
line mark with spherical projection
With a spherical projection, line segments become geodesics, taking the shortest path between two points on the sphere and wrapping around the antimeridian at 180° longitude.
line mark ordinal position values
While uncommon, you can draw a line with ordinal position values. For example, x can represent an ordinal age group while y represents a proportion or value for that group.
lineX interval option and binY transform
If the interval option is specified on lineX, the binY transform is implicitly applied. The reducer of the output x channel may be specified via the reduce option, which defaults to first. Use sum reducer to default to zero instead of showing gaps when the observed value represents a quantity. The interval option is recommended to regularize sampled data.
line constructor signature
Plot.line(data, options) returns a new line with the given data and options. If neither x nor y options are specified, data is assumed to be an array of pairs [[x₀, y₀], [x₁, y₁], [x₂, y₂], …].
lineY constructor signature
Plot.lineY(data, options) is similar to line except that if y is not specified, it defaults to the identity function and data is assumed to be [y₀, y₁, y₂, …]. If x is not specified, it defaults to [0, 1, 2, …].
line mark single point rendering
If a line segment consists of only a single point, it may appear invisible unless rendered with rounded or square line caps. Some curves such as cardinal-open only render a visible segment if it contains multiple points.
line mark z channel explicit recommendation
When using stroke, fill, fillOpacity, strokeOpacity, strokeWidth, opacity, href, title, or ariaLabel as channels, setting an explicit z channel (possibly to null) is strongly recommended.
Linear regression with multiple groups
Multiple regressions can be defined by specifying z, fill, or stroke channels. This allows drawing separate regression lines for different groups within the same plot.
linearRegressionY mark
linearRegressionY(data, options) draws a linear regression line where y is the dependent variable and x is the independent variable. This is the common orientation. The mark represents the estimated linear relation using the equation y = a + b*x, where a is the intercept and b is the slope, fit using the least squares approach.
linearRegressionX mark
linearRegressionX(data, options) draws a linear regression line where x is the dependent variable and y is the independent variable. This is the uncommon orientation.
Linear regression mark options
Linear regression marks accept the following options: stroke (stroke color of the regression line, defaults to currentColor), fill (fill color of the confidence band, defaults to the line's stroke), fillOpacity (fill opacity of the confidence band, defaults to 0.1), ci (confidence interval in [0, 1), or 0 to hide bands, defaults to 0.95), precision (distance in pixels between samples of the confidence band, defaults to 4). Multiple regressions can be defined by specifying z, fill, or stroke.
Linear regression confidence interval default
The ci (confidence interval) option for linear regression marks defaults to 0.95, representing a 95% confidence band around the regression line showing the range where the model parameters lie with that probability.
Linear regression precision default
The precision option for linear regression marks, which controls the distance in pixels between samples of the confidence band, defaults to 4.
Linear regression is not symmetric
Regression is not symmetric: linearRegressionY (y as a function of x) gives different results than linearRegressionX (x as a function of y) unless all points are perfectly aligned. In the worst case where the two variables are statistically independent, linearRegressionY produces a horizontal line while linearRegressionX produces a vertical line.
Simpson's paradox with linear regression
Linear models can lead to wrong conclusions about data when the underlying structure is nonlinear or when data contains subpopulations with different properties. Simpson's paradox occurs when data has a positive correlation within each subgroup but a negative correlation overall, or vice versa. An example is penguin culmen measurements, which show positive correlation within each species but negative correlation across all species.
Link mark standard mark options support
The link mark supports the standard mark options, curve options to control interpolation between points, and marker options to add markers such as dots or arrowheads on each control point.
Link mark recommended curve types
Since a link always has two points by definition, only the following curves are recommended: linear, step, step-after, step-before, bump-x, or bump-y. The linear curve is incapable of showing a fill since a straight line has zero area.
Link mark geodesic rendering with projection
With a spherical projection and the default auto curve, the link mark will render a geodesic, which is the shortest path between two points on the surface of the sphere. Setting the curve to linear will instead draw a straight line between the projected points.
Link mark treeLink transform default curve
The treeLink transform sets the default curve option to bump-x for the link mark when used by the composite tree mark.