The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published unlisted
Edited
Sep 14, 2022
1 star
Plot.plot({
marginLeft: 75,
marginRight: 70,
x: { insetRight: 10 },
facet: { data: penguins, y: "island", marginRight: 70 },
marks: [
Plot.frame(),
Plot.barX(
penguins,
Plot.groupY({ x: "count" }, { y: "species", fill: "sex" })
),
Plot.text(["Torgersen only has Adelie penguins!"], {
frameAnchor: "top-right",
dx: -10,
fy: ["Torgersen"]
})
]
})
Plot.plot({
marginLeft: 75,
marginRight: 70,
x: { insetRight: 10 },
marks: [
Plot.frame(),
Plot.barX(
penguins,
Plot.groupY({ x: "count" }, { y: "species", fill: "sex", fy: "island" })
),
Plot.text(["Torgersen only has Adelie penguins!"], {
frameAnchor: "top-right",
dx: -10,
fy: ["Torgersen"]
})
]
})
Plot.plot({
marginLeft: 75,
marginRight: 70,
x: { insetRight: 10 },
facet: { marginRight: 70 },
marks: [
Plot.frame(),
Plot.barX(
penguins,
Plot.groupY({ x: "count" }, { y: "species", fill: "sex", fy: "island" })
),
Plot.text(["Torgersen only has Adelie penguins!"], {
fy: ["Torgersen"],
frameAnchor: "top-right",
dx: -10
})
]
})
Plot.plot({
height: 250,
width: 250,
color: { type: "ordinal", scheme: "tableau10" },
axis: null,
marks: [
Plot.rect("12345", { fy: (d) => d, fill: (d) => d }),
Plot.dot("12345", {
frameAnchor: "middle",
r: 19,
fill: (d) => d,
stroke: "white",
fx: (d) => d
}),
Plot.text(d3.cross("12345", "12345"), {
frameAnchor: "middle",
text: ([a, b]) => a * b,
fill: "white",
fx: (d) => d[1],
fy: (d) => d[0]
})
]
})
Plot.text(["Hello\nyou\nare\nhere"], {
frameAnchor: "bottom-right"
}).plot()
Plot.plot({
marks: [
Plot.frame(),
Plot.dot(penguins, {
x: "culmen_length_mm",
y: "culmen_depth_mm",
fill: "sex",
fx: "species",
fy: "island"
})
]
})
{
const data = Float64Array.of(1, 2, 3);
const facets = ["a", "b", "c"];
return Plot.plot({
height: 180,
facet: {data, x: facets},
marks: [
(fix ? Plot : PlotMain).barY(data, {
stroke: (d) => d, // channel as accessor
fill: data, // channel as array
fillOpacity: 0.5,
facet: "exclude"
})
]
});
}
Plot = FileAttachment("plot@6.umd.js").url().then(require)
PlotMain = 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.
