data = penguins
examples = [
["Bar chart", `Plot.auto(penguins, {x: "species"}).plot()`],
["Histogram", `Plot.auto(penguins, {x: "body_mass_g"}).plot()`],
["Scatterplot", `Plot.auto(penguins, {x: "culmen_length_mm", y: "body_mass_g"}).plot()`],
["Heatmap", `Plot.auto(penguins, {x: "culmen_length_mm", y: "body_mass_g", color: "count"}).plot()`],
["Dot plot", `Plot.auto(penguins, {x: "species", y: "island"}).plot()`],
["Fancy bar chart", `Plot.auto(penguins, {x: "species", color: {reduce: "mode", value: "sex"}}).plot()`],
]
nodes = acorn.parse(value, { ecmaVersion: 11, sourceType: "module" }).body
dataName = nodes[0].expression.callee.object.arguments[0].name
impl = {
let val = value;
const {start, end} = nodes[0].expression.callee.object.callee.property;
return value.slice(0, start) + "autoImpl" + value.slice(end, nodes[0].expression.callee.object.end);
}
evalImpl = new Function("Plot", dataName, `return ${impl}`)(Plot, data)
compiled = {
let {
fx,
fy,
x: {value: xValue, zero: xZero},
y: {value: yValue, zero: yZero},
color: {value: colorValue},
size: {value: sizeValue},
markImpl,
markOptions,
transformImpl,
transformOptions,
colorMode
} = evalImpl;
// de-materialize values
if (typeof xValue === "string") markOptions.x = xValue;
else if (xValue) markOptions.x.value = xValue;
if (typeof yValue === "string") markOptions.y = yValue;
else if (yValue) markOptions.y.value = yValue;
if (typeof colorValue === "string") markOptions[colorMode] = colorValue;
else if (colorValue) markOptions[colorMode].value = colorValue;
if (typeof sizeValue === "string") markOptions.size = sizeValue;
else if (sizeValue) markOptions.size.value = sizeValue;
const markOptionsString = transformImpl
? `Plot.${transformImpl.name}(${JSON.stringify(transformOptions)}, ${JSON.stringify(markOptions)})`
: JSON.stringify(markOptions);
const frame = fx != null || fy != null ? `Plot.frame({strokeOpacity: 0.1})` : null;
const rules = [xZero ? `Plot.ruleX([0])` : null, yZero ? `Plot.ruleY([0])` : null];
const mark = `Plot.${markImpl.name}(data, ${markOptionsString})`;
return `Plot.plot({
marks: [
${(colorMode === "stroke" ? [frame, ...rules, mark] : [frame, mark, ...rules])
.filter((mark) => mark)
.join(",\n ")}
]
})`;
}
compiledPrettier = prettier.format(compiled, {
parser: "babel",
plugins: [prettier]
})
Plot = require(await FileAttachment("plot.umd.js").url())
acorn = require("acorn@8")
prettier = require("prettier@2", "prettier@2/parser-babel.js")
import {set} from "@observablehq/synchronized-inputs"
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.
