Plot.plot({
grid: true,
marks: [
Plot.dot(penguins, {
x: "culmen_length_mm",
y: "culmen_depth_mm",
fill: "species"
}),
Plot.line(
penguins,
Plot.regression({
x: "culmen_length_mm",
y: "culmen_depth_mm",
strokeDasharray: [1.5, 4],
strokeWidth: 1.5
})
),
Plot.line(
penguins,
Plot.regression({
x: "culmen_length_mm",
y: "culmen_depth_mm",
stroke: "species"
})
)
]
})
Plot.plot({
grid: true,
marks: [
Plot.dot(penguins, {
x: "culmen_length_mm",
y: "culmen_depth_mm",
fill: "species"
}),
Plot.line(
penguins,
Plot.regression({
x: "culmen_length_mm",
y: "culmen_depth_mm",
strokeDasharray: [1.5, 4],
strokeWidth: 1.5,
type,
bandwidth: param,
order: param
})
),
Plot.line(
penguins,
Plot.regression({
x: "culmen_length_mm",
y: "culmen_depth_mm",
stroke: "species",
type,
bandwidth: param,
order: param
})
)
]
})
Plot.plot({
grid: true,
facet: {
data: penguins,
x: "sex"
},
marks: [
Plot.frame(),
Plot.dot(penguins, {
x: "culmen_length_mm",
y: "culmen_depth_mm",
fill: "species"
}),
Plot.line(
penguins,
Plot.regression({
x: "culmen_length_mm",
y: "culmen_depth_mm",
strokeDasharray: [1.5, 4],
strokeWidth: 1.5
})
),
Plot.line(
penguins,
Plot.regression({
x: "culmen_length_mm",
y: "culmen_depth_mm",
stroke: "species"
})
)
],
width
})
function addRegression(Plot) {
Plot.regression = function ({ x, y, type, bandwidth, order, ...options }) {
type = String(type).toLowerCase();
const regressor =
type === "quad"
? reg.regressionQuad()
: type === "poly"
? reg.regressionPoly()
: type === "pow"
? reg.regressionPow()
: type === "exp"
? reg.regressionExp()
: type === "log"
? reg.regressionLog()
: type === "loess"
? reg.regressionLoess()
: reg.regressionLinear();
if (bandwidth && regressor.bandwidth) regressor.bandwidth(bandwidth);
if (order && regressor.order) regressor.order(order);
const z = options.z || options.stroke; // maybeZ
return Plot.transform(options, function (data, facets) {
const X = Plot.valueof(data, x);
const Y = Plot.valueof(data, y);
const Z = Plot.valueof(data, z);
regressor.x((i) => X[i]).y((i) => Y[i]);
const regFacets = [];
const points = [];
for (const facet of facets) {
const regFacet = [];
for (const I of Z ? d3.group(facet, (i) => Z[i]).values() : [facet]) {
const reg = regressor(I);
for (const d of reg) {
const j = points.push(d) - 1;
if (z) d[z] = Z[I[0]];
regFacet.push(j);
}
}
regFacets.push(regFacet);
}
return { data: points, facets: regFacets };
});
};
return Plot;
}
penguins = FileAttachment("penguins.csv").csv({typed: true})
reg = require("d3-regression@1")
Plot = addRegression(await require("@observablehq/plot@0.6"))
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.
