gridPoints = {
const points = [];
for (let i = -4; i <= 4; i += 0.5) {
for (let j = -4; j <= 4; j += 0.5) {
const DomainX = i;
const DomainY = j;
const transformedX = a11 * i + a12 * j;
const transformedY = a21 * i + a22 * j;
points.push({
origX: DomainX,
origY: DomainY,
transX: transformedX,
transY: transformedY,
isGrid: true
});
}
}
return points;
}
// Create unit vectors and their transformations
unitVectors = [
// Standard basis vectors
{origX: 0, origY: 0, transX: 0, transY: 0, type: "origin"},
{origX: 1, origY: 0, transX: a11, transY: a21, type: "e1"},
{origX: 0, origY: 1, transX: a12, transY: a22, type: "e2"},
// Input vector
{origX: 0, origY: 0, transX: 0, transY: 0, type: "origin"},
{origX: x1, origY: x2, transX: b1, transY: b2, type: "vector"}
]
// Create the plot
Plot.plot({
style: "overflow: visible; display: block; margin: 0 auto;",
width: 800,
height: 400,
grid: true,
facet: {data: [{side: "Domain"}, {side: "Codomain"}], x: "side"},
fx: {label: null, domain: ["Domain", "Codomain"]},
x: {label: "x_1", domain: [-8, 8]},
y: {label: "x_2", domain: [-8, 8]},
marks: [
// Grid axes
Plot.ruleY([0], {stroke: "#ddd"}),
Plot.ruleX([0], {stroke: "#ddd"}),
// Grid points (Domain)
Plot.dot(gridPoints, {
x: "origX",
y: "origY",
fx: () => "Domain",
r: 1,
fill: "#ccc",
fillOpacity: 0.7
}),
// Grid points (Codomain)
Plot.dot(gridPoints, {
x: "transX",
y: "transY",
fx: () => "Codomain",
r: 1,
fill: "#ccc",
fillOpacity: 0.7
}),
// Unit vector e1 (Domain)
Plot.arrow([{x1: 0, y1: 0, x2: 1, y2: 0}], {
x1: "x1", y1: "y1", x2: "x2", y2: "y2",
fx: () => "Domain",
stroke: "orange",
strokeWidth: 2,
fill: "orange"
}),
// Unit vector e2 (Domain)
Plot.arrow([{x1: 0, y1: 0, x2: 0, y2: 1}], {
x1: "x1", y1: "y1", x2: "x2", y2: "y2",
fx: () => "Domain",
stroke: "purple",
strokeWidth: 2,
fill: "purple"
}),
// Input vector x (Domain)
Plot.arrow([{x1: 0, y1: 0, x2: x1, y2: x2}], {
x1: "x1", y1: "y1", x2: "x2", y2: "y2",
fx: () => "Domain",
stroke: "steelblue",
strokeWidth: 3,
fill: "steelblue"
}),
// Codomain unit vector e1
Plot.arrow([{x1: 0, y1: 0, x2: a11, y2: a21}], {
x1: "x1", y1: "y1", x2: "x2", y2: "y2",
fx: () => "Codomain",
stroke: "orange",
strokeWidth: 2,
fill: "orange"
}),
// Codomain unit vector e2
Plot.arrow([{x1: 0, y1: 0, x2: a12, y2: a22}], {
x1: "x1", y1: "y1", x2: "x2", y2: "y2",
fx: () => "Codomain",
stroke: "purple",
strokeWidth: 2,
fill: "purple"
}),
// Codomain vector b
Plot.arrow([{x1: 0, y1: 0, x2: b1, y2: b2}], {
x1: "x1", y1: "y1", x2: "x2", y2: "y2",
fx: () => "Codomain",
stroke: "crimson",
strokeWidth: 3,
fill: "crimson"
}),
// Labels
Plot.text([
{x: 1, y: 0.2, text: "e₁", fx: "Domain"},
{x: 0.2, y: 1, text: "e₂", fx: "Domain"},
{x: x1/2, y: x2/2 + 0.3, text: "x", fx: "Domain"},
{x: a11, y: a21 + 0.2, text: "Ae₁", fx: "Codomain"},
{x: a12 + 0.2, y: a22, text: "Ae₂", fx: "Codomain"},
{x: b1/2, y: b2/2 + 0.3, text: "b=Ax", fx: "Codomain"}
], {
x: "x", y: "y",
fx: "fx",
text: "text",
fontSize: 12,
fontWeight: "bold"
})
]
})