Designing and Engineering a Better Tomorrow
Unlisted
Edited
Jun 13
Paused
{
const letter = ["R"];
const y2 = [alphabet.find((d) => d.letter === letter[0]).frequency]; // frequency
const stroke = "red";
const ruleXoptions = { x: letter, y2, stroke };
const ruleYoptions = {
y: y2,
x2: addX1X2 ? (d, i, arr) => arr[arr.length - 1].letter : undefined,
x1: addX1X2 ? () => letter[0] : undefined,
insetLeft: 9.5,
stroke
}; // x1 and x2 added with toggle == true, else undefined
return Plot.plot({
marks: [
Plot.barY(alphabet, {
x: "letter",
y: "frequency",
fill: "lightgrey",
sort: { x: "y", reverse: true }
}),
//Plot.ruleY([0]),
Plot.ruleX(alphabet, ruleXoptions), //ez-pz...works as expected
Plot.ruleY(alphabet, ruleYoptions) // Does not work when initial x1 attribute is not added to start the ruleY
]
});
}
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.
