2b:null 2c:["$","title",null,{"children":"Interpolated Periodic Functions | andrew-primer-e | Observable"}] 31:T5d1,chartRadial = { const svg = d3.create("svg").attr("viewBox", [0, 0, chartWidth, chartHeight]); const grid = svg.append("g"); for (let i = Math.ceil(rExtent[0]); i <= Math.floor(rExtent[1]); i++) { grid .append("circle") .attr("cx", center[0]) .attr("cy", center[1]) .attr("r", rScale(i)) .attr("fill", "none") .attr("stroke", "lightgrey") .attr("stroke-width", i === 0 ? 3 : 1); } const rAxis = svg .append("g") .call(d3.axisBottom(rScale)) .attr("transform", `translate(${center[0]}, ${center[1]})`); const lineElement = svg .append("path") .attr("transform", `translate(${center[0]},${center[1]})`) .attr("fill", "none") .attr("stroke", "black"); let points = svg.append("g").selectAll("dummy"); let pointLabels = svg.append("g").selectAll("dummy"); const update = function (data) { lineElement.datum(data).attr("d", lineRadial); points = points .data(dataSpecial) .join("circle") .attr("cx", (d) => xFromPolar(d.r, d.theta)) .attr("cy", (d) => yFromPolar(d.r, d.theta)) .attr("r", 4) .attr("fill", "red"); pointLabels = pointLabels .data(dataSpecial) .join("text") .text((d) => Intl.NumberFormat().format(d.r)) .attr("x", (d) => xFromPolar(d.r, d.theta) + textOffset[0]) .attr("y", (d) => yFromPolar(d.r, d.theta) + textOffset[1]) .attr("fill", "red"); }; return Object.assign(svg, { update }); }32:T60a,chartCartesian = { const svg = d3.create("svg").attr("viewBox", [0, 0, chartWidth, chartHeight]); const xAxis = svg .append("g") .call(d3.axisBottom(xScale)) .attr("transform", `translate(0, ${chartHeight - margin.bottom})`); const yAxis = svg .append("g") .call(d3.axisLeft(yScale)) .attr("transform", `translate(${margin.left}, 0)`); const grid = svg.append("g"); for (let i = Math.ceil(rExtent[0]); i <= Math.floor(rExtent[1]); i++) { grid .append("line") .attr("x1", xScale(thetaExtent[0])) .attr("y1", yScale(i)) .attr("x2", xScale(thetaExtent[1])) .attr("y2", yScale(i)) .attr("stroke", "lightgrey") .attr("stroke-width", i === 0 ? 3 : 1); } const lineElement = svg .append("path") .attr("fill", "none") .attr("stroke", "black"); let points = svg.append("g").selectAll("dummy"); let pointLabels = svg.append("g").selectAll("dummy"); const update = function (data) { lineElement.datum(data).attr("d", lineCartesian); points = points .data(dataSpecial) .join("circle") .attr("cx", (d) => xScale(d.theta)) .attr("cy", (d) => yScale(d.r)) .attr("r", 4) .attr("fill", "red"); pointLabels = pointLabels .data(dataSpecial) .join("text") .text((d) => Intl.NumberFormat().format(d.r)) .attr("x", (d) => xScale(d.theta) + textOffset[0]) .attr("y", (d) => yScale(d.r) + textOffset[1]) .attr("fill", "red"); }; return Object.assign(svg, { update }); }33:[] 2f:{"id":"e3f905917c47ad96","slug":null,"title":"Interpolated Periodic Functions","thumbnail":"a5072a3225a8b9d15e9089f33d404572fb06dcaf024b356b39368d3d204e9745","access_level":"public","create_time":"$D2021-07-19T02:42:53.424Z","update_time":"$D2021-07-19T05:37:18.982Z","view_time":null,"first_public_time":"$D2022-12-23T02:03:13.884Z","has_unpublished_edits":null,"fork":{"id":"6ecc342d25c1b3e8","slug":null,"title":"Ellipsoids","owner":{"id":"88d93d5b2c1ed632","login":"andrew-primer-e","name":""}},"stars":1,"starred":false,"owner":{"type":"team","id":"88d93d5b2c1ed632","login":"andrew-primer-e","name":"","avatar_url":"https://avatars-next.observableusercontent.com/89ec4302ee0f1449de085937ca4510ed79534223a290deb2d18acb6d106c4507","tier":"starter_2024"},"version":1073,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7e6b31ff7a0ad7a8","login":"andrew-primer-e","name":"","avatar_url":"https://avatars-next.observableusercontent.com/89ec4302ee0f1449de085937ca4510ed79534223a290deb2d18acb6d106c4507","tier":null}],"members":[{"type":"individual","id":"7e6b31ff7a0ad7a8","login":"andrew-primer-e","name":"","avatar_url":"https://avatars-next.observableusercontent.com/89ec4302ee0f1449de085937ca4510ed79534223a290deb2d18acb6d106c4507","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Interpolated Periodic Functions","cells":[{"id":0,"value":"# Interpolated Periodic Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"html`\n

${chartRadial.node()}

${chartCartesian.node()}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"viewof s_1 = Inputs.range([0, 2], { label: tex`\\large s_1`, value: 0 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"viewof s_2 = Inputs.range([0, 2], { label: tex`\\large s_2`, value: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"viewof theta_s_1 = Inputs.range([0, 2 * Math.PI], {\n label: tex`\\large \\theta_{s_1}`,\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"viewof theta_s_2 = Inputs.range([0, 2 * Math.PI], {\n label: tex`\\large \\theta_{s_2}`,\n value: Math.PI / 2\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1041,"value":"viewof antisymmetric = Inputs.checkbox([\"Anti-symmetric\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"md`## Other Settings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"f = function (s_1, s_2, theta_s_1, theta_s_2, flip) {\n let points = [\n { r: s_1, theta: theta_s_1 },\n { r: flip * s_1, theta: theta_s_1 + Math.PI },\n { r: s_2, theta: theta_s_2 },\n { r: flip * s_2, theta: theta_s_2 + Math.PI }\n ];\n\n points = points.map((p) => ({ r: p.r, theta: p.theta % (2 * Math.PI) }));\n\n points.sort((a, b) => {\n return a.theta - b.theta;\n });\n\n return function (theta) {\n theta = theta % (2 * Math.PI);\n let j = 0;\n while (j < points.length && theta > points[j].theta) {\n j++;\n }\n\n j = j % points.length;\n\n const i = (j - 1 + points.length) % points.length;\n\n const a = points[i].r;\n const b = points[j].r;\n let da = Math.abs((theta - points[i].theta) % (2 * Math.PI));\n let db = Math.abs((points[j].theta - theta) % (2 * Math.PI));\n da = da > Math.PI ? 2 * Math.PI - da : da;\n db = db > Math.PI ? 2 * Math.PI - db : db;\n\n return a + ((b - a) * da) / (da + db);\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"thetaExtent = [0, 2 * Math.PI]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"numThetaPoints = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"minRExtent = [-2, 2]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":868,"value":"maxRExtent = [-20, 20]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"chartWidth = width / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"chartHeight = chartWidth","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"textOffset = [10, -10]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"margin = ({ top: 40, right: 80, bottom: 40, left: 40 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"md`### General`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1035,"value":"flip = antisymmetric.length === 0 ? 1 : -1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"(chartCartesian.update(data), chartRadial.update(data), md`Chart Updater`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"thetaPoints = d3\n .range(numThetaPoints)\n .map(\n (i) =>\n thetaExtent[0] +\n (i * (thetaExtent[1] - thetaExtent[0])) / (numThetaPoints - 1)\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"data = thetaPoints.map((theta) => ({\n theta: theta,\n r: f(s_1, s_2, theta_s_1, theta_s_2, flip)(theta)\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"rExtent = {\n const rExtent = d3.extent(data.map((d) => d.r).concat(minRExtent));\n\n rExtent[0] = rExtent[0] < maxRExtent[0] ? maxRExtent[0] : rExtent[0];\n rExtent[1] = rExtent[1] > maxRExtent[1] ? maxRExtent[1] : rExtent[1];\n\n return rExtent;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"thetaSpecialPoints = [0, Math.PI]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":821,"value":"dataSpecial = thetaSpecialPoints.map((theta) => ({\n theta: theta,\n r: f(s_1, s_2, theta_s_1, theta_s_2, flip)(theta)\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"md`### Radial Plot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"rScaleRange = [\n 0,\n Math.min(\n (chartHeight - margin.top - margin.bottom) / 2,\n (chartWidth - margin.left - margin.right) / 2\n )\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"rScale = d3.scaleLinear().domain(rExtent).range(rScaleRange)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"lineRadial = d3\n .lineRadial()\n .angle((d) => -d.theta + Math.PI / 2)\n .radius((d) => rScale(d.r))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"center = [\n margin.left + (chartWidth - margin.left - margin.right) / 2,\n margin.top + (chartHeight - margin.top - margin.bottom) / 2\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"xFromPolar = function (r, theta) {\n return center[0] + rScale(r) * Math.cos(theta);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"yFromPolar = function (r, theta) {\n return center[1] - rScale(r) * Math.sin(theta);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"md`### Cartesian Plot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"lineCartesian = d3\n .line()\n .x((d) => xScale(d.theta))\n .y((d) => yScale(d.r))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"xScale = d3\n .scaleLinear()\n .domain(thetaExtent)\n .range([margin.left, chartWidth - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"yScale = d3\n .scaleLinear()\n .domain(rExtent)\n .range([chartHeight - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"