Unlisted
Edited
Apr 7
color_data = [
{x: 2, color: "#00f"},
{x: 3, color: "#0f0"},
{x: 4, color: "#f00"},
{x: 5, color: "#ff0"},
]
Plot.plot({
width: 300, height: 100,
marks: [
// other elements which determine the range of the plot
Plot.ruleY([-1, 0, 10]),
Plot.ruleX([0, 10]),
Plot.raster(color_data, {
width: 100, // width given
height: 3,
x: "x",
y: a => 5, // Y is constant
interpolate: "nearest",
fill: "color"
})
]
})
Plot.plot({
width: 300, height: 100,
marks: [
// other elements which determine the range of the plot
Plot.ruleY([-1, 0, 10]),
Plot.ruleX([0, 10]),
Plot.raster(color_data, {
// width omitted, we can observe it is inferred from plot size
height: 3,
x: "x",
y: a => 5, // Y is constant
interpolate: "nearest",
fill: "color"
})
]
})
Plot.plot({
width: 300, height: 100,
marks: [
// other elements which determine the range of the plot
Plot.ruleY([-1, 0, 10]),
Plot.ruleX([0, 10]),
Plot.raster(color_data, {
width: 100, // width given
height: 3,
x: "x",
// y omitted
interpolate: "nearest",
fill: "color"
})
]
})
Plot.plot({
width: 300, height: 100,
marks: [
// other elements which determine the range of the plot
Plot.ruleY([-1, 0, 10]),
Plot.ruleX([0, 10]),
Plot.raster(color_data, {
// width omitted
height: 3,
x: "x",
// y omitted
interpolate: "nearest",
fill: "color"
})
]
})
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.
