30:T5ce,viewof contour = { const form = html` `; form.oninput = () => (form.value = { xmin: form.minimum.value, xmax: form.maximun.value, size: form.size.value, colors: form.colorScale.value, f: form.expr.value }); form.oninput(); return form; }31:T41f,{ let min = parseFloat(contour.xmin), max = parseFloat(contour.xmax); if (max <= 0) { max = 2; } const scale = parseInt(surface.scale); const expr = math.compile(contour.f); let z = []; for (let y = 0; y < scale * max; y++) { const _z = []; for (let x = 0; x < scale * max; x++) { try { _z[x] = expr.evaluate({ x: x, y: y }); } catch (err) { _z[x] = y; } } z.push(_z); } const trace = { z: z, type: 'surface', contours: { z: { show: true, usecolormap: true, highlightcolor: "#42f462", project: { z: true } } } }; const div = DOM.element('div', { style: `width:${width}px` }); const layout = { title: `Contours: ${contour.f}`, autosize: true, width: width, height: 480, margin: { l: 4, r: 4, b: 4, t: 32 } }; try { Plotly.newPlot(div, [trace], layout); } catch (err) { console.log(`${err}`); } return div; }32:T664,viewof polarCurve = { const form = html` `; form.oninput = () => (form.value = { xmin: parseFloat(form.minx.value), xmax: parseFloat(form.maxx.value), ylim: parseFloat(form.ylim.value), dots: parseInt(form.dots.value), iteration: parseInt(form.iter.value), mirror: form.mirror.checked, func: form.curve.value }); form.oninput(); return form; }33:T53f,{ const step = (polarCurve.xmax - polarCurve.xmin) / polarCurve.dots; const ylim = polarCurve.ylim; const x = math.range(polarCurve.xmin, polarCurve.xmax, step).toArray(); const curve = math.compile(polarCurve.func); const iteration = polarCurve.iteration; const data = []; let radian = 0; for (let i = 0; i < iteration; i++) { radian = (2 * Math.PI * i) / iteration; const temp = x.map(x => { return curve.evaluate({ x: x, y: radian }); }); data.push({ x: x, y: temp, type: 'line', line: { color: 'black', width: 0.4 } }); if (polarCurve.mirror) { const minus = x.map(x => { return -curve.evaluate({ x: x, y: radian }); }); data.push({ x: x, y: minus, type: 'line', line: { color: 'black', width: 0.4 } }); } } const size = 800; const div = DOM.element('div', { style: `width:${size}px; height: ${size}px;` }); Plotly.newPlot( div, data, { title: 'Curve', showlegend: false, width: size, height: size, yaxis: { autorange: false, range: [-ylim, ylim] } }, { displayModeBar: true } ); return div; }34:[] 2e:{"title":"MathJS with Plotly","cells":[{"id":39,"value":"md`# MathJS with Plotly`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`## References\n- [mathjs](https://github.com/josdejong/mathjs)\n- [plotly.js](https://github.com/plotly/plotly.js)\n- [Plotly Express](https://plotly.com/python/plotly-express/)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"md`## Plotting`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"md`### 2-Dimension`","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"md`#### Single`","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"viewof simple = {\n const form = html`\n \n `;\n\n form.oninput = () =>\n (form.value = {\n xmin: form.minimum.value,\n xmax: form.maximun.value,\n f: form.expf.value\n });\n\n form.oninput();\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"{\n const X = math.range(simple.xmin, simple.xmax, 0.01).toArray();\n const F = X.map(function(x) {\n return math.compile(simple.f).evaluate({ x });\n });\n\n const DF = {\n x: X,\n y: F,\n type: 'line'\n };\n\n const div = DOM.element('div', {\n style: `width:${width}px`\n });\n Plotly.newPlot(\n div,\n [DF],\n {\n title: `${simple.f}`,\n showLegend: true\n },\n {\n displayModeBar: true\n }\n );\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"md `#### Comparision`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"viewof configuration = {\n const form = html`\n \n `;\n\n form.oninput = () =>\n (form.value = {\n xmin: form.minimum.value,\n xmax: form.maximun.value,\n f: form.expf.value,\n h: form.exph.value\n });\n\n form.oninput();\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"{\n const X = math.range(configuration.xmin, configuration.xmax, 0.01).toArray();\n const F = X.map(function(x) {\n return math.compile(configuration.f).evaluate({ x });\n });\n const H = X.map(function(x) {\n return math.compile(configuration.h).evaluate({ x });\n });\n\n const DF = {\n x: X,\n y: F,\n type: 'line',\n name: `${configuration.f}`\n };\n const DH = {\n x: X,\n y: H,\n type: 'line',\n name: `${configuration.h}`\n };\n\n const div = DOM.element('div', {\n style: `width:${width}px`\n });\n Plotly.newPlot(\n div,\n [DF, DH],\n {\n title: 'Function Compare',\n showLegend: true\n },\n {\n displayModeBar: true\n }\n );\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"md `### Contours`","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"{\n const size = contour.size,\n rate = (contour.xmax - contour.xmin) / size;\n const x = math.range(contour.xmin, contour.xmax, rate).toArray();\n const y = math.range(contour.xmin, contour.xmax, rate).toArray();\n\n const z = new Array(size);\n\n for (let i = 0; i < size; i++) {\n z[i] = new Array(size);\n }\n\n const expr = math.compile(contour.f);\n\n for (let i = 0; i < size; i++) {\n for (let j = 0; j < size; j++) {\n z[i][j] = expr.evaluate({\n x: x[i],\n y: y[j]\n });\n }\n }\n\n const data = {\n x: x,\n y: y,\n z: z,\n type: 'contour',\n autocontour: true,\n colorscale: contour.colors\n };\n const div = DOM.element('div', {\n style: `width:${width}px`\n });\n\n Plotly.newPlot(div, [data], {\n title: `Contours: ${contour.f}`\n });\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"viewof surface = {\n const form = html`\n \n `;\n\n form.oninput = () =>\n (form.value = {\n scale: form.scale.value\n });\n\n form.oninput();\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"md `\n## Curves\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"md `\n### Polar\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"math = require('mathjs')","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"Plotly = require('plotly.js-dist')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}