Vector mark r option
The r option specifies a radius in pixels for the vector mark. It defaults to 3.5.
Observable Plot · all subjects
marks
512 notes in this subject, read out of this brain and free to use. This is page 9 of 9.
Vector mark anchor option
The anchor option positions the vector relative to its anchor point. It defaults to middle. The supported values are: start - the arrow will start at the given xy position and point in the direction given by the rotation angle; middle - the arrow will be positioned such that its midpoint intersects the given xy position; end - the arrow will maintain the same orientation, but be positioned such that it ends in the given xy position.
Vector mark frameAnchor option
The frameAnchor option controls how to position the vector within the frame. It defaults to middle.
Vector mark default stroke styling
The stroke defaults to currentColor. The strokeWidth defaults to 1.5, and the strokeLinecap defaults to round.
Vector mark x and y channel behavior when unspecified
If the x channel is not specified, vectors will be horizontally centered in the plot (or facet). If the y channel is not specified, vectors will be vertically centered in the plot (or facet). Typically either x, y, or both are specified.
Vector mark rotate and length as channels or constants
The rotate and length options can be specified as either channels or constants. When specified as a number, it is interpreted as a constant; otherwise it is interpreted as a channel.
Vector mark drawing order
Vectors are drawn in input order, with the last data drawn on top. If sorting is needed, say to mitigate overplotting by drawing the smallest vectors on top, consider a sort transform.
Plot.vector() constructor signature and example
Plot.vector(wind, {x: "longitude", y: "latitude", length: "speed", rotate: "direction"}) returns a new vector with the given data and options. If neither the x nor y 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₂, …].
Plot.vectorY() constructor
Plot.vectorY(cars.map((d) => d["economy (mpg)"])) is equivalent to vector except that if the y option is not specified, it defaults to the identity function and assumes that data = [y₀, y₁, y₂, …].
Plot.spike() constructor
Plot.spike(counties, Plot.geoCentroid({length: (d) => d.properties.population})) is equivalent to vector except that the shape defaults to spike, the stroke defaults to currentColor, the strokeWidth defaults to 1, the fill defaults to stroke, the fillOpacity defaults to 0.3, and the anchor defaults to start.
Waffle mark versions and releases
The waffle mark was introduced in version 0.6.16 via pull request 2040.
Waffle mark purpose and use cases
The waffle mark displays a quantity for a given category, similar to the bar mark but subdivided into square cells that allow easier counting. Waffles are useful for reading exact quantities. Waffles are rendered using SVG patterns, making them more performant than alternatives such as the dot mark for rendering many points.
waffleX interval option
If an interval is specified on waffleX, such as d3.utcDay, x1 and x2 can be derived from x: interval.floor(x) is invoked for each x to produce x1, and interval.offset(x1) is invoked for each x1 to produce x2. If the interval is specified as a number n, x1 and x2 are taken as the two consecutive multiples of n that bracket x. Named UTC intervals such as day are also supported.
waffleY required and optional channels
waffleY requires the following channels: | Channel | Scale | Description | |---------|-------|-------------| | y1 | y scale | The starting vertical position | | y2 | y scale | The ending vertical position | The following optional channel is supported: | Channel | Scale | Description | |---------|-------|-------------| | x | x scale (must be band) | The horizontal position |
waffleY shorthand and defaults
If neither y1 nor y2 is specified, the y option may be specified as shorthand to apply an implicit stackY transform; this is typical for a vertical waffle chart with columns aligned at y = 0. If y is not specified, it defaults to identity. If options is undefined, then it defaults to y2 as identity and x as the zero-based index [0, 1, 2, …], allowing an array of numbers to be passed to waffleY for a quick sequential waffle chart. If the x channel is not specified, the column will span the full horizontal extent of the plot or facet.
waffleY interval option
If an interval is specified on waffleY, such as d3.utcDay, y1 and y2 can be derived from y: interval.floor(y) is invoked for each y to produce y1, and interval.offset(y1) is invoked for each y1 to produce y2. If the interval is specified as a number n, y1 and y2 are taken as the two consecutive multiples of n that bracket y. Named UTC intervals such as day are also supported.
waffleY function signature and example
Plot.waffleY(olympians, Plot.groupX({y: "count"}, {x: "sport"})) This example returns a new vertical waffle with the given data and options, grouping by sport on the x channel and counting items for the y channel.
Waffle multiple option affects cell squareness
To set the number of rows or columns directly, use the multiple option. Note that manually setting the multiple may result in non-square cells if there isn't enough room. Alternatively, you can bias the automatic multiple while preserving square cells by setting the padding option on the corresponding band scale: padding defaults to 0.1; a higher value may produce more rows, while a lower or zero value may produce fewer rows.
Waffle cells may not align with scale ticks
The number of rows in a waffle is guaranteed to be an integer, but it might not be a multiple or factor of the x-axis or y-axis tick interval. For example, the waffle might have 15 rows while the x-axis shows ticks every 100 units.
Waffle mark unit option
The unit option determines the quantity each waffle cell represents. It defaults to 1. The unit may be set to a value greater than one for large quantities, or less than one but greater than zero for small fractional quantities.
Waffle mark round option
The round option controls whether waffles represent fractional values with partial first or last cells. It defaults to false. Set round to true to disable partial cells, or to Math.ceil or Math.floor to round up or down. true is equivalent to Math.round.
Waffle mark stacking behavior
Waffles can be stacked and implicitly apply the stack transform when only a single quantitative channel is supplied.
waffleX and waffleY orientations
The waffle mark comes in two orientations: waffleY extends vertically, while waffleX extends horizontally. The waffle mark automatically determines the appropriate number of cells per row or per column such that the cells are square, don't overlap, and are consistent with position scales.
Waffle mark standard options
The waffle mark supports the standard mark options, including insets and rounded corners. The stroke defaults to none. The fill defaults to currentColor if the stroke is none, and to none otherwise.
Waffle mark rendering options table
The waffle mark supports the following options to control rendering of cells: | Option | Type | Default | Description | |--------|------|---------|-------------| | unit | number | 1 | The quantity each cell represents | | multiple | number | undefined | The number of cells per row (or column); if undefined, uses as many cells per row/column that fit within available bandwidth while ensuring square cells, or one cell per row if square cells are not possible | | gap | number | 1 | The separation between adjacent cells, in pixels | | round | boolean or function | false | Whether to round values to avoid partial cells; can be specified as Math.floor, Math.ceil, or true (equivalent to Math.round) |
Plot marks are composable
Marks in Observable Plot are composable, allowing you to combine multiple marks in a single plot. You can also extend Plot with custom marks to create nearly any visualization.
Column to visual property mapping
Observable Plot works by assigning columns of data to visual properties (channels) of marks. For example, data columns like 'weight', 'height', and 'sex' can be mapped to visual channels like x, y, and stroke.
Basic dot mark with channels example
The following code creates a scatterplot of body measurements where weight maps to x, height to y, and sex to stroke color: Plot.dot(olympians, {x: "weight", y: "height", stroke: "sex"}).plot({color: {legend: true}})
Density mark example
The following code creates a density visualization of weight and height data: Plot.density(olympians, {x: "weight", y: "height", stroke: "sex"}).plot()
Example: custom arealineY composite mark
function arealineY(data, {color, fillOpacity = 0.1, ...options} = {}) { return Plot.marks( Plot.ruleY([0]), Plot.areaY(data, {fill: color, fillOpacity, ...options}), Plot.lineY(data, {stroke: color, ...options}) ); } This example shows a composite mark combining a rule, area, and line, with default fillOpacity of 0.1 that can be overridden.
Custom composite marks via Plot.marks()
Plot allows defining custom composite marks by using Plot.marks() to combine multiple built-in marks. For example, a composite arealineY mark can combine Plot.ruleY(), Plot.areaY(), and Plot.lineY() marks. Plot internally uses this technique for marks like axis and box.
Bar mark applies implicit stack transform with fill encoding
When the fill encoding is added to a bar mark (like barX), an implicit stack transform is automatically applied.