2b:null 2c:["$","title",null,{"children":"Mathmatic notebook III | Chuncheng | Observable"}] 31:Tb1b,{ const height = width / (form.screenRatio ? form.screenRatio : 16 / 9); const ctx = DOM.context2d(width, height); const xExtent = d3.extent(data, (d) => d.x), yExtent = d3.extent(data, (d) => d.y), realExtent = d3.extent(data, (d) => d.real), imagExtent = d3.extent(data, (d) => d.imag); const realScale = d3.scaleLinear().domain(realExtent).range([0, width]), imagScale = d3.scaleLinear().domain(imagExtent).range([height, 0]); const gridDensity = form.grids * 2; { const step = (xExtent[1] - xExtent[0]) / gridDensity; const stepsX = d3.range(xExtent[0], xExtent[1], step), stepsY = d3.range(yExtent[0], yExtent[1], step); function insideRect(x, y) { return (x < width) & (x > 0) & (y < height) & (y > 0); } // Draw the longtitute lines { stepsX.map((x, i) => { const dark = i % 5 === 0; ctx.strokeStyle = form.gridColorX + "50"; ctx.fillStyle = form.gridColorX; ctx.lineWidth = dark ? 2 : 1; var latest = { valid: false, x: 0, y: 0 }; ctx.beginPath(), stepsY.map((y, j) => { const { real, imag } = convert(x, y); const a = realScale(real), b = imagScale(imag); if (j === 0) ctx.moveTo(a, b); if (!latest.valid && insideRect(a, b)) Object.assign(latest, { x: a, y: b, valid: true }); ctx.lineTo(a, b); }), ctx.stroke(); if (dark) ctx.fillText(x.toFixed(2), latest.x, latest.y); }); } // Draw the latitute lines { stepsY.map((y, i) => { const dark = i % 5 === 0; ctx.strokeStyle = form.gridColorY + "50"; ctx.fillStyle = form.gridColorY; ctx.lineWidth = dark ? 2 : 1; var latest = { valid: false, x: 0, y: 0 }; ctx.beginPath(), stepsX.map((x, i) => { const { real, imag } = convert(x, y); const a = realScale(real), b = imagScale(imag); if (i === 0) ctx.moveTo(a, b); if (!latest.valid && insideRect(a, b)) Object.assign(latest, { x: a, y: b, valid: true }); ctx.lineTo(a, b); }), ctx.stroke(); if (dark) ctx.fillText(y.toFixed(2), latest.x, latest.y); }); } } // Draw the curves { dataColor.map(({ name, color }) => { if (curveSelection.indexOf(name) < 0) return; ctx.strokeStyle = color; ctx.lineWidth = 2; ctx.beginPath(); data .filter((d) => d.name === name) .map((d) => { const { real, imag } = d; ctx.lineTo(realScale(real), imagScale(imag)); }); ctx.stroke(); }); } return ctx.canvas; }32:T743,{ const height = width / (form.screenRatio ? form.screenRatio : 16 / 9); const ctx = DOM.context2d(width, height); const xExtent = d3.extent(data, (d) => d.x), yExtent = d3.extent(data, (d) => d.y); const xScale = d3.scaleLinear().domain(xExtent).range([0, width]), yScale = d3.scaleLinear().domain(yExtent).range([height, 0]); const gridDensity = form.grids * 2; { const step = (xExtent[1] - xExtent[0]) / gridDensity; // Draw the longtitute lines { const steps = d3.range(xExtent[0], xExtent[1], step); steps.map((x, i) => { const dark = i % 5 === 0; ctx.strokeStyle = form.gridColorX + "50"; ctx.fillStyle = form.gridColorX; ctx.lineWidth = dark ? 2 : 1; ctx.beginPath(), ctx.moveTo(xScale(x), 0), ctx.lineTo(xScale(x), height), ctx.stroke(); if (dark) ctx.fillText(x.toFixed(2), xScale(x), height - 10); }); } // Draw the latitute lines { const steps = d3.range(yExtent[0], yExtent[1], step); steps.map((y, i) => { const dark = i % 5 === 0; ctx.strokeStyle = form.gridColorY + "50"; ctx.fillStyle = form.gridColorY; ctx.lineWidth = dark ? 2 : 1; ctx.beginPath(), ctx.moveTo(0, yScale(y)), ctx.lineTo(width, yScale(y)), ctx.stroke(); if (dark) ctx.fillText(y.toFixed(2), 10, yScale(y)); }); } } // Draw the curves { dataColor.map(({ name, color }) => { if (curveSelection.indexOf(name) < 0) return; ctx.strokeStyle = color; ctx.lineWidth = 2; ctx.beginPath(); data .filter((d) => d.name === name) .map((d) => { const { x, y } = d; ctx.lineTo(xScale(x), yScale(y)); }); ctx.stroke(); }); } return ctx.canvas; }33:T430,complex = { function complex(real, imag) { this.real = real; this.imag = imag; } complex.prototype.add = function (c) { return new complex(this.real + c.real, this.imag + c.imag); }; complex.prototype.subtract = function (c) { return new complex(this.real - c.real, this.imag - c.imag); }; complex.prototype.multiply = function (c) { return new complex( this.real * c.real - this.imag * c.imag, this.real * c.imag + this.imag * c.real ); }; complex.prototype.divide = function (c) { var denom = c.real * c.real + c.imag * c.imag; return new complex( (this.real * c.real + this.imag * c.imag) / denom, (this.imag * c.real - this.real * c.imag) / denom ); }; complex.prototype.power = function (n) { var r = Math.sqrt(this.real * this.real + this.imag * this.imag); var theta = Math.atan2(this.imag, this.real); var real = Math.pow(r, n) * Math.cos(n * theta); var imag = Math.pow(r, n) * Math.sin(n * theta); return new complex(real, imag); }; return complex; }34:[] 2f:{"id":"22828e7d6fab4c8c","slug":"mathmatic-notebook-iii","title":"Mathmatic notebook III","thumbnail":"e7fc441d7dd4b7222fe126aa850b524098edbc8b54ee66e7472deb9077d35332","access_level":"public","create_time":"$D2022-12-23T01:00:06.725Z","update_time":"$D2022-12-29T10:48:16.685Z","view_time":null,"first_public_time":"$D2022-12-23T01:00:06.725Z","fork":{"id":"2be0db1458659c91","slug":"mathmatic-notebook-ii","title":"Mathmatic notebook II","owner":{"id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng"}},"stars":0,"starred":false,"owner":{"type":"team","id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":"starter_2024"},"version":695,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null}],"members":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"3aa143c61490363d","slug":"math","title":"Math","owner":{"id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng"}},"type":"notebook","body":{"title":"Mathmatic notebook III","cells":[{"id":0,"value":"# Mathmatic notebook III\n\nIt supports functions visulization.\nYou can edit your function in textarea of Function.\n\nAnd the space is converted from Cartesian coordinates using Complex number computation.\nThe convercation is defiend in convert function.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"viewof textareaFunction = Inputs.textarea({\n label: \"Function\",\n value: [\"x**2, curve1\", \"x * 2, line1\", \"x / (-2), line2\"].join(\"\\n\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"viewof pointsFactor = Inputs.range([1, 4], {\n label: \"PointsFactor (1ex)\",\n value: 2\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"

Controller

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":308,"value":"viewof form = Inputs.form({\n centerX: Inputs.range([-10, 10], { label: \"Center X\", step: 0.1 }),\n rangeX: Inputs.range([1, 10], { label: \"Range X\", step: 0.1 }),\n screenRatio: Inputs.range([1.0, 16 / 9], {\n label: \"Screen Ratio\",\n value: 16 / 0\n }),\n gridColorX: Inputs.color({\n label: \"Grid Color X\",\n value: \"#b06b63\"\n }),\n gridColorY: Inputs.color({\n label: \"Grid Color Y\",\n value: \"#6385b0\"\n }),\n grids: Inputs.range([10, 40], {\n label: \"Grids\",\n value: 20,\n step: 0.1\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"

Displayer

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":333,"value":"viewof curveSelection = Inputs.checkbox(\n dataColor.map((d) => d.name),\n {\n label: \"Select Curve\",\n value: dataColor.map((d) => d.name)\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"convert = (x, y) => {\n const c = new complex(x, y);\n return c.add(new complex(2, 3)).power(power);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"viewof power = Inputs.range([-1, 2], { label: \"Power\", value: -0.2 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"

Converted coordinates

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":589,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"

Cartesian coordinates

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":183,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"plt1 = {\n const lines = Plot.line(data, {\n x: \"x\",\n y: \"y\",\n stroke: \"name\" //(d) => dataColor.filter((e) => e.name === d.name)[0].color\n });\n const plt = Plot.plot({\n y: {\n grid: true,\n label: \"↑ y\"\n },\n x: {\n grid: true,\n label: \"x\"\n },\n color: {\n legend: true,\n scheme: \"category10\"\n },\n marks: [Plot.ruleY([0]), Plot.ruleX([0]), lines]\n });\n\n return plt;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"{\n const lines = Plot.line(data, {\n x: \"real\",\n y: \"imag\",\n stroke: \"name\" //(d) => dataColor.filter((e) => e.name === d.name)[0].color\n });\n const plt = Plot.plot({\n y: {\n grid: true,\n label: \"↑ Imag\"\n },\n x: {\n grid: true,\n label: \"Real\"\n },\n color: {\n legend: true,\n scheme: \"category10\"\n },\n marks: [Plot.ruleY([0]), Plot.ruleX([0]), lines]\n });\n\n return plt;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":266,"value":"dataColor = Array(...new Set(data.map((d) => d.name))).map((d, i) => {\n return { name: d, color: d3.schemeCategory10[i % 10] };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"data = {\n const n = Math.pow(10, pointsFactor);\n\n const xValues = d3\n .range(n)\n .map((i) => form.centerX + (i / n) * 2 * form.rangeX - form.rangeX);\n\n const data = [];\n\n FUNCTIONS.map((func) => {\n const { fun, name } = func;\n\n const yValues = xValues.map((x) => eval(fun));\n\n xValues.map((x, i) => {\n data.push({ x, y: yValues[i], fun, name, n });\n });\n });\n\n data.map((d) => {\n const { x, y } = d;\n const c = convert(x, y);\n Object.assign(d, c);\n });\n\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"Inputs.table(FUNCTIONS)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"FUNCTIONS = {\n const lines = textareaFunction.split(\"\\n\").map((d) => d);\n\n const data = [];\n\n var split;\n lines.map((line) => {\n split = line.split(\",\");\n data.push({ fun: split[0], name: split[1].trim() });\n });\n\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"{\n // Example usage:\n var c1 = new complex(3, 4);\n var c2 = new complex(1, 2);\n return [\n c1.add(c2), // prints \"4 + 6i\"\n c1.subtract(c2), // prints \"2 + 2i\"\n c1.multiply(c2), // prints \"-5 + 10i\"\n c1.divide(c2), // prints \"2.2 - 0.4i\"\n c1.power(3) // prints \"-117 + 44i\"\n ];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"