function drawDistanceMatrix(ctx, params, nw, w, h, divMatrix, divLine) {
ctx.save();
ctx.translate(nw[0], nw[1]);
{
ctx.strokeStyle = "black";
ctx.lineWidth = 5;
ctx.beginPath(),
ctx.lineTo(0, 0),
ctx.lineTo(w, 0),
ctx.lineTo(w, h),
ctx.lineTo(0, h),
ctx.closePath(),
ctx.stroke();
}
const xScale = d3.scaleLinear().domain([0, 1]).range([0, w]),
yScale = d3.scaleLinear().domain([0, 1]).range([0, h]);
const n = params.length,
nr = 1 / params.length,
maxDst = computeDst(params[0].gabor, params[n - 1].gabor);
var g1, g2, dst, color, x, y;
const radius = xScale(nr);
for (let i = 0; i < n; ++i) {
const { color } = params[i];
ctx.fillStyle = d3.color(color).hex() + opacityPostfix;
x = xScale(i * nr);
y = yScale(1.1 + nr);
ctx.beginPath(), ctx.arc(x, y, radius, 0, Math.PI * 2), ctx.fill();
y = yScale(i * nr);
x = xScale(-0.1 - nr);
ctx.beginPath(), ctx.arc(x, y, radius, 0, Math.PI * 2), ctx.fill();
}
const maybeMatrix = [];
for (let i = 0; i < n; ++i) {
for (let j = i; j < n; ++j) {
dst = computeDst(params[i].gabor, params[j].gabor);
maybeMatrix.push({ i, j, dst });
color = dstColorMap(dst / maxDst);
x = xScale(i * nr);
y = yScale(j * nr);
ctx.fillStyle = d3.color(color).hex();
ctx.beginPath(), ctx.rect(x, y, xScale(nr), yScale(nr)), ctx.fill();
}
}
{
const p = Plot.plot({
width: width / 4,
height: width / 4,
padding: 0.05,
grid: true,
x: {
axis: "top",
label: "Src"
},
y: {
label: "Target"
},
color: {
scheme: "PiYG",
legend: true
},
marks: [
Plot.cell(maybeMatrix, {
x: "i",
y: "j",
fill: "dst"
}),
Plot.text(maybeMatrix, {
x: "i",
y: "j",
text: (d) => (d) => d.dst?.toFixed(1),
title: "title"
})
]
});
document.getElementById(divMatrix).innerHTML = p.outerHTML;
}
{
const p = Plot.plot({
width: width / 4,
height: width / 4,
y: {
grid: true
},
x: {
reverse: true
},
marks: [
Plot.line(
maybeMatrix.filter((e) => e.i == 0),
{ x: "j", y: "dst" }
)
]
});
document.getElementById(divLine).innerHTML = p.outerHTML;
}
ctx.restore();
}