2e:null 2f:["$","title",null,{"children":"Input radiaSlider | Mario Delgado | Observable"}] 34:T2ed3,// Refactored for Observable from https://github.com/maslick/radiaSlider // Search for 'Refactored' in code to find comments/sections refactored // Original version can be loaded to Observable via: // require('@maslick/radiaslider@1.9.3/src/slider-circular.js').catch(() => window["Slider"]) class radiaSlider { constructor(options) { this.sliders = {}; this.scaleWidth = 34; this.fillWidth = 35; this.knobWidth = 35; this.startAngle = 1.5 * Math.PI + 0.000001; this.endAngle = 1.5 * Math.PI - 0.000001; this.continuousMode = options.continuousMode || false; //this.container = document.getElementById(options.canvasId); this.container = options.container; this.the_body = document.body; this.context = radiaSlider.setupHiDpiCanvas(this.container); this.x0 = options.x0 === undefined ? this.container.width / 2 : options.x0; this.y0 = options.y0 === undefined ? this.container.height / 2 : options.y0; this.x0 /= window.devicePixelRatio || 1; this.y0 /= window.devicePixelRatio || 1; this.MouseX = 0; this.MouseY = 0; this.selectedSlider = null; this.currentSlider = null; this.readOnly = options.readOnly || false; if (!this.readOnly) { this.rotationEventListener = this._rotation.bind(this); this.container.addEventListener( "mousedown", this._handleMouseDown.bind(this), false ); this.the_body.addEventListener( "mouseup", this._handleMouseUp.bind(this), false ); this.container.addEventListener( "click", this._handleClick.bind(this), false ); this.container.addEventListener( "touchstart", this._handleTouch.bind(this), false ); this.container.addEventListener( "touchmove", this._handleMove.bind(this), false ); this.container.addEventListener( "touchend", this._handleEnd.bind(this), false ); } } static setupHiDpiCanvas(canvas) { let ctx = canvas.getContext("2d"); let devicePixelRatio = window.devicePixelRatio || 1; let backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1; let ratio = devicePixelRatio / backingStoreRatio; // upscale the canvas if the two ratios don't match if (devicePixelRatio !== backingStoreRatio) { let oldWidth = canvas.width; let oldHeight = canvas.height; canvas.width = oldWidth * ratio; canvas.height = oldHeight * ratio; canvas.style.width = oldWidth + "px"; canvas.style.height = oldHeight + "px"; // now scale the context to counter // the fact that we've manually scaled // our canvas element ctx.scale(ratio, ratio); } return ctx; } // Adds a slider band to the slider addSlider(options) { this.sliders[options.id] = { id: options.id, //container: document.getElementById(options.container), container: options.container, color: options.color || "#104b63", min: options.min || 0, max: options.max || 100, radius: options.radius || 100, startAngle: this.startAngle, endAngle: this.endAngle, onValueChangeCallback: options.changed || function (v) {}, ang_degrees: 0, normalizedValue: options.min || 0, step: options.step || 1 }; const obj = this.sliders[options.id]; this.setSliderValue(obj.id, options.min); } // Sets (draws) slider band value given the band id and value setSliderValue(id, value) { const slider = this.sliders[id]; if (value <= slider.min) { slider.endAngle = this.startAngle; slider.ang_degrees = 0; slider.normalizedValue = 0; } else if (value >= slider.max) { slider.endAngle = this.endAngle; slider.ang_degrees = 360; slider.normalizedValue = slider.max; } else { //value = (value / slider.step >> 0) * slider.step; slider.endAngle = (2 * Math.PI * (value - slider.min)) / (slider.max - slider.min) - Math.PI / 2; slider.ang_degrees = radiaSlider.radToDeg( radiaSlider.normalizeTan(slider.endAngle) ); slider.normalizedValue = value; } this.drawAll(); } // Redraws everything drawAll() { this.context.clearRect(0, 0, this.container.width, this.container.height); let values = {}; for (let key in this.sliders) { // Refactored logic for Observable // Following line was exiting out of for loop and not assigning object values // for sliders that were not being interacted with. 'values' is now a collection // of all values. //if (!this.sliders.hasOwnProperty(key)) continue; const obj = this.sliders[key]; this.drawScale(obj); this.drawData(obj); this.drawArrow(obj); this.drawKnob(obj); // *************************************************************************************** // Refactored logic for Observable: values[key] = { deg: obj.ang_degrees, rad: (obj.ang_degrees * Math.PI) / 180, value: obj.normalizedValue }; obj.onValueChangeCallback(values[key]); // *************************************************************************************** } // *************************************************************************************** // Refactored logic for Observable: // Using design pattern established with: // https://observablehq.com/@observablehq/introduction-to-views // https://observablehq.com/@d3/hello-d3-drag this.context.canvas.value = values; this.context.canvas.dispatchEvent(new CustomEvent("input")); // *************************************************************************************** this.drawCenterDot(); } // Draw the scale for a selected slider band drawScale(slider) { // Scale for (let i = 0; i <= 2 * Math.PI; i += Math.PI / 6) { this.context.beginPath(); this.context.strokeStyle = "#eeeeee"; this.context.arc( this.x0, this.y0, slider.radius, i, i + Math.PI / 4, false ); this.context.lineWidth = this.scaleWidth; this.context.stroke(); } } // Draw dot in the center drawCenterDot() { this.context.beginPath(); this.context.strokeStyle = "#eeeeee"; this.context.arc( this.x0, this.y0, this.scaleWidth / 2, 0, Math.PI * 2, false ); this.context.lineWidth = 1; this.context.fillStyle = "#eeeeee"; this.context.fill(); } // Draw the data on the selected slider band drawData(slider) { this.context.beginPath(); this.context.strokeStyle = slider.color; this.context.arc( this.x0, this.y0, slider.radius, slider.startAngle, slider.endAngle, false ); this.context.lineWidth = this.fillWidth; this.context.stroke(); } // Draw tail arrow drawArrow(slider) { this.context.beginPath(); this.context.moveTo(this.x0, this.y0 - slider.radius + this.scaleWidth / 2); this.context.lineTo( this.x0, this.y0 - this.scaleWidth - slider.radius + this.scaleWidth / 2 ); this.context.lineTo( this.x0 + this.scaleWidth / 4, this.y0 - this.scaleWidth / 2 - slider.radius + this.scaleWidth / 2 ); this.context.fillStyle = "#eeeeee"; this.context.fill(); } // Draw the knob (control element) drawKnob(slider) { // Knob this.context.beginPath(); this.context.strokeStyle = "#eb879c"; this.context.arc( Math.cos(slider.endAngle) * slider.radius + this.x0, Math.sin(slider.endAngle) * slider.radius + this.y0, this.knobWidth / 2, 0, Math.PI * 2, false ); this.context.lineWidth = 1; this.context.fillStyle = "#eb879c"; this.context.fill(); // Dot on the knob this.context.beginPath(); this.context.strokeStyle = "yellow"; this.context.arc( Math.cos(slider.endAngle) * slider.radius + this.x0, Math.sin(slider.endAngle) * slider.radius + this.y0, this.scaleWidth / 10, 0, Math.PI * 2, false ); this.context.lineWidth = 1; this.context.fillStyle = "yellow"; this.context.fill(); } // Calculate angles given the cursor position calculateAngles(x, y) { if (!this.selectedSlider) return; let max = this.selectedSlider.max, min = this.selectedSlider.min, step = this.selectedSlider.step, endAngle = Math.atan2(y - this.y0, x - this.x0), ang_degrees = radiaSlider.radToDeg(radiaSlider.normalizeTan(endAngle)), normalizedValue = (radiaSlider.normalizeTan(endAngle) * (max - min)) / (2 * Math.PI) + min; normalizedValue = ((normalizedValue / step) >> 0) * step; this.selectedSlider.endAngle = endAngle; this.selectedSlider.ang_degrees = ang_degrees; this.selectedSlider.normalizedValue = normalizedValue; } // Helper method static radToDeg(ang) { return (ang * 180) / Math.PI; } // Normalizes tangent static normalizeTan(ang) { return ang + Math.PI / 2 > 0 ? ang + Math.PI / 2 : 2 * Math.PI + ang + Math.PI / 2; } // Calculates cursor coordinates calculateUserCursor(event) { const rect = this.container.getBoundingClientRect(); if (event.touches) { this.MouseX = event.touches[0].clientX - rect.left; this.MouseY = event.touches[0].clientY - rect.top; } else { this.MouseX = event.clientX - rect.left; this.MouseY = event.clientY - rect.top; } } // Returns a slider band based on the cursor position getSelectedSlider(event) { this.calculateUserCursor(event); const hip = Math.sqrt( Math.pow(this.MouseX - this.x0, 2) + Math.pow(this.MouseY - this.y0, 2) ); let selectedSlider; for (let key in this.sliders) { if (!this.sliders.hasOwnProperty(key)) continue; const obj = this.sliders[key]; if (Math.abs(hip - obj.radius) <= this.scaleWidth / 2) { selectedSlider = obj; break; } } return selectedSlider ? selectedSlider : null; } // Event handlers (mousedown, mouseup, mousemove, mouseclick, touches) _handleMouseDown(event) { event.preventDefault(); this.selectedSlider = this.getSelectedSlider(event); if (!this.selectedSlider) return; this.the_body.addEventListener( "mousemove", this.rotationEventListener, false ); } _handleMouseUp(event) { event.preventDefault(); this.the_body.removeEventListener( "mousemove", this.rotationEventListener, false ); this.currentSlider = this.selectedSlider; } _handleClick(event) { this.selectedSlider = this.getSelectedSlider(event); if ( this.currentSlider && this.getSelectedSlider(event) && this.currentSlider.id !== this.getSelectedSlider(event).id ) return; if (this.selectedSlider) this._rotation(event); } _handleTouch(event) { event.preventDefault(); this.selectedSlider = this.getSelectedSlider(event); if (this.selectedSlider) this._rotation(event); } _handleMove(event) { event.preventDefault(); if (this.continuousMode) this._rotation(event); else if (this.selectedSlider) this._rotation(event); } _handleEnd(event) { event.preventDefault(); this.the_body.removeEventListener( "mousemove", this.rotationEventListener, false ); } // Rotation wrapper _rotation(event) { this.calculateUserCursor(event); if (this.continuousMode) this.selectedSlider = this.getSelectedSlider(event); this.calculateAngles(this.MouseX, this.MouseY); this.drawAll(); } }35:T730,viewof chartSin = { // https://vega.github.io/vega-lite/examples/sequence_line_fold.html // https://vega.github.io/editor/#/examples/vega-lite/sequence_line_fold // 'key' and 'value': https://vega.github.io/vega/docs/transforms/fold/ // axis values: https://vega.github.io/vega-lite/docs/axis.html#ticks const fieldX = vl.x().fieldQ("x"); // Via sequence const fieldY = vl.y().fieldQ("sin(θ)"); // Via fold transform const radiaDegSin = Math.round(theta.slider1.deg); const sinDeg = Math.round(Math.sin(radiaDegSin * Math.PI / 180) * 100) / 100; // const opacityXsin = vl.opacity({"condition":{"test": `datum['x'] == ${radiaDegSin}`,"value": 0.8},"value": 0 }); // const opacityXsin = vl.opacity().condition({"test": `datum['x'] == ${radiaDegSin}`, "value": 0.8}).value(0); const opacityXsin = vl.opacity().if(`datum['x'] == ${radiaDegSin}`, vl.value(0.8)).value(0); const opacityYsin = vl.opacity().if(`datum['sin(θ)'] == ${sinDeg}`, vl.value(0.8)).value(0); const ruleXSin = vl.markRule({color: "grey"}).encode(fieldX,opacityXsin); const ruleYSin = vl.markRule({color: "grey"}) .data(sequence) .transform(sinTransform) .encode(fieldY,opacityYsin); const slider = theta.slider1; const chartTitle = `theta.slider1 has deg: ${slider.deg.toFixed(2)}, rad: ${slider.rad.toFixed(2)} and value: ${slider.value}`; const chart = vl.markLine({color:"blue"}) .title(chartTitle) .transform(sinTransform) .width(width *.5) .encode( // https://vega.github.io/vega-lite/docs/axis.html#ticks fieldX.title(`θ (${ xAxis })`).axis({values:Object.keys(degToRad), labelExpr: labelExprStr}), fieldY.title("sin(θ)"), ); return vl.layer(chart, ruleXSin, ruleYSin ) .data(sequence) .render(); }36:Tc4c,viewof chartSinCos = { // https://vega.github.io/vega-lite/examples/sequence_line_fold.html // https://vega.github.io/editor/#/examples/vega-lite/sequence_line_fold // 'key' and 'value': https://vega.github.io/vega/docs/transforms/fold/ // axis values: https://vega.github.io/vega-lite/docs/axis.html#ticks const cosTransform = vl.calculate("round(cos(datum.x * PI / 180) * 100) / 100").as("cos(θ)"); const foldTransform = vl.fold(["sin(θ)", "cos(θ)"]); const fieldX = vl.x().fieldQ("x"); // Via sequence const fieldY = vl.y().fieldQ("value"); // Via fold transform const radiaDegSin = Math.round(thetas.sin.deg); const radiaDegCos = Math.round(thetas.cos.deg); const radiaRadSin = thetas.sin.rad.toFixed(2); const radiaRadCos = thetas.cos.rad.toFixed(2); const sinDeg = Math.round(Math.sin(radiaDegSin * Math.PI / 180) * 100) / 100; const cosDeg = Math.round(Math.cos(radiaDegCos * Math.PI / 180) * 100) / 100; // const opacityXsin = vl.opacity({"condition":{"test": `datum['x'] == ${radiaDegSin}`,"value": 0.8},"value": 0 }); // const opacityXsin = vl.opacity().condition({"test": `datum['x'] == ${radiaDegSin}`, "value": 0.8}).value(0); const opacityXsin = vl.opacity().if(`datum['x'] == ${radiaDegSin}`, vl.value(0.8)).value(0); const opacityXcos = vl.opacity().if(`datum['x'] == ${radiaDegCos}`, vl.value(0.8)).value(0); const opacityYsin = vl.opacity().if(`datum['value'] == ${sinDeg}`, vl.value(0.8)).value(0); const opacityYcos = vl.opacity().if(`datum['value'] == ${cosDeg}`, vl.value(0.8)).value(0); const opacityPointSin = vl.opacity().if(vl.and(`datum['x'] == ${radiaDegSin}`,`datum['value'] == ${sinDeg}`), vl.value(0.8)) .value(0); const opacityPointCos = vl.opacity().if(vl.and(`datum['x'] == ${radiaDegCos}`,`datum['value'] == ${cosDeg}`), vl.value(0.8)) .value(0); const pointSin = vl.markCircle({color:"black",size:100}) .data(sequence) .transform([sinTransform,cosTransform,foldTransform]) .encode(fieldX,fieldY,opacityPointSin); const pointCos = vl.markCircle({color:"black",size:100}) .data(sequence) .transform([sinTransform,cosTransform,foldTransform]) .encode(fieldX,fieldY,opacityPointCos); const chartTitle = xAxis == "deg" ? `thetas.sin.deg: ${radiaDegSin}, thetas.cos.deg: ${radiaDegCos}` : `thetas.sin.rad: ${radiaRadSin}, thetas.cos.rad: ${radiaRadCos}` const chart = vl.markLine() .title(chartTitle) .transform([sinTransform,cosTransform,foldTransform]) .width(width *.5) .encode( // https://vega.github.io/vega-lite/docs/axis.html#ticks fieldX.title(`θ (${ xAxis })`).axis({values:Object.keys(degToRad), labelExpr: labelExprStr}), fieldY.title("f(θ)"), // key: via fold transform vl.color().fieldN('key').title("f(θ)").scale({domain:["cos(θ)","sin(θ)"] ,range: ["red","blue"]}) ); return vl.layer(chart, pointSin, pointCos ) .data(sequence) .render(); }37:[] 32:{"id":"aebf0d185d10f8ed","slug":"input-radiaslider","title":"Input radiaSlider","thumbnail":"66cc725a3599c749d0f0ba4a7b80a43294fe264f01c76f97380ca380a2f68e09","access_level":"public","create_time":"$D2021-01-13T20:22:33.732Z","update_time":"$D2026-09-01T17:26:06.472Z","view_time":null,"first_public_time":"$D2021-01-16T01:25:02.015Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f57b9f8a19d28778","login":"mariodelgadosr","name":"Mario Delgado ","avatar_url":"https://avatars-next.observableusercontent.com/2d2982ad09c4ca9dfd6570810ae00301e0db6ef798c4f7025ea03d4325d4807d","tier":"starter_2024"},"version":852,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d3988d482a8ec0f","login":"mariodelgadosr","name":"Mario Delgado ","avatar_url":"https://avatars-next.observableusercontent.com/2d2982ad09c4ca9dfd6570810ae00301e0db6ef798c4f7025ea03d4325d4807d","tier":null}],"members":[{"type":"individual","id":"1d3988d482a8ec0f","login":"mariodelgadosr","name":"Mario Delgado ","avatar_url":"https://avatars-next.observableusercontent.com/2d2982ad09c4ca9dfd6570810ae00301e0db6ef798c4f7025ea03d4325d4807d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"771d223c41236306","slug":"vega-lite-techniques","title":"Vega-Lite Techniques","owner":{"id":"f57b9f8a19d28778","login":"mariodelgadosr","name":"Mario Delgado "}},"type":"notebook","body":{"title":"Input radiaSlider","cells":[{"id":0,"value":"md`# Input [radiaSlider](https://github.com/maslick/radiaSlider)\n[Pavel Maslov](https://github.com/maslick/) circular [radial slider](https://github.com/maslick/radiaSlider) refactored as a [view](https://observablehq.com/@observablehq/introduction-to-views) for Observable.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"viewof sampleRadiaSlider = {\n const context = DOM.context2d(200, 200);\n const canvas = context.canvas;\n\n const slider = new radiaSlider({\n container: canvas,\n continuousMode: true,\n x0: 75,\n y0: 100,\n readOnly: false\n });\n slider.addSlider({\n id: \"slider1\",\n radius: 50,\n min: 0,\n max: 100,\n step: 1,\n color: \"blue\"\n });\n slider.setSliderValue(\"slider1\", 40);\n\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"viewof sliderProps = radio({\n title: \"An individual circular slider has three properties:\",\n options: [\n { label: 'Value (value)', value: 'value'},\n { label: 'Degree (deg)', value: 'deg' },\n { label: 'Radian (rad)', value: 'rad' }\n ],\n value: 'value'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":" md`#### sampleRadiaSlider.slider1.***${sliderProps}***: ${display(sampleRadiaSlider.slider1[sliderProps])}` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"md`## Class radiaSlider` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"md`## Import Syntax\n~~~js\nimport {radiaSlider} from \"@mariodelgadosr/input-radiaslider\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"md `Here's an example using the ***deg*** property of ***slider1*** in the ***theta*** radiaSlider to drive a ${tb`[Vega-lite](https://observablehq.com/@uwdata/introduction-to-vega-lite)`} line chart for the sine function:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"viewof xAxis = radio({\n description: \"Degrees or Radians for line charts' x axis\",\n options: [\n { label: 'Degrees', value: 'deg' },\n { label: 'Radians', value: 'rad' }\n ],\n value: 'deg'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"html`\n

${viewof theta}

${viewof chartSin}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"md `A radiaSlider can have multiple sliders. \n\nThis example adds ***sin*** and ***cos*** sliders to the ***thetas*** radiaSlider:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"html`\n

${viewof thetas}

${viewof chartSinCos}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":755,"value":"md`Instead of using the ${tb`[view](https://observablehq.com/@observablehq/introduction-to-views)`} design pattern, radiaSlider can be used with the ${tb`[mutable](https://observablehq.com/@observablehq/introduction-to-mutable-state)`} design pattern. \n\nIn that scenario the ***changed*** property for an individual slider is assigned to an event handler that updates a mutable cell. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"sampleRadiaSlider2 = { \n const context = DOM.context2d(200, 200);\n const canvas = context.canvas;\n \n const slider = new radiaSlider({ container: canvas, continuousMode: true, x0: 100, y0: 100, readOnly: false });\n slider.addSlider({\n id: \"sampleRadiaSlider2\",\n radius: 50,\n min: 0,\n max: 100,\n step: 1,\n color: \"green\",\n changed: v => mutable mutableCell = v \n });\n \n return html`

An example of radiaSlider updating a ${tb`[mutable](https://observablehq.com/@observablehq/introduction-to-mutable-state)`} ${tb`[cell](https://observablehq.com/@observablehq/introduction-to-notebooks)`}:

\n ${canvas}`;\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"mutable mutableCell = 0;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"md`## Views Embedded in ${tb`[CSS Grid Container](https://www.w3schools.com/css/css_grid_container.asp)`}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"md`🢇 Click cell to expand code for ***theta***` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"viewof theta = { \n \n \n const context = DOM.context2d(300, 300);\n const canvas = context.canvas;\n \n const slider = new radiaSlider({ container: canvas, continuousMode: true, x0: 150, y0: 175, readOnly: false });\n slider.addSlider({\n id: \"slider1\",\n radius: 50,\n min: 0,\n max: 100,\n step: 5,\n color: \"blue\"\n });\n slider.setSliderValue(\"slider1\", 45 * 100 / 360);\n \n return canvas;\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"md`🢇 Click cell to expand code for ***chartSin***` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"md`🢇 Click cell to expand code for ***thetas***` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"viewof thetas = { \n \n //const sliderCanvas = html`

`;\n \n const context = DOM.context2d(300, 300);\n const canvas = context.canvas;\n \n const slider = new radiaSlider({ container: canvas, continuousMode: true, x0: 150, y0: 175, readOnly: false });\n slider.addSlider({\n id: \"sin\",\n radius: 50,\n min: 0,\n max: 30,\n step: 5,\n color: \"blue\",\n });\n slider.addSlider({\n id: \"cos\",\n radius: 100,\n min: 0,\n max: 100,\n step: 5,\n color: \"red\",\n }); \n slider.setSliderValue(\"sin\", 7.5);\n slider.setSliderValue(\"cos\", 50);\n \n return canvas;\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"md`🢇 Click cell to expand code for ***chartSinCos***` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"md`## Common objects`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"display = (v) => sliderProps == \"value\" ? v : v.toFixed(2);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"\n// sequence: https://vega.github.io/vega/docs/transforms/sequence/\nsequence = vl.sequence(0,361,1).as(\"x\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"// https://vega.github.io/vega/docs/expressions/\nsinTransform = vl.calculate(\"round(sin(datum.x * PI / 180) * 100) / 100\").as(\"sin(θ)\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":821,"value":"degToRad = ({0: '0', 90: 'π/2', 180: 'π', 270: '3π/2', 360: '2π/'});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"// https://vega.github.io/vega-lite/docs/axis.html#ticks \nlabelExprStr = \n xAxis == \"deg\" ? `datum.label` \n : Object.entries(degToRad)\n .map(e => ` datum.value == ${e[0]} ? \"${e[1]}\"`).join(\" :\") + ': \"\" '; ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"md`## Appendix\n\n* ${tb`[Introduction to Views](https://observablehq.com/@observablehq/introduction-to-views)`}\n* ${tb`[Drag (Canvas View)](https://observablehq.com/@d3/hello-d3-drag)`} \n* ${tb`[Multi-Value Inputs](https://observablehq.com/@mbostock/multi-value-inputs)`}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"md `## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"import {tb} from \"@mariodelgadosr/target-blank\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"import {radio} from \"@jashkenas/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"