Published unlisted
Edited
Jan 20, 2022
Plot.dot(data, {
x: "flipper_length",
y: "body_mass",
fill: "species",
title: "species",
layouts
}).plot({ grid: true })
Plot.dot(data, {
x: "flipper_length",
y: "body_mass",
fill: "species",
title: "species",
layouts
}).plot({ facet: { data, x: "island" }, grid: true })
Plot.dot(data, {
x: "flipper_length",
y: "body_mass",
fill: "species",
title: "species",
layouts: [layoutCollide]
}).plot({ facet: { data, x: "island" }, grid: true })
function layoutDarker(values) {
for (let i = 0; i < values.fill.length; i++)
values.fill[i] = d3.rgb(values.fill[i]).darker();
return () => {};
}
function layoutCollide({ x: X, y: Y, r: R }) {
return (index) => {
const nodes = Array.from(index, (i) => ({
i,
x: X[i],
y: Y[i],
r: R ? R[i] : 4
}));
const simulation = d3
.forceSimulation()
.force(
"x",
d3.forceX(({ x }) => x)
)
.force(
"y",
d3.forceY(({ y }) => y)
)
.force(
"collide",
d3.forceCollide(({ r }) => 1 + r)
);
simulation.nodes(nodes).tick(30).stop();
for (const node of nodes) (X[node.i] = node.x), (Y[node.i] = node.y);
};
}
import { data } from "@observablehq/plot-exploration-penguins"
Plot = FileAttachment("plot.umd.js").url().then(require)
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.
