The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published unlisted
Edited
Jun 24, 2022
12 stars
mark = Plot.rectY(penguins, Plot.binX({ y: "count" }, { x: "body_mass_g" }))
V = mark.initialize()
V.channels.x1.value // bin (low)
V.channels.x2.value // bin (high)
V.channels.y2.value // counts
V.facets // index of the bins by facet
inspectMark(Plot.lineY([1, 2, 4, 0]))
inspectMark(`Plot.dotX(["a", "b", "c"])`)
inspectMark(`Plot.dotY(["a", "b", "c"])`)
inspectMark(`
Plot.dot(penguins, Plot.reverse({
x: "body_mass_g",
y: "island",
fill: "black",
stroke: "culmen_length_mm"
}))
`)
inspectMark(
Plot.rectY(penguins, Plot.binX({ y: "count" }, { x: "body_mass_g" })),
{ facet: { data: penguins, x: "island" } }
)
Plot.boxX(penguins, { x: "body_mass_g", y: "species" }).plot()
inspectMark(Plot.boxX(penguins, { x: "body_mass_g", y: "species" }))
inspectMark(
Plot.hexagon(
penguins,
Plot.hexbin({ y: "count" }, { x: "body_mass_g", y: "culmen_length_mm" })
)
)
inspectMark = (marks, { facet } = {}) => {
penguins; // necessary hack for mark-as-text (todo: clean up)
const facets =
facet && facet.data && (facet.x || facet.y)
? ((X) => d3.group(d3.range(facet.data.length), (i) => X[i]))(
Plot.valueof(facet.data, facet.x || facet.y)
)
: undefined;
let displayMark = "";
if (typeof marks === "string") {
displayMark = md`~~~js\n${marks.replace(/^\n+|\n+$/g, "")}\n~~~`;
marks = eval(marks);
}
if (!Array.isArray(marks)) marks = [marks];
else marks = marks.flat();
return html`${marks
.filter((d) => d)
.map((mark) => {
const V = mark.initialize(facets ? facets.values() : undefined);
return md`
${displayMark}
<!-- Constants -->
<h4 style="font: bold 13px/1.2 var(--sans-serif);">Constants</h4>
${Inputs.table(
Object.entries(mark)
.filter(
([key, value]) =>
value !== undefined && !["data", "channels"].includes(key)
)
.map(([key, value]) => ({ key, value })),
{ maxWidth: 500, select: false, sort: "key" }
)}
<!-- Channels -->
<h4 style="font: bold 13px/1.2 var(--sans-serif);">Channels</h4>
${Array.from(
V.facets,
(index, i) => html`
${
facets
? html`<span style="font: italic 13px/1.2 var(--sans-serif);">facet: ${
[...facets.keys()][i]
}</span>`
: ""
}
${Inputs.table(
Array.from(index, (i) =>
Object.fromEntries([
["i", i],
...Object.entries(V.channels).map(([key, { value }]) => [key, value[i]])
])
),
{
// width: 100 * (1 + Object.keys(V.channels).length),
layout: "fixed",
maxWidth: 500,
select: false
}
)}`
)}`;
})}`;
}
Plot = require("@observablehq/plot/dist/plot.umd.js")
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.
