2b:null 2c:["$","title",null,{"children":"MathJS with Plotly | Feng Yifei | Observable"}] 31: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; }32: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; }33: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; }34: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; }35:[] 2f:{"id":"40430f915aac3ffa","slug":"plotly","title":"MathJS with Plotly","thumbnail":"bc4ccb65aa60f847db1e1005a013f5a45d998333f2604f506cf503b78cb18b27","access_level":"public","create_time":"$D2019-12-01T13:02:09.164Z","update_time":"$D2025-05-29T08:39:07.775Z","view_time":null,"first_public_time":"$D2019-12-01T13:18:12.402Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"2a278c3908e45a90","login":"fengyfei","name":"Feng Yifei","avatar_url":"https://avatars-next.observableusercontent.com/c5b93e151f999a0d3ae3ddc3285ea44aaaaf234cd045885cc92d8c1d0a529148","tier":"starter_2024"},"version":515,"publish_version":515,"role":null,"authored":false,"authors":[{"type":"individual","id":"582cdf51952494b0","login":"fengyfei","name":"Feng Yifei","avatar_url":"https://avatars-next.observableusercontent.com/c5b93e151f999a0d3ae3ddc3285ea44aaaaf234cd045885cc92d8c1d0a529148","tier":null}],"members":[{"type":"individual","id":"582cdf51952494b0","login":"fengyfei","name":"Feng Yifei","avatar_url":"https://avatars-next.observableusercontent.com/c5b93e151f999a0d3ae3ddc3285ea44aaaaf234cd045885cc92d8c1d0a529148","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":5,"collection":{"id":"714d03c41859e603","slug":"math","title":"Math","owner":{"id":"2a278c3908e45a90","login":"fengyfei","name":"Feng Yifei"}},"type":"notebook","body":{"title":"MathJS with Plotly","cells":[{"id":39,"value":"md`# MathJS with Plotly`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":23,"value":"md`## Plotting`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"md`### 2-Dimension`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":178,"value":"md`#### Single`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":176,"value":"md `#### Comparision`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":203,"value":"md `### Contours`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":206,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":336,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":403,"value":"md `\n## Curves\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":408,"value":"md `\n### Polar\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":409,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":415,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":0,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"math = require('mathjs')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"Plotly = require('plotly.js-dist')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"