Published unlisted
Edited
Sep 26, 2021
Importers
3 stars
Plot.plot({
color: { legend: true, columns: 5, width: Math.min(640, width) },
marks: [
Plot.areaY(bls, { x: "date", y: "unemployed", fill: "industry" }),
Plot.ruleY([0])
],
width
})
import { bls } from "@observablehq/plot-area"
Plot.dot({length: 100}, {x: Math.random, fill: Math.random})
.plot({ color: {legend: true, label: "random", width: 120, nice: true }})
A = Plot.plot({
color: {
legend: true,
width: 120,
nice: true
},
marks: [
Plot.dot(
{ length: 100 },
{
x: Object.assign(() => Math.random(), { label: "random" }),
fill: Object.assign(() => Math.random(), { label: "random fill" })
}
)
]
})
Plot.plot({
color: A.scales.color,
marks: [
Plot.dot(
{ length: 100 },
{
x: Math.random,
fill: Math.random
}
)
]
})
// quantile scale?
Plot.dot({ length: 100 }, { x: Math.random, fill: Math.random }).plot({
color: {
legend: true,
label: "random",
width: 120,
type: "quantile",
thresholds: [0.3, 0.6]
}
})
// threshold scale?
Plot.dot({ length: 100 }, { x: Math.random, fill: Math.random }).plot({
color: {
legend: true,
type: "threshold",
domain: [0.3, 0.6]
}
})
Plot = FileAttachment("plot@20.umd.js").url().then(require)
B = Plot.plot({
opacity: {
nice: true,
legend: (scale) =>
Plot.legendColor({
...scale,
range: undefined,
interpolate: undefined,
scheme: "greys"
})
},
marks: [
Plot.dot(
{ length: 100 },
{
x: Math.random,
fill: "black",
fillOpacity: Object.assign(() => Math.random(), { label: "opacity" })
}
)
]
})
Plot.plot({
opacity: {
nice: true,
legend: true
},
marks: [
Plot.dot(
{ length: 100 },
{
x: Math.random,
fill: "black",
fillOpacity: Object.assign(() => Math.random(), { label: "opacity" })
}
)
]
})
P = Plot.plot({
r: { ticks: 10, range: [0, 20], legend: true },
marks: [
Plot.dot(
data,
Plot.binX(
{ r: "count" },
{ x: "body_mass", y: "island", stroke: "species" }
)
)
]
})
P.scales.r
(({
label,
ticks = 5,
tickFormat = (d) => d,
strokeWidth = 0.5,
strokeDasharray = [5, 4],
minStep = 8,
gap = 20,
...r
}) => {
const s = Plot.scale(r);
const r0 = s.range()[1];
const shiftY = label ? 10 : 0;
let h = Infinity;
const values = s
.ticks(ticks)
.reverse()
.filter((t) => h - s(t) > minStep / 2 && (h = s(t)));
return Plot.plot({
x: { type: "identity", axis: null },
r: { type: "identity" },
y: { type: "identity", axis: null },
marks: [
Plot.link(values, {
x1: r0 + 2,
y1: (d) => 8 + 2 * r0 - 2 * s(d) + shiftY,
x2: 2 * r0 + 2 + gap,
y2: (d) => 8 + 2 * r0 - 2 * s(d) + shiftY,
strokeWidth: strokeWidth / 2,
strokeDasharray
}),
Plot.dot(values, {
r: s,
x: r0 + 2,
y: (d) => 8 + 2 * r0 - s(d) + shiftY,
strokeWidth
}),
Plot.text(values, {
x: 2 * r0 + 2 + gap,
y: (d) => 8 + 2 * r0 - 2 * s(d) + shiftY,
textAnchor: "start",
dx: 4,
text: tickFormat
}),
Plot.text(label ? [label] : [], {
x: 0,
y: 6,
textAnchor: "start",
fontWeight: "bold",
text: tickFormat
})
],
height: 2 * r0 + 10 + shiftY
});
})(P.scales.r)
FileAttachment("Capture d’écran 2021-06-14 à 18.49.45.png").image()
FileAttachment("Capture d’écran 2021-06-14 à 21.40.17.png").image()
s = Plot.scale(P.scales.r)
import { data } from "@observablehq/plot-exploration-penguins"
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.
