Published unlisted
Edited
Nov 23, 2021
import { data } from "@observablehq/plot-exploration-penguins"
Mark API
A mark is an object that exposes an initialize and a render function.
The initialize function is called once and is passed the data and options (expect for marks which don't consume data, such as Plot.frame). This function specifies the channels it uses (or requests) and the scales they are associated with.
Plot then commingles all the values in all the channels associated with the same scale, and determines the scales’ types, domains &c.
The scales are then applied on all the channels.
The render function is called once per facet with the following arguments:
index - an index of the marks that should be drawn (it may or may not be the same as the initial data array, depending on the transform that has been provided in the options)
scales - an object with the instantiated scales for x, y, color, fx, fy…
values - scaled channels, ready to use as attributes of SVG elements
dimensions - an object with {width, height, marginLeft, marginRight, marginBottom, marginTop, facetMarginTop…}
axes (undefined in the case of facets); used by the internal “facet” mark.
we want to add {facet} and {svg} and {root} and maybe more…?
mutable debug = ({})
Plot.plot({
facet: { data, x: "sex" },
marks: [
Plot.dot(data, { x: "island", y: "body_mass", fill: "species" }),
(() => {
let facetIndex = 0;
return function (
data,
scales,
channels,
{ marginTop, marginBottom, marginLeft, marginRight, width, height } // todo: remove margins? // todo: add current facet
) {
mutable debug = arguments;
return svg`<rect x=${marginLeft} width=${
width - marginLeft - marginRight
} y=${marginTop} height=${
height - marginTop - marginBottom
} fill="rgba(255,255,255,0.7)" stroke=black></rect><g transform="translate(${
(width + marginLeft - marginRight) / 2
},${(height + marginTop - marginBottom) / 2})">
<text dy=0.38em>${width - marginLeft - marginRight}px × ${
height - marginTop - marginBottom
}px</text>
<text dy=-1em>${scales.fx.domain()[facetIndex++]}</text>
</g>`;
};
})()
]
})
import { PlotLatest as Plot } from "@fil/plot-early-bird"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
