2b:null 2c:["$","title",null,{"children":"Sine Wave | Harry Stevens | Observable"}] 31:T9a4,{ const wrapper = d3.create("div") .style("height", `${r * 2 + 40}px`) const spinner = wrapper.append("div") .style("display", "inline-block"); const svg = spinner.append("svg") .attr("width", r * 2) .attr("height", r * 2) .style("overflow", "visible"); const path = svg.append("circle") .attr("cx", r) .attr("cy", r) .attr("r", r) .attr("fill", "none") .attr("stroke", "#888"); const circle = svg.append("circle") .attr("r", 4) .attr("fill", "tomato"); const chart = wrapper.append("div") .style("display", "inline-block") .style("margin-left", "20px"); const margin = {left: 0, right: 0, top: 0, bottom: 0}; const chartWidth = width - r * 2 - 20 - margin.left - margin.right; const chartHeight = r * 2 - margin.top - margin.bottom; const chartSvg = chart.append("svg") .attr("width", chartWidth + margin.left + margin.right) .attr("height", chartHeight + margin.top + margin.bottom) .style("overflow", "visible"); const chartG = chartSvg.append("g") .attr("transform", `translate(${[margin.left, margin.top]})`); const xScale = d3.scaleLinear() .range([chartWidth, 0]); const xAxis = chartG.append("g") .attr("transform", `translate(0, ${chartHeight})`); const yScale = d3.scaleLinear() .domain([0, r * 2]) .range([0, chartHeight]); const line = d3.line() .x(d => xScale(d[0])) .y((d, i, e) => yScale(d[1])); const sine = chartG.append("path") .attr("fill", "none") .attr("stroke", "#888"); const dot = chartG.append("circle") .attr("r", 4) .attr("fill", "tomato"); chartG.append("text") .style("font-style", "oblique") .attr("y", chartHeight + 35) .text("← t"); yield wrapper.node(); while (true){ mutable pos++; mutable t++; if (mutable pos > d) mutable pos = 0; const {x, y} = path.node().getPointAtLength(mutable pos); mutable point = [x, y]; if (t > 1) mutable data.push([t, point[1]]); const over = data.length > limit; if (over) mutable data.shift(); xScale.domain([over ? data[0][0] : 0, t]); circle.attr("cx", x).attr("cy", y); sine.datum(data) .attr("d", line); dot .attr("cx", xScale(t)) .attr("cy", yScale(y)); xAxis.call(d3.axisBottom(xScale)); yield wrapper.node(); } }32:[] 2f:{"id":"b7cd1cd8f4e0acd2","slug":"sine-wave","title":"Sine Wave","thumbnail":"4e7d6f0491f894c8a0868c77c84e5631628fbc1bec926b73abeb9154c30e6bf9","access_level":"public","create_time":"$D2020-08-25T14:29:00.886Z","update_time":"$D2021-02-15T02:26:39.682Z","view_time":null,"first_public_time":"$D2020-08-25T15:29:45.139Z","fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"be420f6a83563b92","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":"starter_2024"},"version":242,"publish_version":242,"role":null,"authored":false,"authors":[{"type":"individual","id":"61e2153e05789733","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":null}],"members":[{"type":"individual","id":"61e2153e05789733","login":"harrystevens","name":"Harry Stevens","avatar_url":"https://avatars-next.observableusercontent.com/bc9bae4b7e30062b343ae978a13454e29cd3f2daf3a800d0024043686ddf094b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"d6b8b6eac28ef61c","slug":"math","title":"Math","owner":{"id":"be420f6a83563b92","login":"harrystevens","name":"Harry Stevens"}},"type":"notebook","body":{"title":"Sine Wave","cells":[{"id":112,"value":"md`# Sine Wave\n\nSteven Strogatz writes in [The Joy of x](https://www.amazon.com/Joy-Guided-Tour-Math-Infinity/dp/0544105850):\n\n> This shape is a sine wave. It arises whenever one tracks the horizontal or vertical excursions of something — or someone — moving in a circle.\n\n

Here, we plot the vertical position of the

⬤

point

over time ${tex`t`} as it moves along the perimeter of a circle. Unconventionally, time moves right to left ← so that the ${tex`2`} red points stay close to each other. For efficiency's sake, we limit the number of positions displayed to ${tex`${cycles}`} complete cycles.\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"mutable point = [0, 0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"mutable pos = 0;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"mutable t = 0;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"r = 80;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"limit = d * cycles;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"cycles = 5;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"mutable data = [];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d = Math.PI * r * 2;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@5\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"