¡Hola! Soy un entusiasta de las animaciones y volver la matemática divertida, hago creative Coding, enseño matemática y estudio Ingeniería Electrónica en la UTNFRBA
https://twitter.com/SnowflakeFede
he/him/they 🌈
result2 = md`## Illustration
*Hint: rollover the entries of matrix ${tex`\bm{C}`}.*
${illustrateMatDet(A)}`
A = new Matrix([3, 3], [1, 2, 3, 4, 5, 6, 7, 8, 9])
illustrateMatDet = function (A) {
const color = d3.scaleSequential(d3.interpolateWarm).domain([0, A.ncol]);
const background = function (c) {
const c0 = d3.lab(c).brighter(1.5).toString();
return `${c0}`;
};
const Cofactors = (matrix) => {
const value = matrix.filter();
};
return html`
${rendervMatrix(A.ncol, A.vals, {
title: tex` det(\bm{A}_{${A.nrow}×${A.ncol}})`,
background: (d, i, j) => (i === inspect[0] ? background(color(j)) : "")
})}
<span class=operator>${tex`=`}</span>
<span class=operator>${tex`2 \cdot`}</span>
${renderCofactors(A.ncol, A.vals, {
title: tex`\bm{A}_{${A.nrow}×${A.ncol}}`
})}
`;
}
function renderCofactors(
width,
values,
{ title, format, each, background, hover } = {}
) {
values = Array.from(values);
const color = d3
.scaleSequential(d3.interpolateGreens)
.domain([-0.3, 1] || [0, 1.3]);
format = format || d3.format("");
const div = html`<div class=annotated-matrix >
<div class=matrix-title>${title}</div>
<div class=vmatrix>
${values.map(
(v, i) =>
`<span class=matrix-cell>${format(v)}</span>${
i % width === width - 1 ? "<br>" : ""
}`
)}
</div>
</div>`;
const noOp = () => {};
const apply_dijw = (fn = noOp) =>
function (d, i) {
return fn.call(this, d, Math.floor(i / width), i % width, width);
};
d3.select(div)
.selectAll(".matrix-cell")
.data(values)
.style("background", apply_dijw(background))
.on("mouseover", apply_dijw(hover))
.each(apply_dijw(each));
return div;
}
illustrateMatMult = function ({ A, B, C }) {
const color = d3.scaleSequential(d3.interpolateWarm).domain([0, A.ncol]);
const background = function (c) {
const c0 = d3.lab(c).brighter(1.5).toString();
return `${c0}`;
};
return html`
${renderMatrix(A.ncol, A.vals, {
title: tex`\bm{A}_{${A.nrow}×${A.ncol}}`,
background: (d, i, j) => (i === inspect[0] ? background(color(j)) : "")
})}
<span class=operator>${tex`×`}</span>
${renderMatrix(B.ncol, B.vals, {
title: tex`\bm{B}_{${B.nrow}×${B.ncol}}`,
background: (d, i, j) => (j === inspect[1] ? background(color(i)) : "")
})}
<span class=operator>${tex`=`}</span>
${renderMatrix(C.ncol, C.vals, {
title: tex`\bm{C}_{${C.nrow}×${C.ncol}}`,
background: (d, i, j) =>
i === inspect[0] && j === inspect[1]
? background("rgb(150, 150, 150)")
: "",
hover: (d, i, j) =>
i !== inspect[0] || j !== inspect[1] ? (mutable inspect = [i, j]) : null
})}
<div class='equation' >${kSumEq(A.ncol, inspect[0], inspect[1])}</div>
<div class='equation' >${abSumEq(A.ncol, inspect[0], inspect[1])}</div>
<div class='equation' >${valSumEq(
A.ncol,
inspect[0],
inspect[1],
A,
B,
C
)}</div>
`;
}
function rendervMatrix(
width,
values,
{ title, format, each, background, hover } = {}
) {
values = Array.from(values);
const color = d3
.scaleSequential(d3.interpolateGreens)
.domain([-0.3, 1] || [0, 1.3]);
format = format || d3.format("");
const div = html`<div class=annotated-matrix >
<div class=matrix-title>${title}</div>
<div class=vmatrix>
${values.map(
(v, i) =>
`<span class=matrix-cell>${format(v)}</span>${
i % width === width - 1 ? "<br>" : ""
}`
)}
</div>
</div>`;
const noOp = () => {};
const apply_dijw = (fn = noOp) =>
function (d, i) {
return fn.call(this, d, Math.floor(i / width), i % width, width);
};
d3.select(div)
.selectAll(".matrix-cell")
.data(values)
.style("background", apply_dijw(background))
.on("mouseover", apply_dijw(hover))
.each(apply_dijw(each));
return div;
}
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.
