The avatar for @cadasa
cadasa
Public
Edited
Nov 11, 2022
Fork of TeX tool
1 star
Insert cell
Insert cell
Insert cell
dashboard2 = html`<table>
<tr>
<td align ="left" style="width: 36.5%">
${copy}
</td>
<td align ="left" style="width: 38%">
${svg}
</td>
<td align ="left" style="width: 30%">
${svg2}
</td>
</tr>
</table>`
Insert cell
dashboard3 = html`<table align ="center">
<tr>
<td align ="left" style="width: 50%">
${viewof copy2}
<p>${md`### PNG output options:`}</p>
${viewof scale}
</td>
<td align ="center" style="width: 50%">
${viewof copy3}
<p>${md`### &nbsp;`}</p>
${viewof options}
</td>
</tr>
</table>`
Insert cell
step1 = md`## Create expression`
Insert cell
viewof eq = Inputs.textarea({submit: true, label: "Math expression", value:'x >= 0 ? log(x)+cos(pi / x)^2 : 1/3det([[x, 2], [7/2, 1/7x]]) - sin(pi / x)^2'})
Insert cell
sp1 = md`## Display Equation from Math Expression`
Insert cell
eq1 = {
return MathJax.tex2svg(TeXCode);
}
//tex.block`${TeXCode}`
Insert cell
step2 = md`## Convert to ${tex`\LaTeX`}`
Insert cell
viewof TeXFinal = Inputs.textarea({label: md`${tex`\LaTeX`} from Math Expression`, value:TeXCode})
Insert cell
sp2=md`## Display Equation from ${tex`\LaTeX`}`
Insert cell
eq2 = {
return MathJax.tex2svg(TeXFinal);
}
//tex.block`${TeXFinal}`
Insert cell
sp4=md`## Equation Plotter`
Insert cell
sp3=md`## Copy to Clipboard/Save as SVG`
Insert cell
copy = copyToClipboardButton(TeXFinal, "Copy TeX expression")
Insert cell
svg = DOM.download(() => serialize(toSvg(eq2)), undefined, "Save equation as SVG")
Insert cell
svg2 = DOM.download(() => serialize(plot), undefined, "Save plot as SVG")
Insert cell
viewof copy2 = Inputs.button("Copy equation as PNG");
Insert cell
viewof copy3 = Inputs.button("Copy plot as PNG");
Insert cell
viewof scale = Inputs.range([0.01, 2], {label: "PNG scaling", value: 1, step: 0.01})
Insert cell
viewof options = Inputs.checkbox(["Transparent"])
Insert cell
plot = {
let f_compiled = math.compile(eq);
let plot = funplot(x => f_compiled.evaluate({ x: x }));
// Generate a bit of LaTeX.
let tex_snippet = MathJax.tex2svg(
String.raw`${TeXCode}`
).querySelector("svg");

// and append it to the image
d3.select(plot)
.append('g')
.attr('transform', `translate(50 0) scale(.5)`)
.append(() => tex_snippet);
return plot;
}
Insert cell
sp5 = md`## Copy to Clipboard as PNG`
Insert cell
Insert cell
md`
${tex.block`
${TeXCode}
`}
`
Insert cell
${tx('4 * sin(x) + 5 * cos(x/2)')}
Insert cell
${tx('[a,b,c;d,e,f;g,h,i]*[x,y,z]==[a x+b y+c z,d x+e y+f z,g x+h y+i z]')}
Insert cell
${tx('e^(i pi) + 1 == 0')}
Insert cell
${tx('sigma == E epsilon')}
Insert cell
math.compile(eq)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
//import { funplot } from '@mbostock/funplot'
Insert cell
MathJax = require('https://cdn.jsdelivr.net/npm/mathjax@3.2/es5/tex-svg.js').catch(() => window['MathJax'])
Insert cell
Insert cell
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