30: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(); } }31:[] 2e:{"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"},{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"mutable point = [0, 0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"mutable pos = 0;","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"mutable t = 0;","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"r = 80;","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"limit = d * cycles;","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"cycles = 5;","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"mutable data = [];","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"d = Math.PI * r * 2;","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@5\");","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}