The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Unlisted
Edited
Nov 14, 2024
Plot.plot({
width: 960,
height: 480,
fx: { domain: ["D", "E", "F"] },
color: { legend: "ramp", domain: ["IF", "SI1", "I1"] },
y: { domain: [51, 71.9], insetTop: 20, labelAnchor: "center" },
marginLeft: 40,
marginBottom: 40,
marginTop: 35,
marks: [
Plot.axisFx({ anchor: "top" }),
Plot.frame({ anchor: "top", strokeOpacity: 1 }),
Plot.dot(diamonds, {
fx: "color", // outer x facet
y: "depth", // shared y scale
fill: "clarity", // shared color scale
render(index, { scales }, _values, { facet, ...dimensions }) {
const data = Array.from(index, (i) => this.data[i]); // subplot dataset as a subset of the data
const plot = Plot.plot({
...dimensions,
marginTop: 60,
...scales, // shared color scale, shared y scale
fx: {
axis: "bottom",
paddingOuter: 0.1,
paddingInner: 0.2,
label: index.fi ? null : undefined
}, // inner x facet, with a label only on the first top-level facet
x: {
domain: scales.color.domain,
axis: "top",
labelAnchor: "left",
labelOffset: 16,
...(index.fi && { label: null }),
grid: true,
tickSize: 0
}, // new x scale with a common domain and additional axis options
y: { ...scales.y, grid: 4, axis: null }, // shared y scale with additional options
marks: [
Plot.frame({ anchor: "bottom" }),
Plot.boxY(data, {
fx: "cut",
x: "clarity",
y: "depth",
fill: "clarity"
})
]
});
return svg`<g>${plot}`; // faceting requires a <g> element for now, see https://github.com/observablehq/plot/pull/2219
}
})
]
})
Plot.plot({
width: 960,
height: 480,
fx: { domain: ["D", "E", "F"], label: null },
color: { legend: "ramp", domain: ["IF", "SI1", "I1"] },
y: { domain: [51, 71.9], insetBottom: 5, labelAnchor: "center" },
marginLeft: 40,
marginBottom: 25,
marginTop: 35,
marks: [
Plot.axisFx({ anchor: "bottom" }),
Plot.dot(diamonds, {
fx: "color", // outer x facet
y: "depth",
fill: "clarity",
render(index, { scales }, _values, { facet, ...dimensions }) {
const data = Array.from(index, (i) => this.data[i]);
const plot = Plot.plot({
...dimensions,
marginTop: 60,
...scales,
fx: {
axis: "bottom",
paddingOuter: 0.1,
paddingInner: 0.2,
tickPadding: -14,
label: null
},
x: { label: null },
y: { ...scales.y, grid: 4, axis: null },
marks: [
Plot.frame({ anchor: "bottom", strokeOpacity: 1 }),
Plot.gridX({ insetBottom: 25 }),
Plot.axisX({ anchor: "top", tickSize: 0 }),
Plot.boxY(data, {
fx: "cut",
x: "clarity",
y: "depth",
fill: "clarity"
})
]
});
return svg`<g>${plot}`;
}
})
]
})
Plot.plot({
width: 960,
height: 480,
fx: { domain: ["D", "E", "F"] },
color: { domain: ["IF", "SI1", "I1"] },
marginLeft: 40,
marginBottom: 40,
marginTop: 35,
marks: [
Plot.axisFx({ anchor: "top" }),
Plot.frame({ anchor: "top", strokeOpacity: 0.3 }),
Plot.frame({ anchor: "right", strokeOpacity: 0.3 }),
Plot.frame({ anchor: "left", strokeOpacity: 0.3 }),
Plot.dot(diamonds, {
fx: "color", // outer x facet
fill: "clarity",
frameAnchor: "middle",
render(index, { scales }, _values, { facet, ...dimensions }) {
const data = Array.from(index, (i) => this.data[i]);
const plot = Plot.plot({
...dimensions,
marginTop: 60,
...scales,
fx: { axis: "bottom", paddingOuter: 0.1, paddingInner: 0.2 }, // inner x facet
x: { grid: true },
y: {
grid: true,
inset: 10,
tickSize: 0,
tickPadding: 12,
labelAnchor: "center",
label: index.fi === 0 ? "depth" : null
},
marks: [
Plot.frame({ anchor: "bottom" }),
Plot.axisX({ anchor: "top", tickSize: 0 }),
Plot.boxY(data, {
fx: "cut",
x: "clarity",
y: "depth",
fill: "clarity"
})
]
});
return svg`<g>${plot}`;
}
})
]
})
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.
