Public
Edited
May 23, 2023
1 fork
Insert cell
Insert cell
data = [
{K1: "a", K2: "d", value:80},
{K1: "a", K2: "e", value:100},
{K1: "a", K2: "f", value:120},
{K1: "b", K2: "d", value:80},
{K1: "b", K2: "e", value:100},
{K1: "b", K2: "f", value:100},
{K1: "c", K2: "d", value:60},
{K1: "c", K2: "e", value:80},
{K1: "c", K2: "f", value:80},
];
Insert cell
Plot.plot({
height: 640,
marginLeft: 70,
marginTop: 40,
// grid: true,
x: {
axis: "top",
label: "K1",
type: "band"
},
y: {
label: "K2",
},
color: {
range: ["rgba(0, 0, 0, .05)", "rgba(0, 0, 0, .25)"],
},
marks: [
Plot.cell(data, {
x: "K1",
y: "K2",
fill: "value",
}),
Plot.text(data, {
x: "K1",
y: "K2",
text: "value",
})
]
})
Insert cell

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.
Learn more