Plot.plot({
grid: true,
color: {
range: ["LightSteelBlue", "LightGreen", "LightPink"],
domain: ["Spillers", "Thrillers", "Fillers"],
},
x: {
type: "band",
domain: xTicks,
label: "",
},
y: {
type: "band",
domain: yTicks,
reverse: true,
label: "",
},
height: img.h,
width: img.w,
marks: [
Plot.image([{ url: imageUrl }], {
x: Math.round((img.w/100)/2),
y: Math.round((img.h/100)/2),
src: "url",
height: img.h,
width: img.w,
}),
Plot.ruleX(d3.range(img.w/100), {
stroke: "blue",
x: (d) => d,
}),
Plot.ruleY(d3.range(img.h/100), {
stroke: "blue",
y: (d) => d,
}),
Plot.cell(data, {
x: "x",
y: "y",
fill: "id",
fillOpacity: 0.5,
}),
Plot.text([spiller[2]], {
...labelProps,
text: ["SPILLERS"],
}),
Plot.text([thriller[5]], {
...labelProps,
text: ["THRILLERS"],
}),
Plot.text([filler[5]], {
...labelProps,
text: ["FILLERS"],
}),
]
})
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.
