31:T788,signalGraph = { const svg = d3 .create('svg') .attr('viewBox', [0, 0, width, heightSignalGraph]); const xAxis = d3.axisBottom(xScaleSignalGraph).ticks(maxStep); svg .append('g') .attr( 'transform', `translate(0, ${heightSignalGraph - marginSignalGraph.bottom})` ) .call(xAxis) .call(g => g .selectAll('.tick line') .clone() .attr('stroke-opacity', d => (d ? 0.1 : 0.5)) .attr('y1', -heightSignalGraph) ); svg .append('text') .attr('transform', `translate(${width / 2}, ${heightSignalGraph - 3})`) .style('text-anchor', 'middle') .text('Time'); const yAxis = d3.axisLeft(yScaleSignalGraph).ticks(4); svg .append('g') .attr('transform', `translate(${marginSignalGraph.left}, 0)`) .call(yAxis) .call(g => g .selectAll('.tick line') .clone() .attr('stroke-opacity', d => (d ? 0.1 : 0.5)) .attr('x1', width) ); svg .append('text') .attr('transform', 'rotate(-90)') .attr('x', 0 - heightSignalGraph / 2) .attr('y', 20) .style('text-anchor', 'middle') .text('Intensity'); const geometry = svg.append('g'); const signalPath = []; steps.forEach(step => { const xCoord = xScaleSignalGraph(step); const yCoord = yScaleSignalGraph(g(step)); signalPath.push([xCoord, yCoord]); }); geometry .append('path') .attr('fill', 'none') .attr('stroke', '#f5b876') .attr('stroke-width', 2.0) .attr('d', d3.line()(signalPath)); geometry .append('circle') .attr('cx', xScaleSignalGraph(time)) .attr('cy', yScaleSignalGraph(g(time))) .attr('r', 2); geometry .append('line') .attr('stroke', 'black') .attr('x1', xScaleSignalGraph(time)) .attr('y1', yScaleSignalGraph(0)) .attr('x2', xScaleSignalGraph(time)) .attr('y2', yScaleSignalGraph(g(time))); return svg.node(); }32:T96d,windingGraph = { const originX = xScaleWindingGraph(0); const originY = yScaleWindingGraph(0); const svg = d3 .create('svg') .attr('viewBox', [0, 0, width, heightWindingGraph]); const xAxis = d3.axisBottom(xScaleWindingGraph).ticks(4); svg .append('g') .attr( 'transform', `translate(0, ${heightWindingGraph - marginWindingGraph.bottom})` ) .call(xAxis) .call(g => g.select('.domain').remove()) .call(g => g .selectAll('.tick line') .clone() .attr('stroke-opacity', d => (d ? 0.1 : 0.5)) .attr('y1', -heightWindingGraph) ); const yAxis = d3 .axisLeft(yScaleWindingGraph) .ticks(4) .tickFormat(x => { if (x > 1) return `${x.toFixed(0)}i`; if (x === 1) return `i`; if (x === 0) return 0; if (x === -1) return `-i`; if (x < 1) return `${x.toFixed(0)}i`; }); svg .append('g') .attr('transform', `translate(${marginWindingGraph.left}, 0)`) .call(yAxis) .call(g => g.select('.domain').remove()) .call(g => g .selectAll('.tick line') .clone() .attr('stroke-opacity', d => (d ? 0.1 : 0.5)) .attr('x1', widthWindingGraph) ); const geometry = svg.append('g'); const x = xScaleWindingGraph(phiX(time, windingFrequency)); const y = yScaleWindingGraph(phiY(time, windingFrequency)); const { centerOfMass, windingPathScaled } = pathData; geometry .append('path') .attr('fill', 'none') .attr('stroke', '#f5b876') .attr('stroke-width', 2.0) .attr('d', d3.line()(windingPathScaled)); geometry .append('circle') .attr('cx', i => x) .attr('cy', i => y) .attr('r', 2); geometry .append('line') .attr('stroke', 'black') .attr('x1', x) .attr('y1', y) .attr('x2', originX) .attr('y2', originY); geometry .append('circle') .attr('cx', originX) .attr('cy', originY) .attr('fill', 'transparent') .attr('stroke-width', 1) .attr('stroke', '#cccccc') .attr('stroke-dasharray', 5) .attr('r', xScaleWindingGraph(Math.cos(0)) - originX); const { xSum, ySum } = centerOfMass; geometry .append('circle') .attr('fill', '#d94c4c') .attr('stroke-width', 1) .attr('stroke', '#d94c4c') .attr('cx', xScaleWindingGraph(xSum)) .attr('cy', yScaleWindingGraph(ySum)) .attr('r', 4); return svg.node(); }33:T5fa,frequencyGraph = { const svg = d3 .create('svg') .attr('viewBox', [0, 0, width, heightFrequencyGraph]); const xAxis = d3.axisBottom(xScaleFrequencyGraph).ticks(maxStep); svg .append('g') .attr( 'transform', `translate(0, ${heightFrequencyGraph - marginFrequencyGraph.bottom})` ) .call(xAxis) .call(g => g.select(".domain").remove()) .call(g => g .selectAll(".tick line") .clone() .attr("stroke-opacity", d => (d ? 0.1 : 0.5)) .attr("y1", -heightFrequencyGraph) ); svg .append('text') .attr('transform', `translate(${width / 2}, ${heightFrequencyGraph - 5})`) .style('text-anchor', 'middle') .text('Winding Frequency'); const yAxis = d3.axisLeft(yScaleFrequencyGraph).ticks(4); svg .append('g') .attr("transform", `translate(${marginFrequencyGraph.left}, 0)`) .call(yAxis) .call(g => g .selectAll(".tick line") .clone() .attr("stroke-opacity", d => (d ? 0.1 : 0.5)) .attr("x1", width) ); svg .append('text') .attr('transform', 'rotate(-90)') .attr('x', 0 - heightSignalGraph / 2) .attr('y', 20) .style('text-anchor', 'middle') .text('X-coord center of mass'); const geometry = svg.append('g'); const { frequencyPathScaled } = pathData; geometry .append('path') .attr('fill', 'none') .attr('stroke', '#d94c4c') .attr('stroke-width', 2.0) .attr('d', d3.line()(frequencyPathScaled)); return svg.node(); }34:T456,pathData = { const frequencyPathScaled = []; const windingPath = []; const windingPathScaled = []; // Winding graph paths. steps.forEach(step => { const x = phiX(step, windingFrequency); const y = phiY(step, windingFrequency); if (step <= time) { const xScaled = xScaleWindingGraph(x); const yScaled = yScaleWindingGraph(y); windingPath.push([x, y]); windingPathScaled.push([xScaled, yScaled]); } }); // Center of mass. const n = windingPath.length; let xSum = 0; let ySum = 0; windingPath.forEach(([x, y]) => { xSum += x; ySum += y; }); const centerOfMass = { xSum: xSum / n, ySum: ySum / n }; // Frequency graph. for (let f = 0; f <= windingFrequency; f += 0.01) { let xSum = 0; let n = 0; steps.forEach(step => { if (step <= time) { xSum += phiX(step, f); ++n; } }); frequencyPathScaled.push([ xScaleFrequencyGraph(f), yScaleFrequencyGraph(xSum / n) ]); } return { centerOfMass, frequencyPathScaled, windingPath, windingPathScaled }; }35:T96a,function Scrubber( values, { format = value => value, delay = null, autoplay = true, loop = true, alternate = false, title = null, description = null, value = 0 } = {} ) { values = Array.from(values); const form = html`

`; if (title) { form.prepend( html`

${title}

` ); } if (description) { form.append( html`

${description}

` ); } let timer = null; let direction = 1; function start() { form.b.textContent = "Pause"; timer = delay === null ? requestAnimationFrame(tick) : setInterval(tick, delay); } function stop() { form.b.textContent = "Play"; if (delay === null) cancelAnimationFrame(timer); else clearInterval(timer); timer = null; } function tick() { if (delay === null) timer = requestAnimationFrame(tick); if ( form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN) ) { if (!loop) return stop(); if (alternate) direction = -direction; } form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", { bubbles: true })); } form.i.oninput = event => { if (event && event.isTrusted && timer) form.b.onclick(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (timer) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", { bubbles: true })); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); return Generators.disposable(form, stop); }36:[] 2f:{"title":"The Fourier Transform","cells":[{"id":0,"value":"md`# The Fourier Transform\nThis is a visualization inspired by the 3Blue1Brown video \n\"But what is the Fourier Transform? A visual introduction\". I highly recommend watching the video before diving into this notebook. \n\nThe Fourier Transform is a transform that turns a function of time (typically referred to as a signal), into a function of its constituent frequencies. Start by pressing play on the time and winding frequency buttons in the Winding Graph section to see the Fourier Transform in action. You can use the sliders to help build an intuition behind how the transform works.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1027,"value":"md`## Signal Graph`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1915,"value":"md`The signal graph corresponds to a function ${tex`g(t)`} with the following definition:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1038,"value":"tex`g(t) = 0.75 + 0.5 \\cos(f * 2\\pi * t)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1059,"value":"tex`g(${time.toFixed(\n 2\n)}) = 0.75 + 0.5 \\cos(${signalFrequency} * 2\\pi * ${time.toFixed(2)}) = ${g(\n time\n).toFixed(2)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1920,"value":"md`The black point in ${tex`g(t)`} corresponds to how much of the graph has been wound up around the winding graph.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1030,"value":"md`## Winding Graph`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1926,"value":"md`The winding graph is a graph of the complex plane where the x-axis corresponds to the real numbers, and the y-axis corresponds to the complex numbers. You can derive the position of the black point in the winding graph ${tex`h(t)`} with the following formulas:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1127,"value":"md`${tex`e ^ {i\\varphi} = \\cos\\varphi + i \\sin\\varphi`} [1]`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1131,"value":"tex`\\varphi = -2 \\pi f t = -2 \\pi * ${windingFrequency.toFixed(\n 2\n)} * ${time.toFixed(2)} = ${phi(time, windingFrequency).toFixed(2)} \\ radians`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1077,"value":"tex`h(t) = g(t) e^{i\\varphi} = g(t) e^{-i 2 \\pi f t}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1112,"value":"tex`\\begin{aligned} \nh(${time.toFixed(2)}) &= (${g(time).toFixed(\n 2\n)}) e^{-i 2 \\pi (${windingFrequency.toFixed(2)}) (${time.toFixed(\n 2\n)})} \\\\[1ex] &= (${g(time).toFixed(2)})\\cos(-2 \\pi * ${windingFrequency.toFixed(\n 2\n)} * ${time.toFixed(2)}) + i (${g(time).toFixed(\n 2\n)}) \\sin(-2 \\pi * ${windingFrequency.toFixed(2)} * ${time.toFixed(\n 2\n)})\\\\[1ex] &= ${phiX(time, windingFrequency).toFixed(2)} + i${phiY(\n time,\n windingFrequency\n).toFixed(2)} \\end{aligned}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1893,"value":"md`The red point in the winding graph corresponds to the center of mass calculated by the approximated Fourier Transform. The formula for this is given at the end of the Frequency Graph section.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":887,"value":"viewof time = {\n return Scrubber(steps, {\n autoplay: false,\n loop: false,\n title: 'Time',\n description:\n 'Amount of time spent winding the signal graph around the winding graph.',\n value: 100\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":941,"value":"viewof windingFrequency = {\n return Scrubber(steps, {\n autoplay: false,\n loop: false,\n title: 'Winding Frequency',\n description:\n 'Frequency that we are wrapping the graph around the circle. In cycles/second.',\n value: 50\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1906,"value":"md`## Frequency Graph`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1956,"value":"md`The frequency graph ${tex`\\hat{g}(f)`} plots the x-coordinate of the red center of mass point in the winding graph for every possible winding frequency. You should see a spike at ${signalFrequency} cycles/second corresponding to the frequency of the original signal graph.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1257,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1986,"value":"md`To find the frequency graph we can approximate the center of mass for each winding frequency with the following formula:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1992,"value":"tex.block`\\hat{g}(f) \\approx \\dfrac{1}{N}\\sum_{k=1}^{N} h(t) = \\dfrac{1}{N}\\sum_{k=1}^{N} g(t) e^{-i 2 \\pi f t}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2011,"value":"md`Where ${tex`N`} is the number of points being sampled for a given frequency in the winding graph. To be more accurate we can take this to the limit and calculate the actual Fouier Transform via:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2016,"value":"tex.block`\\hat{g}(f) = \\int_{-\\infty}^{\\infty} g(t) e^{-i 2 \\pi f t} dt`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"g = t => 0.75 + 0.5 * Math.cos(signalFrequency * 2 * Math.PI * t)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1069,"value":"signalFrequency = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"maxStep = 6","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"steps = {\n const steps = [];\n for (let step = 0; step <= maxStep; step += 0.01) {\n steps.push(Math.round((step + Number.EPSILON) * 100) / 100);\n }\n return steps;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":926,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"phi = (t, f) => -(2 * Math.PI * t * f)","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"phiX = (t, f) => g(t) * Math.cos(phi(t, f))","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"phiY = (t, f) => g(t) * Math.sin(phi(t, f))","pinned":false,"hidden":false,"mode":"ojs"},{"id":681,"value":"xScaleSignalGraph = d3\n .scaleLinear()\n .domain([0, maxStep])\n .range([marginSignalGraph.left, width - marginSignalGraph.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":684,"value":"yScaleSignalGraph = d3\n .scaleLinear()\n .domain([0, 1.5])\n .range([heightSignalGraph - marginSignalGraph.bottom, marginSignalGraph.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"xScaleWindingGraph = d3\n .scaleLinear()\n .domain([-1.5, 1.5])\n .range([\n marginWindingGraph.left,\n widthWindingGraph - marginWindingGraph.right\n ])","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"yScaleWindingGraph = d3\n .scaleLinear()\n .domain([-1.5, 1.5])\n .range([\n heightWindingGraph - marginWindingGraph.bottom,\n marginWindingGraph.top\n ])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1266,"value":"xScaleFrequencyGraph = d3\n .scaleLinear()\n .domain([0, maxStep])\n .range([marginFrequencyGraph.left, width - marginFrequencyGraph.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1269,"value":"yScaleFrequencyGraph = d3\n .scaleLinear()\n .domain([-0.5, 1])\n .range([\n heightFrequencyGraph - marginFrequencyGraph.bottom,\n marginFrequencyGraph.top\n ])","pinned":false,"hidden":false,"mode":"ojs"},{"id":671,"value":"heightSignalGraph = 250","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"widthWindingGraph = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"heightWindingGraph = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":1241,"value":"heightFrequencyGraph = 250","pinned":false,"hidden":false,"mode":"ojs"},{"id":995,"value":"marginSignalGraph = ({ bottom: 40, left: 60, right: 40, top: 40 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"marginWindingGraph = ({ bottom: 40, left: 40, right: 40, top: 40 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1237,"value":"marginFrequencyGraph = ({ bottom: 40, left: 60, right: 40, top: 40 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":884,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}