3e:null 3f:["$","title",null,{"children":"How to visualize periodicity ? | Erdal Yildiz | Observable"}] 45:T5b0,teaserPeriodicViz = { const h = (height * 5) / 3; const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, h]) .attr("stroke-width", 2); svg.append("defs"); const gridding = d3 .gridding() .mode("grid") .size([width, h]) .offset([0, -20]) .padding(10); var visualizations = []; const greyColor = t => d3.interpolateGreys(1 - t); async function createViz(d) { const gViz = d3.select(this); const svg = gViz .append("svg") .attr('width', d => d.width) .attr('height', d => d.height * 0.9) .attr("viewBox", d => [0, 0, width, height]); const text = gViz .append('text') .attr('x', d.width / 2) .attr('y', d.height) .attr('alignment-baseline', 'top') // .attr('font-weight', 'bold') .attr('text-anchor', 'middle') .attr('font-size', 14) .text(d.name); const result = await d.viz(width, height, svg, greyColor); if (d.vega) { const serialized = new XMLSerializer().serializeToString(result); svg.html(serialized); } else { visualizations.push(result); } } const rects = svg .selectAll(".square") .data(gridding(listViz)) .enter() .append('g') .attr('transform', d => `translate(${d.x} ${d.y})`) .each(createViz); while (true) { await visibility(); visualizations.forEach(viz => viz.render()); yield svg.node(); } return svg.node(); }46:T736,function periodicSignal(width, height, g, vizColor = notebookColor) { const svg = g || d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("stroke-width", 1); const line = svg .append("path") .attr("stroke", "black") .attr("stroke-width", 1) .attr("fill", "none"); const radius = (height - margin * 2) / 2; const centerCircle = { x: width * 0.2, y: height / 2 }; const circle = svg .append("circle") .attr("cx", centerCircle.x) .attr("cy", centerCircle.y) .attr("r", radius) .attr("fill", "none") .attr("stroke", "black"); const connector = svg.append("g"); const connectorLine = connector .append("line") .attr("stroke", "black") .attr("stroke-width", 1) .attr("fill", "none"); const connectorPoint = connector .append("circle") .attr("fill", vizColor(0)) .attr("r", 4); const point = svg .append("circle") .attr("cx", centerCircle.x) .attr("cy", centerCircle.y) .attr("r", 6) .attr("fill", vizColor(0)); var pts = []; console.log("Render svg"); function render() { const [x, y] = [ Math.cos(mutable angle) * radius, Math.sin(-mutable angle) * radius ]; point.attr("transform", `translate(${x} ${y})`); const dT = 1 / 55; pts = pts .map((pt) => [pt[0] + viewof speedSineWave.value * dT, pt[1]]) .filter((pt) => pt[0] < width + 100); pts.unshift([width / 2, y + height / 2]); line.attr("d", d3.line().curve(d3.curveBasis)(pts)); connectorLine .attr("x1", centerCircle.x + x) .attr("y1", centerCircle.y + y) .attr("x2", width / 2) .attr("y2", y + height / 2); connectorPoint.attr("cx", width / 2).attr("cy", y + height / 2); return svg.node(); } return Object.assign(svg.node(), { render }); }47:T775,// following Kivi Shapiro suggestion ! function periodicSignalKiviShapiro(width, height, g, vizColor = notebookColor) { const svg = g || d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("stroke-width", 1); const line = svg .append("path") .attr("stroke", "black") .attr("stroke-width", 1) .attr("fill", "none"); const radius = (height - margin * 2) / 2; const centerCircle = { x: width * 0.2, y: height / 2 }; const circle = svg .append("circle") .attr("cx", centerCircle.x) .attr("cy", centerCircle.y) .attr("r", radius) .attr("fill", "none") .attr("stroke", "black"); const connector = svg.append("g"); const connectorLine = connector .append("line") .attr("stroke", "black") .attr("stroke-width", 1) .attr("fill", "none"); const connectorPoint = connector .append("circle") .attr("fill", vizColor(0)) .attr("r", 4); const point = svg .append("circle") .attr("cx", centerCircle.x) .attr("cy", centerCircle.y) .attr("r", 6) .attr("fill", vizColor(0)); var pts = []; console.log("Render svg"); function render() { const [x, y] = [ Math.cos(mutable angle) * radius, Math.sin(-mutable angle) * radius ]; point.attr("transform", `translate(${x} ${y})`); const dT = 1 / 55; pts = pts .map((pt) => [pt[0] + viewof speedSineWave.value * dT, pt[1]]) .filter((pt) => pt[0] < width + 100); pts.unshift([x + width / 2, y + height / 2]); line.attr("d", d3.line().curve(d3.curveBasis)(pts)); connectorLine .attr("x1", centerCircle.x + x) .attr("y1", centerCircle.y + y) .attr("x2", x + width / 2) .attr("y2", y + height / 2); connectorPoint.attr("cx", x + width / 2).attr("cy", y + height / 2); return svg.node(); } return Object.assign(svg.node(), { render }); }48:T49d,function colorAnimationAngle(width, height, g, vizColor = notebookColor) { const svg = g || d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("stroke-width", 1); const color = d3.scaleSequential(vizColor).domain([0, Math.PI]); const rect = svg .append('rect') .attr('x', 0) .attr('y', 0) .attr('width', width / 2) .attr('height', height); const innerRadius = (0.9 * height) / 2; const outerRadius = (0.6 * height) / 2; const circle = gradientCircle(svg, color, innerRadius, outerRadius).attr( 'transform', `translate(${(3 * width) / 4} ${height / 2})` ); const line = svg .append('line') .attr('stroke', 'black') .attr('stroke-width', 5) .attr('transform', `translate(${(3 * width) / 4} ${height / 2})`); function render() { const t = mutable angle; rect.attr('fill', color(Math.abs(t - Math.PI))); line .attr('x1', Math.cos(t) * innerRadius) .attr('y1', Math.sin(t) * innerRadius) .attr('x2', Math.cos(t) * outerRadius) .attr('y2', Math.sin(t) * outerRadius); return svg.node(); } return Object.assign(svg.node(), { render }); }49:T56f,function colorAnimationSin(width, height, g, vizColor = notebookColor) { const svg = g || d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("stroke-width", 1); const color = d3.scaleSequential(vizColor).domain([0, Math.PI]); const rect = svg .append('rect') .attr('x', 0) .attr('y', 0) .attr('width', width / 2) .attr('height', height); const innerRadius = (0.9 * height) / 2; const outerRadius = (0.6 * height) / 2; const circle = gradientCircle(svg, color, innerRadius, outerRadius).attr( 'transform', `translate(${(3 * width) / 4} ${height / 2})` ); const line = svg .append('line') .attr('stroke', 'black') .attr('stroke-width', 5) .attr('transform', `translate(${(3 * width) / 4} ${height / 2})`); color.domain([-1, 1]); const scale = d3 .scaleLinear() .range([0, Math.PI]) .domain([-1, 1]); function render() { rect.attr('fill', color(Math.sin(mutable angle + Math.PI / 2))); var t = scale(Math.sin(mutable angle - Math.PI / 2)); t = mutable angle > Math.PI ? 2 * Math.PI - t : t; line .attr('x1', Math.cos(t) * innerRadius) .attr('y1', Math.sin(t) * innerRadius) .attr('x2', Math.cos(t) * outerRadius) .attr('y2', Math.sin(t) * outerRadius); return svg.node(); } return Object.assign(svg.node(), { render }); }4a:T485,function fillingCircle(width, height, g, vizColor = notebookColor) { const svg = g || d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("stroke-width", 1); const color = d3.scaleSequential(vizColor).domain([0, Math.PI]); var outerRadius = (0.9 * height) / 2, innerRadius = (0.5 * height) / 2; const teta = (2 * Math.PI) / numberSegments; const circle = svg .append("g") .attr("transform", `translate(${width / 2} ${height / 2})`) .selectAll("path") .data(d3.range(0, 2 * Math.PI, teta)) .enter() .append("path") .attr( "d", d3 .arc() .outerRadius(outerRadius) .innerRadius(innerRadius) .startAngle(d => d) .endAngle(d => d + teta) ) .attr('stroke-width', 1); function render() { // await visibility(); const teta = mutable angle; circle.attr('stroke', (d, i) => d < teta ? color(Math.abs(d - Math.PI)) : 'none' ); circle.attr('fill', (d, i) => d < teta ? color(Math.abs(d - Math.PI)) : 'none' ); return svg.node(); } return Object.assign(svg.node(), { render }); }4b:T4cf,function movingCircle(width, height, g, vizColor = notebookColor) { const svg = g || d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("stroke-width", 1); const color = d3.scaleSequential(vizColor).domain([0, Math.PI]); var outerRadius = (0.9 * height) / 2, innerRadius = (0.5 * height) / 2; const teta = (2 * Math.PI) / numberSegments; const circleWrap = svg .append('g') .attr("transform", `translate(${width / 2} ${height / 2})`); const circle = circleWrap.append("g"); const paths = circle .selectAll("path") .data(d3.range(0, 2 * Math.PI, teta)) .enter() .append("path") .attr( "d", d3 .arc() .outerRadius(outerRadius) .innerRadius(innerRadius) .startAngle(d => d - teta / 2) .endAngle(d => d + teta / 2) ) .attr('stroke-width', 1) .attr('stroke', d => color(Math.abs(d - Math.PI))) .attr('fill', d => color(Math.abs(d - Math.PI))); function render() { // await visibility(); const teta = mutable angle / (2 * Math.PI); circle.attr('transform', `rotate(${teta * 360} 0 0)`); return svg.node(); } return Object.assign(svg.node(), { render }); }4c:T560,function tone(width, height, g, vizColor = notebookColor) { const id = DOM.uid(); const svg = g || d3 .create("svg") .attr('id', id) .attr("viewBox", [0, 0, width, height]) .attr("stroke-width", 1); const color = d3.scaleSequential(vizColor).domain([0, Math.PI]); const defaultText = 'Well frequency is often associated with sound right ? Move your mouse over here to ear the tone.'; const text = svg .append('text') .attr('x', width / 2) .attr('y', height / 3) .attr('text-anchor', 'middle') .text(defaultText); const warning = svg .append('text') .attr('x', width / 2) .attr('y', (11 * height) / 20) .attr('text-anchor', 'middle') .attr('font-size', 12) .text("Warning : set your volume correctly before to avoid any problem"); var synth = new Tone.Synth().toMaster(); synth.volume.value = -12; function addEventListener() { document.getElementById(id).addEventListener('mouseenter', () => { const freq = frequency * 1000; text.text(`Frequency is ${frequency} x 1000 = ${freq} Hz`); synth.triggerAttack(freq); }); document.getElementById(id).addEventListener('mouseleave', () => { text.text(defaultText); synth.triggerRelease(); }); } function render() {} return Object.assign(svg, { addEventListener, render }); }4d:T70f,function pendulum(width, height, g, vizColor = notebookColor) { const svg = g || d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("stroke-width", 1); const gravity_mps2 = 9.80665; const dT = 1000 / 55; let velocity = 0; let angle_rad = Math.PI / 8; const T = 1000 / frequency; const yTop = height / 8; const length = gravity_mps2 * (T / (2 * Math.PI)) ** 2; const scaleL = d3 .scaleLinear() .domain([ gravity_mps2 * (1000 / (3 * 2 * Math.PI)) ** 2, gravity_mps2 * (1000 / (0.1 * 2 * Math.PI)) ** 2 ]) .range([height * 0.5, height / 1.4]); const k = -gravity_mps2 / length; const pendulum = svg .append('g') .attr('fill', vizColor(0)) .attr('transform', `translate(${width / 2} ${yTop})`); const connector = pendulum .append('circle') .attr('cx', 0) .attr('cy', 0) .attr('r', 3); const line = pendulum .append('line') .attr('x1', 0) .attr('y1', 0) .attr('x2', scaleL(length)) .attr('y2', scaleL(length)) .attr('stroke', vizColor(0)); const ball = pendulum .append('circle') .attr('cx', scaleL(length)) .attr('cy', yTop) .attr('stroke', vizColor(0)) .attr('fill', 'white') .attr('r', 30); function render() { // const t = Math.abs(mutable angle - Math.PI); const acceleration = k * Math.sin(angle_rad); velocity += acceleration * dT; // velocity -= (velocity * friction) / 100; angle_rad += velocity * dT; const [x, y] = [ Math.cos(angle_rad + Math.PI / 2) * scaleL(length), Math.sin(angle_rad + Math.PI / 2) * scaleL(length) ]; line.attr('x2', x).attr('y2', y); ball.attr('cx', x).attr('cy', y); return svg.node(); } return Object.assign(svg.node(), { render }); }4e:[{"id":"f75ca3dc7c0b65cf225cea300e01e5e3cb5abf4ad75592936a2b6c79b797e933a208355d31d5b160f5b1db2a7de61fa402fe279d036a052211cd09462f524cad","href":"https://static.observableusercontent.com/files/f75ca3dc7c0b65cf225cea300e01e5e3cb5abf4ad75592936a2b6c79b797e933a208355d31d5b160f5b1db2a7de61fa402fe279d036a052211cd09462f524cad","name":"land-110m.json","type":"application/json","lastModified":1705074443851.33,"size":55207}] 43:{"id":"13cff24bd2befd90","slug":null,"title":"How to visualize periodicity ?","thumbnail":"e03db99160e33445117905d07efceffd691a7e30d97f1ea11d1692bd2832e70c","access_level":"public","create_time":"$D2024-01-12T15:47:23.851Z","update_time":"$D2024-01-12T15:47:23.851Z","view_time":null,"first_public_time":"$D2024-01-12T15:47:23.851Z","has_unpublished_edits":null,"fork":{"id":"63f2b05d66cc3d18","slug":"how-to-visualize-periodic-signals","title":"How to visualize periodicity ?","owner":{"id":"4b6918df760e73ca","login":"pierreleripoll","name":"Pierre Ripoll"}},"stars":0,"starred":false,"owner":{"type":"team","id":"bc9d499f43377845","login":"e7dal","name":"Erdal Yildiz","avatar_url":"https://avatars-next.observableusercontent.com/670c9fd8a6479e76dc2cfc136e0bb53f964c9f8a4f426830000dd0ec9de6bde5","tier":"starter_2024","bio":"","following":false},"version":2470,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cb34c9480fb07813","login":"e7dal","name":"Erdal Yildiz","avatar_url":"https://avatars-next.observableusercontent.com/670c9fd8a6479e76dc2cfc136e0bb53f964c9f8a4f426830000dd0ec9de6bde5","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"cb34c9480fb07813","login":"e7dal","name":"Erdal Yildiz","avatar_url":"https://avatars-next.observableusercontent.com/670c9fd8a6479e76dc2cfc136e0bb53f964c9f8a4f426830000dd0ec9de6bde5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"How to visualize periodicity ?","cells":[{"id":0,"value":"md`# How to visualize periodicity ?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1773,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"viewof frequency = slider({\n min: 0.1,\n max: 3,\n value: 0.42,\n step: 0.01,\n format: v => `${v} Hz`,\n title: \"Frequency\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"mutable angle = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2308,"value":"md`This grid presentation was made using [d3-gridding](https://github.com/romsson/d3-gridding) !`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2304,"value":"md`# Dot revolution`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"md` This is a periodic signal, y = Math.sin(t). You can visualize it as a dot doing ${frequency} revolutions per second with constant speed. Leave comments if you have any ideas how I could improve it ! `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1649,"value":"{\n const svg = periodicSignal(width, height);\n yield svg;\n while (true) {\n await visibility();\n yield svg.render();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":926,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2438,"value":"{\n const svg = periodicSignalKiviShapiro(width, height);\n yield svg;\n while (true) {\n await visibility();\n yield svg.render();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2463,"value":"viewof speedSineWave = slider({\n min: 10,\n max: 1000,\n value: 100,\n title: \"Speed sine wave\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2436,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"md`## Color animation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"md`This is a smooth color animation following a linear function of the angle. Gradient circle is created with [this technique](https://observablehq.com/@pierreleripoll/gradient-on-circle).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1664,"value":"{\n const svg = colorAnimationAngle(width, height / 2);\n while (true) {\n await visibility();\n yield svg.render();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"md`The same but following the sin function.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1668,"value":"{\n const svg = colorAnimationSin(width, height / 2);\n while (true) {\n await visibility();\n yield svg.render();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"md`## Blinks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1745,"value":"{\n const svg = blinkAnimation(width, height / 2);\n while (true) {\n await visibility();\n yield svg.render();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"function blinkAnimation(width, height, g, vizColor = notebookColor) {\n const svg =\n g ||\n d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"stroke-width\", 1);\n\n const color = vizColor;\n\n const circles = svg\n .append('g')\n .selectAll('circle')\n .data(d3.range(1, 9), d => `${d}`)\n .join('circle')\n .attr('cx', d => (d * width) / 9)\n .attr('cy', height / 2)\n .attr('fill', 'none')\n .attr('r', height / 4)\n .attr('stroke-width', 1)\n .attr('stroke', 'black');\n\n var index = 0;\n var lastAngle = 0;\n\n function render() {\n // await visibility();\n const show = mutable angle < Math.PI;\n\n circles.attr('fill', (d, i) => (show ? color(0) : \"white\"));\n\n if (lastAngle > mutable angle) index++;\n index = index > 8 ? 0 : index;\n lastAngle = mutable angle;\n return svg.node();\n }\n\n return Object.assign(svg.node(), { render });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1742,"value":"{\n const svg = blinkCountAnimation(width, height / 2);\n while (true) {\n await visibility();\n yield svg.render();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":990,"value":"function blinkCountAnimation(width, height, g, vizColor = notebookColor) {\n const svg =\n g ||\n d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"stroke-width\", 1);\n\n const color = vizColor;\n\n const rects2 = svg\n .append('g')\n .selectAll('circle')\n .data(d3.range(1, 9))\n .join('circle')\n .attr('cx', d => (d * width) / 9)\n .attr('cy', height / 2)\n .attr('r', height / 4)\n .attr('fill', 'none')\n .attr('stroke-width', 1)\n .attr('stroke', 'black');\n\n var index = 0;\n var lastAngle = 0;\n\n function render() {\n // await visibility();\n const show = mutable angle < Math.PI;\n\n rects2.attr('fill', (d, i) => (i < index ? color(i / 8) : \"white\"));\n\n if (lastAngle > mutable angle) index++;\n index = index > 8 ? 0 : index;\n lastAngle = mutable angle;\n return svg.node();\n }\n return Object.assign(svg.node(), { render });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":820,"value":"md`## Earth rotation ${frequency > 2 ? \"... time flies right ?\" : \"\"}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1738,"value":"earthRotationSVG = {\n const svg = earthRotation(width, height);\n while (true) {\n await visibility();\n yield svg.render();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1796,"value":"function earthRotation(width, height, g, vizColor = notebookColor) {\n const svg =\n g ||\n d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"stroke-width\", 1);\n\n // await visibility();\n const projection = d3\n .geoOrthographic()\n .fitExtent([[1, 1], [width - 1, height - 1]], sphere);\n\n const path = d3.geoPath(projection);\n\n const landPath = svg.append('path').attr('fill', vizColor(0));\n const spherePath = svg\n .append('path')\n .attr('fill', 'none')\n .attr('stroke', vizColor(0));\n\n function render() {\n // await visibility();\n projection.rotate([(mutable angle * 360) / (2 * Math.PI), 0, 0]);\n landPath.attr('d', path(land));\n spherePath.attr('d', path(sphere));\n return svg.node();\n // await visibility();\n }\n return Object.assign(svg.node(), { render });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"md`## Period is : ${(1 / frequency).toPrecision(2)} seconds`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":951,"value":"md`*Attention !* This is based on the approximation that yield generates a frame every 1/55 seconds, don't freak out if it's not accurate 😉`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1735,"value":"{\n const svg = clockTime(width, height);\n while (true) {\n await visibility();\n yield svg.render();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":851,"value":"function clockTime(width, height, g, vizColor = notebookColor) {\n const svg =\n g ||\n d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"stroke-width\", 1);\n\n const color = vizColor;\n\n const text = svg\n .append('text')\n .attr('font-size', height / 2)\n .attr('text-anchor', 'middle')\n .attr('alignment-baseline', 'central')\n .attr('fill', color(0))\n .attr('transform', `translate(${width / 2} ${height / 2})`)\n .text('Time');\n\n var period = 1 / frequency;\n var scale = d3\n .scaleLinear()\n .domain([0, 2 * Math.PI])\n .range([period, 0]);\n\n function render() {\n // await visibility();\n text.text(`${scale(mutable angle).toFixed(1)} s`);\n return svg.node();\n }\n return Object.assign(svg.node(), { render });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1005,"value":"md`## Circles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1056,"value":"viewof numberSegments = slider({\n min: 6,\n max: 150,\n value: 20,\n step: 2,\n title: \"Number of segments\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1729,"value":"{\n const svg = fillingCircle(width, height);\n while (true) {\n await visibility();\n yield svg.render();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1009,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1732,"value":"{\n const svg = movingCircle(width, height);\n while (true) {\n await visibility();\n yield svg.render();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1017,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1063,"value":"md`Funny stuff : try changing the number of segments and watch how it feels like the frequency encoded is changing while in reality it is not (specially true with high frequencies).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1070,"value":"md`## Frequencies dimension`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1724,"value":"viewof vegaF = {\n const vegaResult = await frequencies(width, height);\n return html`${vegaResult}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1090,"value":"async function frequencies(width, height, g, vizColor = notebookColor) {\n const svg = await embed(\n {\n width: width - margin,\n\n data: {\n values: [{ freq: frequency, amplitude: 1 }]\n },\n mark: \"bar\",\n encoding: {\n x: {\n field: \"freq\",\n type: \"quantitative\",\n scale: {\n domain: [0.2, 3],\n margin: 0\n },\n title: \"Frequency in Hz\"\n },\n y: {\n field: \"amplitude\",\n type: \"quantitative\",\n title: \"Amplitude\"\n },\n color: { value: vizColor(0) }\n }\n },\n { renderer: 'svg', actions: false }\n );\n\n return Object.assign(\n html`${d3\n .select(svg)\n .select('svg')\n .node()}`,\n { render: _ => null, vega: true }\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1119,"value":"md`## Concentric circles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1720,"value":"{\n const svg = concentricCircles(width, height);\n while (true) {\n await visibility();\n yield svg.render();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1150,"value":"function concentricCircles(width, height, g, vizColor = notebookColor) {\n const svg =\n g ||\n d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"stroke-width\", 1);\n\n const color = d3.scaleSequential(vizColor).domain([0, Math.PI]);\n\n const circles = svg\n .append('g')\n .attr('fill', 'none')\n .attr('stroke', color(0));\n\n var radius = [];\n\n var prevAngle = mutable angle;\n\n function render() {\n // await visibility();\n // await Promises.delay(1000 / 55);\n if (mutable angle < prevAngle) radius.push(0);\n radius = radius.map(r => ++r).filter(r => r < (3 * width) / 4);\n\n circles\n .selectAll('circle')\n .data(radius)\n .join('circle')\n .attr('cx', width / 2)\n .attr('cy', height / 2)\n .attr('r', d => d);\n\n prevAngle = mutable angle;\n return svg.node();\n }\n return Object.assign(svg.node(), { render });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1271,"value":"md`## Sound`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1692,"value":"{\n const svg = tone(width, height / 2);\n yield svg.node();\n svg.addEventListener(svg.id);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1257,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1398,"value":"md`## Pendulum`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1717,"value":"{\n const svg = pendulum(width, height);\n while (true) {\n await visibility();\n yield svg.render();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1447,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1001,"value":"md`---\n\n## Credits\n\nDeveloped for the [LIRIS M2i project](https://projet.liris.cnrs.fr/mi2/) by Pierre Ripoll with the help of [Romain Vuillemot](https://observablehq.com/@romsson).\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1253,"value":"md`## Rosette`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"md`## Flip book`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`## Utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1761,"value":"listViz = [\n { viz: periodicSignal, name: \"Dot revolution\" },\n { viz: colorAnimationAngle, name: \"Color animation\" },\n { viz: blinkCountAnimation, name: \"Blink count\" },\n { viz: earthRotation, name: \"Earth rotating\" },\n { viz: clockTime, name: \"Clock period\" },\n { viz: fillingCircle, name: \"Loading circle\" },\n // { viz : movingCircle, name : \"movingCircle\" },\n { viz: frequencies, name: \"Frequencies dimension\", vega: true },\n { viz: pendulum, name: \"Pendulum\" },\n\n { viz: concentricCircles, name: \"Concentric circles\" }\n // { viz : tone, name : \"tone\" },\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"function earthRotationCanvas(width, height) {\n // await visibility();\n const context = DOM.context2d(width, height);\n const projection = d3\n .geoOrthographic()\n .fitExtent([[1, 1], [width - 1, height - 1]], sphere);\n const path = d3.geoPath(projection, context);\n const figure = html`

\n ${context.canvas}\n`;\n context.fillStyle = d3.interpolateCividis(0);\n function render() {\n // await visibility();\n projection.rotate([(mutable angle * 360) / (2 * Math.PI), 0, 0]);\n context.clearRect(0, 0, width, height);\n context.beginPath(), path(land), context.fill();\n context.beginPath(), path(sphere), context.stroke();\n return figure;\n // await visibility();\n }\n return Object.assign(context, { render });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1828,"value":"notebookColor = d3.interpolateCividis","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":832,"value":"sphere = ({ type: \"Sphere\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"land = topojson.feature(await FileAttachment(\"land-110m.json\").json(), \"land\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"tetaGradient = (2 * Math.PI) / 150","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"margin = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2023,"value":"mutable debug = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"function gradientCircle(svg, color, outerRadius, innerRadius) {\n return svg\n .append('g')\n .selectAll(\"path\")\n .data(d3.range(0, 2 * Math.PI, tetaGradient))\n .enter()\n .append(\"path\")\n .attr(\n \"d\",\n d3\n .arc()\n .outerRadius(outerRadius)\n .innerRadius(innerRadius)\n .startAngle(d => d + Math.PI / 2)\n .endAngle(d => d + tetaGradient + Math.PI / 2)\n )\n .attr('stroke', d => color(Math.abs(d - Math.PI)))\n .attr('stroke-width', 1)\n .attr(\"fill\", d => color(Math.abs(d - Math.PI)));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":968,"value":"outerRadius = width / 15","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":971,"value":"innerRadius = (0.6 * width) / 15","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"updateAngle = {\n var t = 0;\n while (true) {\n t += viewof frequency.value * dT;\n mutable angle = (t * 2 * Math.PI) % (2 * Math.PI);\n yield mutable angle;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2381,"value":"dT = 1 / 55","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1984,"value":"embed = require(\"vega-embed@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1086,"value":"vegalite = require(\"@observablehq/vega-lite@0.3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1258,"value":"Tone = require('tone')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"d3 = require(\"d3@5\", \"d3-array@2\", \"d3-delaunay@^5.1\", \"d3-gridding@0.1.2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 44:"$43:body"