Frame mark supports abstract channel values
The standard mark channels such as fill and stroke can be specified as abstract values, allowing them to be data-driven. For example, fill can be set to a numeric value like 0 to represent zero density.
Observable Plot · all subjects
marks
512 notes in this subject, read out of this brain and free to use. This is page 5 of 9.
Frame mark equivalent to rect mark
A frame mark is equivalent to Plot.rect({length: 1}, {fill: 0}).
Frame mark does not accept data
Unlike most marks, a frame never takes data. The first argument to Plot.frame() is the options object, not a data array.
Frame mark default stroke and fill
The default stroke for the frame mark is currentColor, and the default fill is none.
Frame mark with anchor bottom example
Plot.frame({stroke: "red", anchor: "bottom"}) renders only the bottom side of the frame as a single line.
Frame mark anchor option values
The anchor option, introduced in version 0.6.3, accepts values of left, right, top, or bottom. When specified, only that side of the frame is rendered as a single line.
Frame mark anchor ignores fill and corner options
When the anchor option is specified as left, right, top, or bottom, the fill, fillOpacity, rx, and ry options are ignored. Only that side is rendered as a single line.
Frame mark supports standard mark options
The frame mark supports the standard mark options, including insets and rounded corners.
Frame mark basic usage
Create a frame mark with Plot.frame({stroke: "red"}). Frame marks do not require a data argument.
Frame mark can be placed on specific facet
A frame can be placed on a specific facet using the fx or fy option to emphasize a particular facet.
Dot mark symbol and rotate option behavior
The rotate and symbol options can be specified as either channels or constants. When rotate is specified as a number, it is interpreted as a constant; otherwise it is interpreted as a channel. When symbol is a valid symbol name or symbol object (implementing the draw method), it is interpreted as a constant; otherwise it is interpreted as a channel. If the symbol channel's values are all symbols, symbol names, or nullish, the channel is unscaled (values are interpreted literally); otherwise, the channel is bound to the symbol scale.
Dot mark basic usage
The dot mark draws circles or other symbols positioned in x and y dimensions, commonly used for scatterplots. Both x and y channels position dots in two dimensions, but one-dimensional dots (only x or only y) are also supported.
Dot mark channels
The dot mark supports the following channels: x (horizontal position, bound to x scale), y (vertical position, bound to y scale), r (radius/area, bound to r scale which defaults to sqrt), rotate (rotation angle in degrees clockwise), and symbol (categorical symbol, bound to symbol scale, version 0.4.0+).
Dot mark constant options
Dot-specific constant options: r (effective radius in pixels, defaults to 4.5 when using symbol channel, otherwise 3 pixels), rotate (rotation angle in degrees clockwise, defaults to 0), symbol (categorical symbol, defaults to 'circle', version 0.4.0+), frameAnchor (how to position dot within frame, defaults to 'middle'). Dots with nonpositive radius are not drawn.
Dot mark default styling
Stroke defaults to none. Fill defaults to currentColor if stroke is none, and to none otherwise. StrokeWidth defaults to 1.5.
Dot mark r option behavior
The r option can be specified as either a channel or a constant. When radius is specified as a number, it is interpreted as a constant; otherwise it is interpreted as a channel.
Dot default sort behavior
Dots are sorted by descending radius by default (version 0.5.0+) to mitigate occlusion, with smallest dots drawn on top. Set the sort option to null to draw them in input order.
Default filled dot symbols
Plot uses the following default symbols for filled dots: circle, cross, diamond, square, star, triangle, wye.
Default stroked dot symbols
Plot uses the following default symbols for stroked dots: circle, plus, times, triangle2, asterisk, square2, diamond2. These stroked symbols are based on Heman Robinson's research. There is also a hexagon symbol primarily intended for the hexbin transform. Custom D3 or symbol objects implementing the symbol.draw(context, size) method can also be specified.
Plot.dot() function
Plot.dot(data, options) returns a new dot mark with the given data and options. If neither 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₂, …].
Plot.dotY() function
Plot.dotY(data, options) is equivalent to dot() except that if the y option is not specified, it defaults to the identity function and assumes that data = [y₀, y₁, y₂, …]. If an interval is specified such as d3.utcDay, x is transformed to (interval.floor(x) + interval.offset(interval.floor(x))) / 2. If the interval is specified as a number n, x will be the midpoint of two consecutive multiples of n that bracket x. Named UTC intervals such as 'day' are also supported.
Plot.circle() function
Plot.circle(data, options) is equivalent to dot() except that the symbol option is set to 'circle' (version 0.5.0+).
Plot.hexagon() function
Plot.hexagon(data, options) is equivalent to dot() except that the symbol option is set to 'hexagon' (version 0.5.0+).
frameAnchor option for single-dimension dots
If either x or y channels are not specified, the corresponding position is controlled by the frameAnchor option.
Dot mark with bin transform for heatmap
With the bin transform, sized dots can be used as an alternative to a rect-based heatmap to show a two-dimensional distribution.
Dot mark with stack transform
The dot mark can be combined with the stack transform, such as stackY2, to create stacked dot plots. The stackY2 transform places each dot at the upper bound of the associated stacked interval, rather than the middle.
Dot mark with dodge transform for beeswarm
The dodge transform can be used with dot marks to produce beeswarm plots; this is particularly effective when dots have varying radius.
Dot mark accessibility with symbol channel
To improve accessibility for readers with color vision deficiency, the symbol channel can be used in addition to color (or instead of it) to represent ordinal data.
Basic dot mark example
Plot.dot(cars, {x: "economy (mpg)", y: "power (hp)"}).plot({grid: true})
Dot mark with derived value example
Plot.plot({ grid: true, inset: 10, x: {label: "Fuel consumption (gallons per 100 miles)"}, y: {label: "Horsepower"}, marks: [ Plot.dot(cars, {x: (d) => 100 / d["economy (mpg)"], y: "power (hp)"}) ] })
Dot mark with stroke channel example
Plot.plot({ y: { grid: true, tickFormat: "+f", label: "Surface temperature anomaly (°F)" }, color: { scheme: "BuRd" }, marks: [ Plot.ruleY([0]), Plot.dot(gistemp, {x: "Date", y: "Anomaly", stroke: "Anomaly"}) ] })
Dot mark with r channel example
Plot.plot({ grid: true, x: { label: "Daily change (%)", tickFormat: "+f", percent: true }, y: { type: "log", label: "Daily trading volume" }, marks: [ Plot.ruleX([0]), Plot.dot(aapl, {x: (d) => (d.Close - d.Open) / d.Open, y: "Volume", r: "Volume"}) ] })
Dot mark with bin transform example
Plot.plot({ height: 640, marginLeft: 60, grid: true, x: {label: "Carats"}, y: {label: "Price ($)"}, r: {range: [0, 20]}, marks: [ Plot.dot(diamonds, Plot.bin({r: "count"}, {x: "carat", y: "price", thresholds: 100})) ] })
One-dimensional dot example
Plot.dot(alphabet, {x: "letter", r: "frequency"}).plot()
Dot mark lollipop chart example
Plot.plot({ x: {label: null, tickPadding: 6, tickSize: 0}, y: {percent: true}, marks: [ Plot.ruleX(alphabet, {x: "letter", y: "frequency", strokeWidth: 2}), Plot.dot(alphabet, {x: "letter", y: "frequency", fill: "currentColor", r: 4}) ] })
Dot mark normalize and group transforms example
Plot.plot({ height: 660, axis: null, grid: true, x: { axis: "top", label: "Population (%)", percent: true }, color: { scheme: "spectral", domain: stateage.ages, legend: true }, marks: [ Plot.ruleX([0]), Plot.ruleY(stateage, Plot.groupY({x1: "min", x2: "max"}, {...xy, sort: {y: "x1"}})), Plot.dot(stateage, {...xy, fill: "age", title: "age"}), Plot.text(stateage, Plot.selectMinX({...xy, textAnchor: "end", dx: -6, text: "state"})) ] })
Dot mark symbol channel example
Plot.plot({ grid: true, x: {label: "Body mass (g)"}, y: {label: "Flipper length (mm)"}, symbol: {legend: true}, marks: [ Plot.dot(penguins, {x: "body_mass_g", y: "flipper_length_mm", stroke: "species", symbol: "species"}) ] })
Dot mark with stack transform example
Plot.plot({ aspectRatio: 1, x: {label: "Age (years)"}, y: { grid: true, label: "← Women · Men →", labelAnchor: "center", tickFormat: Math.abs }, marks: [ Plot.dot( congress, Plot.stackY2({ x: (d) => 2023 - d.birthday.getUTCFullYear(), y: (d) => d.gender === "M" ? 1 : -1, fill: "gender", title: "full_name" }) ), Plot.ruleY([0]) ] })
Dot mark with geoCentroid example
Plot.plot({ projection: "albers-usa", marks: [ Plot.geo(statemesh, {strokeOpacity: 0.4}), Plot.dot(counties, Plot.geoCentroid({ r: (d) => d.properties.population, fill: "currentColor", stroke: "var(--vp-c-bg)", strokeWidth: 1, sort: sorted ? undefined : null })) ] })
geo mark example: faceted Walmart store openings by decade
Plot.plot({ margin: 0, padding: 0, projection: "albers", fy: {interval: "10 years"}, marks: [ Plot.geo(statemesh, {strokeOpacity: 0.2}), Plot.geo(nation), Plot.geo(walmarts, {fy: "date", r: 1.5, fill: "blue", tip: true, title: "date"}), Plot.axisFy({frameAnchor: "top", dy: 30, tickFormat: (d) => `${d.getUTCFullYear()}'s`}) ] }) This example uses faceting with the fy option to show Walmart store locations grouped by decade, with the interval scale option binning temporal data into 10-year facets.
geo mark example: geodesic circles with generated geometry
Plot.plot({ projection: { type: "equal-earth", rotate: [90, 0] }, color: { legend: true, label: "Distance from Tonga (km)", transform: (d) => 111.2 * d, // degrees to km zero: true }, marks: [ Plot.geo(land), Plot.geo([0.5, 179.5].concat(d3.range(10, 171, 10)), { geometry: d3.geoCircle().center([-175.38, -20.57]).radius((r) => r), stroke: (r) => r, strokeWidth: 2 }), Plot.sphere() ] }) This example uses the geometry channel to generate geodesic circles of increasing radius from a non-GeoJSON data source, showing the shockwave from the Hunga Tonga volcano.
geo mark example: state centroids with centroid transform
Plot.plot({ projection: "albers-usa", marks: [ Plot.geo(states, {strokeOpacity: 0.1, tip: true, title: "name"}), Plot.geo(nation), Plot.dot(states, Plot.centroid({fill: "red", stroke: "var(--vp-c-bg-alt)"})) ] }) This example uses the tip option on geo marks to implicitly apply the centroid transform, computing tip positions; centroids are also explicitly shown as red dots.
sphere and graticule example
Plot.plot({ inset: 2, projection: {type: "orthographic", rotate: [0, -30, 20]}, marks: [ Plot.sphere({fill: "var(--vp-c-bg-alt)", stroke: "currentColor"}), Plot.graticule({strokeOpacity: 0.3}) ] }) This example demonstrates the sphere and graticule helpers with an orthographic projection.
geo mark planar projections for arbitrary surfaces
The geo mark is not limited to spherical geometries. Plot's projection system includes planar projections, which allow you to work with shapes — such as contours — generated on an arbitrary flat surface.
geo mark r option for Point and MultiPoint geometries
The size of Point and MultiPoint geometries is controlled by the r option. When r is specified as a number, it is interpreted as a constant radius in pixels; otherwise it is interpreted as a channel and the effective radius is controlled by the r scale. If the r option is not specified it defaults to 3 pixels. Geometries with a nonpositive radius are not drawn. If r is a channel, geometries will be sorted by descending radius by default.
geo mark r scale default is sqrt
As with the dot mark, the effective radius is controlled by the r scale, which is by default a sqrt scale such that the area of a point is proportional to its value.
geo mark sort option for point geometries
Point geometries are by default sorted by descending radius to reduce occlusion, drawing the smallest circles on top. Set the sort option to null to use input order instead.
geo mark geometry channel
The geo mark's geometry channel can be used to generate geometry from a non-GeoJSON data source.
geo mark tip option applies centroid transform implicitly
By default, the geo mark does not have x and y channels; when you use the tip option, the centroid transform is implicitly applied on the geometries to compute the tip position by generating x and y channels.
geo mark x and y channels with tip option
The x and y position channels may be specified in conjunction with the tip option. These are bound to the x and y scale (or projection), respectively.
geo mark data input formats
A geo mark's data is typically GeoJSON. You can pass a single GeoJSON object, a feature or geometry collection, or an array or iterable of GeoJSON objects; Plot automatically normalizes these into an array of features or geometries.
geo mark property lookup in GeoJSON
When a mark's data is GeoJSON, Plot will look for the specified field name (such as unemployment for fill) in the GeoJSON object's properties if the object does not have this property directly.
geo mark draws geographic features as thematic maps
The geo mark draws geographic features — polygons, lines, points, and other geometry — often as thematic maps. It works with Plot's projection system.
geo function signature and GeoJSON normalization
Plot.geo(data, options) returns a new geo mark. If data is a GeoJSON feature collection, then the mark's data is data.features; if data is a GeoJSON geometry collection, then the mark's data is data.geometries; if data is some other GeoJSON object, then the mark's data is the single-element array [data]. If the geometry option is not specified, data is assumed to be a GeoJSON object or an iterable of GeoJSON objects.
sphere helper function
Plot.sphere() returns a new geo mark with a Sphere geometry object and the given options.
graticule helper function draws global grid
Plot.graticule() returns a new geo mark with a 10° global graticule geometry object and the given options. The graticule helper draws a uniform grid of meridians (lines of constant longitude) and parallels (lines of constant latitude) every 10° between ±80° latitude; for the polar regions, meridians are drawn every 90°.
geo mark example: choropleth unemployment map
Plot.plot({ projection: "albers-usa", color: { type: "quantile", n: 9, scheme: "blues", label: "Unemployment (%)", legend: true }, marks: [ Plot.geo(counties, { fill: "unemployment", title: (d) => `${d.properties.name} ${d.properties.unemployment}%`, tip: true }) ] }) This example creates a choropleth map showing unemployment by county in the United States, using a quantile color scale with the blues scheme.
geo mark example: earthquake point map with r scale
Plot.plot({ projection: "equirectangular", r: {transform: (r) => Math.pow(10, r)}, // Richter to amplitude marks: [ Plot.geo(land, {fill: "currentColor", fillOpacity: 0.2}), Plot.sphere(), Plot.geo(earthquakes, { r: "mag", fill: "red", fillOpacity: 0.2, stroke: "red", title: "title", href: "url", target: "_blank" }) ] }) This example shows earthquakes as points with radii mapped to magnitude, using an r scale transform to convert Richter values to amplitudes.
hexgrid mark purpose
The hexgrid mark draws a hexagonal grid spanning the frame. It can be used with the hexbin transform to show how points are binned.
hexgrid default options
The hexgrid mark has the following defaults: stroke is currentColor, strokeOpacity is 0.1, clip is true, and binWidth is 20 (matching the hexbin transform).