25:["$","title",null,{"children":"Product of Two Random Variables | ChoCho | Observable"}] 49:T406d,intersection = { // SET UP ------------------------------------ const aspect = .8//0.5625 let width = Math.min(window.innerWidth,800) let height = width * aspect const scene = new THREE.Scene() const pi = Math.PI const color = [0x1EDE89, 0x9022DD, 0x4792d4 ] let res = 51 // number of nodes in x and y direction for 3D mesh let yPosition = 3 // move elements up and down let alpha, beta, mean, gamma, para, c let surfaceList = [] let paraList = { X: {g:2, u:.5}, Y: {g:2, u:.5} } // camera const camera = new THREE.PerspectiveCamera(25, width/height, 1, 1000) // field of view, aspect ratio, near, far plane camera.position.set( 45, 20, 45 ) camera.lookAt( 0, -10, 0 ) // renderer const renderer = new THREE.WebGLRenderer({antialias: true}) // most powerful all purpose renderer, with smooth edges renderer.setClearColor("#ffffff") // background color "#f6f6f6" renderer.setSize(width, height) // set window size yield renderer.domElement // camera controls const controls = new THREE.OrbitControls(camera, renderer.domElement); // allows mouse to move camera controls.enableZoom = false // disables zoom controls.enablePan = false // disables pan controls.enableRotate = true // determines if camera can rotate // MATERIALS --------------------------------- const material = new THREE.MeshLambertMaterial({color: 'lightblue', transparent: true, opacity:.25, depthWrite:true}) const matHyperbola = new THREE.MeshLambertMaterial({color: 'lightblue', transparent: false, opacity:0}) const matPlane = new THREE.MeshLambertMaterial({color: 0x000000, transparent: true, opacity: 0, side: THREE.DoubleSide, depthWrite:false}) const matArea = new THREE.MeshLambertMaterial({color: 0x000000, emissive: 0xFF0000, transparent: true, opacity: .3, side: THREE.DoubleSide, depthWrite:false}) const matDot = new THREE.MeshLambertMaterial({color: 0x000000, transparent: true, opacity:.8, depthWrite:false}) const matLine = new THREE.LineBasicMaterial({ color: 0x000000, transparent: true, depthWrite:false }); // SHAPE ------------------------------------ // interaction planes const xGeo = new THREE.PlaneGeometry( 20, 20 ); const xPlane = new THREE.Mesh( xGeo, matPlane.clone() ); xPlane.position.set(-15,yPosition,0); xPlane.rotation.set(0,pi/2,0); const yGeo = new THREE.PlaneGeometry( 20, 20 ); const yPlane = new THREE.Mesh( yGeo, matPlane.clone() ); yPlane.position.set(0,yPosition,-15); yPlane.rotation.set(0,0,0); const xyGeo = new THREE.PlaneGeometry( 20, 20 ); const xyPlane = new THREE.Mesh( xyGeo, matPlane.clone() ); xyPlane.position.set(0,yPosition-10,0); xyPlane.rotation.set(-pi/2,0,0); const baseGeo = new THREE.PlaneGeometry( 20, 20 ); const base = new THREE.Mesh( baseGeo, material ); base.position.set(0,yPosition-10,0); base.rotation.set(pi/2,0,0); scene.add(base) // cursor const pickable = new THREE.Group(); scene.add(pickable); pickable.add(xPlane, yPlane, xyPlane); // dot handles const xDotGeo = new THREE.SphereGeometry( .5, 32, 16 ); const xDot = new THREE.Mesh( xDotGeo, matDot.clone() ); xDot.material.emissive.setHex(color[0]) xDot.material.opacity = 1 xDot.position.copy( xPlane.position ) scene.add( xDot ); const yDotGeo = new THREE.SphereGeometry( .5, 32, 16 ); const yDot = new THREE.Mesh( yDotGeo, matDot.clone() ); yDot.material.emissive.setHex(color[1]) yDot.material.opacity = 1 yDot.position.copy( yPlane.position ) scene.add( yDot ); const xyDotGeo = new THREE.SphereGeometry( .5, 32, 16 ); const xyDot = new THREE.Mesh( xyDotGeo, matDot.clone() ); xyDot.material.emissive.setHex(color[2]) xyDot.material.opacity = 0 xyDot.position.copy( xyPlane.position ) scene.add( xyDot ); // plane lines const xLineGeo = new THREE.Geometry(); const yLineGeo = new THREE.Geometry(); for (let i = 0; i < 100; i++){ xLineGeo.vertices.push( new THREE.Vector3( (gauss[100][i][0]+1)/2 , 0, 0)); yLineGeo.vertices.push( new THREE.Vector3( (gauss[100][i][0]+1)/2 , 0, 0)); } let x, y, z, parameters function updateBetaLine(mesh, mean, gamma) { mean = Math.max(.02, Math.min(.98, mean)) gamma = Math.max(.05, gamma) para = map(mean, gamma) const count = mesh.geometry.vertices.length; for (let i = 0; i < count; i++) { x = mesh.geometry.vertices[i].x mesh.geometry.vertices[i].y = betaPDF(x, para[0], para[1], para[2])/4 } mesh.geometry.verticesNeedUpdate = true; } const xLine = new THREE.Line(xLineGeo, matLine.clone() ); xLine.material.color.setHex(color[0]) xLine.scale.set(20,20,20) xLine.position.set(-10,-10,.03); xPlane.add( xLine ); updateBetaLine(xLine,.5,2) const yLine = new THREE.Line(yLineGeo, matLine.clone() ); yLine.material.color.setHex(color[1]) yLine.scale.set(20,20,20) yLine.position.set(-10,-10,.03); yPlane.add( yLine ); updateBetaLine(yLine,.5,2) // joint probability surface let p1, p2 function updateJoint(mesh, mean1, gamma1, mean2, gamma2) { mean1 = Math.max(.02, Math.min(.98, mean1)) gamma1 = Math.max(.05, gamma1) mean2 = Math.max(.02, Math.min(.98, mean2)) gamma2 = Math.max(.05, gamma2) p1 = map(mean1, gamma1) p2 = map(mean2, gamma2) for( let i=0; icenterPoint[0] && ((j+1)/res)>centerPoint[1] // circular vs radial if(diagonal){ surfaceGeo.faces.push( new THREE.Face3( i+j*res, i+1+j*res, i+(j+1)*res ), new THREE.Face3( i+1+j*res, i+1+(j+1)*res, i+(j+1)*res ) )}else{ surfaceGeo.faces.push( new THREE.Face3( i+j*res, i+1+j*res, i+1+(j+1)*res), new THREE.Face3( i+j*res, i+1+(j+1)*res, i+(j+1)*res ) )} }} surfaceGeo.computeFaceNormals() let surfaceMesh = new THREE.Mesh(surfaceGeo,material) surfaceMesh.scale.set(20,20,20) surfaceMesh.position.set(-10,yPosition-10,-10); surfaceList.push(surfaceMesh) scene.add(surfaceMesh) // mesh lines const edgeGeo = new THREE.Geometry(); edgeGeo.vertices.push( new THREE.Vector3( (gauss[res][0][0]+1)/2, 0, (gauss[res][0][0]+1)/2)); for(let i=1; i { const areaGeo = new THREE.Geometry(); for(let i=0; i { for(let i=0; i { let n = line1.geometry.vertices.length let charge if( c>0 ){charge = 1}else{charge = -1} if( c == 0 ){ for( let i=0; i { event.preventDefault(); console.log(event) xm=event.layerX ym=event.layerY mouse.x = ( xm / width ) * 2 - 1, mouse.y = -( ym / height ) * 2 + 1 }; ////////////////////////////////////////////////////////////////////////////////////////////// // RENDER LOOP /////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////// let intersects let t=0 let mousedown = false let rotate = false let select = null let selectPoint const render = function(){ requestAnimationFrame(render) // adjust scale on resize and stops animation when window is closed to save memory // mouse actions raycaster.setFromCamera( mouse, camera ); //raycaster runs each animation frame intersects = raycaster.intersectObjects(pickable.children); // checks intersection if(mousedown == false){ surfaceMesh.material.transparent = false surfaceMesh.material.depthWrite = true hyperbola1.material.opacity = 0 hyperbola2.material.opacity = 0 h1Area.material.transparent = true h2Area.material.transparent = true h1Area.material.depthWrite = false h2Area.material.depthWrite = false xyDot.material.opacity = 0 } if( intersects.length > 0 ) { // move handle dots on click if(intersects.some(e => e.object === xPlane) && select == xPlane && mousedown){ selectPoint = intersects[ intersects.findIndex((e) => e.object === xPlane) ] xDot.position.copy( selectPoint.point ) paraList.X.u = selectPoint.point.z/-20+.5 paraList.X.g = (selectPoint.point.y-yPosition)/5+2 updateBetaLine(xLine, paraList.X.u, paraList.X.g ) updateJoint(surfaceList, paraList.Y.u, paraList.Y.g, 1-paraList.X.u, paraList.X.g) updateArea(xLine, xArea) updateArea(edgeLine, edgeArea) mutable parameters = [paraList.X.u, paraList.X.g, paraList.Y.u, paraList.Y.g] }else if(intersects.some(e => e.object === yPlane) && select == yPlane && mousedown){ selectPoint = intersects[ intersects.findIndex((e) => e.object === yPlane) ] yDot.position.copy( selectPoint.point ) paraList.Y.u = selectPoint.point.x/20+.5 paraList.Y.g = (selectPoint.point.y-yPosition)/5+2 updateBetaLine(yLine, paraList.Y.u, paraList.Y.g ) updateJoint(surfaceList, paraList.Y.u, paraList.Y.g, 1-paraList.X.u, paraList.X.g) updateArea(yLine, yArea) updateArea(edgeLine, edgeArea) mutable parameters = [paraList.X.u, paraList.X.g, paraList.Y.u, paraList.Y.g] }else if(intersects.some(e => e.object === xyPlane) && select == xyPlane && mousedown){ selectPoint = intersects[ intersects.findIndex((e) => e.object === xyPlane) ] xyDot.position.copy( selectPoint.point ) c = selectPoint.point.x * selectPoint.point.z / 100 updateHyperbola(c, hyperbola1, hyperbola2) updateJoint(surfaceList, paraList.Y.u, paraList.Y.g, 1-paraList.X.u, paraList.X.g) updateArea(hyperbola1, h1Area) updateArea(hyperbola2, h2Area) hyperbola1.material.opacity = 1 hyperbola2.material.opacity = 1 h1Area.material.transparent = false h2Area.material.transparent = false h1Area.material.depthWrite = true h2Area.material.depthWrite = true xyDot.material.opacity = .8 surfaceMesh.material.transparent = true surfaceMesh.material.depthWrite = false }else{ selectPoint = intersects[0] } } //lock camera when point drag if(select == null){ controls.enableRotate = true }else{ controls.enableRotate = false } controls.update() renderer.render(scene, camera) // renders scene } // Input ------------------------- window.addEventListener('pointerdown', () => { if(select == null){ select = intersects[0].object } mousedown = true }) window.addEventListener('pointerup', () => { select = null mousedown = false }) render(); }4a:Td88,productGraph = { const w = Math.min(window.innerWidth,800) const h = w/5; const padding = {x0:0, x1:0, y0:20, y1:0}; const spacing = 20 const color = ['#1EDE89', '#9022DD', '#27B2E4' ] let domain = [ -1, 1] let mapX = map(parameters[0],parameters[1]) let mapY = map(parameters[2],parameters[3]) let X = new Dichotomy(mapX[0], mapX[1]); let Y = new Dichotomy(mapY[0], mapY[1]); let XY = intersect(X, Y) let t let plot = (U) =>{ let points = [] points.push([-1,0]) let step = (w-padding.x0-padding.x1) for(let i=0; i scaleX(d[0])) .y((d) => yScale(d[1])) let lineY = d3 .line() .x((d) => scaleY(d[0])) .y((d) => yScale(d[1])) let lineXY = d3 .line() .x((d) => scaleXY(d[0])) .y((d) => yScaleXY(d[1])) let lineList = [lineX, lineY, lineXY] // plot function const pathX = svg .append('path') .datum(data[0]) .attr('d', lineX) .attr('stroke-linejoin','round') .attr('stroke', color[0]) .attr("fill", color[0]) .attr("fill-opacity", .25); const pathY = svg .append('path') .datum(data[1]) .attr('d', lineY) .attr('stroke-linejoin','round') .attr('stroke', color[1]) .attr("fill", color[1]) .attr("fill-opacity", .25); const pathXY = svg .append('path') .datum(data[2]) .attr('d', lineXY) .attr('stroke-linejoin','round') .attr('stroke', color[2]) .attr("fill", color[2]) .attr("fill-opacity", .25); let label = svg .selectAll("g") .data( [{text:'X', x:w*1/6, y:20},{text:'Y', x:w*3/6, y:20},{text:'X⋅Y', x:w*5/6, y:20}] ) .enter() .append('text') .attr("x", (d,i) => d.x ) .attr("y", (d,i) => d.y ) .text((d,i) => d.text ) .attr("text-anchor", 'middle') .attr("font-family", "Arial") .attr("font-weight",700) .attr('fill', (d,i) => 'black') .attr("stroke", 'none'); // axes numbers let axisX = d3.axisBottom(scaleX).ticks(5); svg.append("g") .attr("transform", `translate(0,${h - padding.y0})`) .call(axisX) .call(g => g.select(".domain").remove()); //removes line let axisY = d3.axisBottom(scaleY).ticks(5); svg.append("g") .attr("transform", `translate(0,${h - padding.y0})`) .call(axisY) .call(g => g.select(".domain").remove()); //removes line let axisXY = d3.axisBottom(scaleXY).ticks(5); svg.append("g") .attr("transform", `translate(0,${h - padding.y0})`) .call(axisXY) .call(g => g.select(".domain").remove()); //removes line // print return svg.node(); }4b:T983,function intersect( X, Y ){ let skipOut = 2 let skipIn = 2 let productList = [] let sum for(let i=0; i { if(x <= this.support[0] || this.support[1] <= x){ return 0 }else{ if( x <= 0){ pointList = pointsL weights = weightsL }else{ pointList = pointsR weights = weightsR } let numerator = 0 let denominator = 0 for( let i=0; i${tex`f_X(x) = \dfrac{1}{2 B(\alpha, \beta)} \left(\dfrac{x+1}{2} \right)^{\alpha - 1} \left(\dfrac{1-x}{2} \right)^{\beta - 1} `} , for ${tex`-1${tex`f_{X,Y}(x,y) = f_{X}(x) \cdot f_{Y}(y)`} , for ${tex`-1${tex` \nabla L(x,y) = \dfrac{\partial (x \cdot y)}{\partial x} \hat{\textbf{\i}} + \dfrac{\partial (x \cdot y)}{\partial y} \hat{\textbf{\j}} = y \hat{\textbf{\i}} + x \hat{\textbf{\j}} `} We only care about the magnitude of the gradient in the normal direction, because that is the rate of change perpendicular to the path integral, which can be easily calculated with the Pythagorean theorem: >${tex` ||\nabla L(x,y)|| = \sqrt{y^2 + x^2} `} The magnitude of the gradient is inversely proportional to the rate the hyperbolic path changes: when the gradient is large, the hyperbolic path sweeps out less area, and when the gradient is small, the hyperbolic path sweeps out more area. Since the joint distribution is a hyperbolic paraboloid, there is a saddle point at (0,0) where the gradient is zero. Since to find the rate of change of the hyperbolic path is the inverse gradient, this creates a point discontinuity at (0,0), since we cannot divide by zero. The integral of the joint distribution over the hyperbolic path ${tex`L`} when normalized by dividing by the gradient is: >${tex` f_{X \cdot Y}(c) \space\space = \displaystyle \int_{L} \dfrac{f_{X,Y}(s)}{||\nabla L(s)||} ds \space\space`} 4e:T78e,Now the problem is how to compute this integral. The arclength of the hyperbola segment is elliptic, and does not have an analytic solution. >${tex`s(x) = \displaystyle \int_{|c|}^{1} \sqrt{1+c^2 x^{-4} } \space dx`} This problem must be solved with quadrature. Check out my [Gaussian Quadrature][1] notebook if you are unfamiliar with the concept. Gaussian quadrature is extremely powerful, but setting it up is complex. First, let's set up a function that calculates the arclength of a hyperbolic segment, so it can be used as a standard to check the accuracy of more complex calculations. We can control three variables when setting up the arc length quadrature: 1. number of intervals 2. placement of interval bounds 3. number of samples per bound Given a set number of sample points, Gaussian quadrature is generally more precise over a single interval than multiple intervals, because a single interval approximates a higher derivative Taylor series. The exception is when there is massively different curvature within the interval, which causes Runge's phenomena: oscillating error of the polynomial approximation near the bounds. Since as c approaches 0, the hyperbola corner gets sharper and sharper, we can minimize Runge's phenomena by breaking quadrature into two intervals, and placing a bound on ${tex`(\sqrt{c}, \sqrt{c})`}, the sharpest part of the corner: ${tex` s(c,n) \approx \dfrac{\sqrt{c}-c}{2} \displaystyle\sum_{i=1}^{n} w_i \sqrt{1+c^2 \left( c+(x_i+1) \dfrac{\sqrt{c}-c}{2}\right) ^{-4}} \space\space + \space\space \dfrac{1-\sqrt{c}}{2} \displaystyle\sum_{i=1}^{n} w_i \sqrt{1+c^2 \left( \sqrt{c}+(x_i+1) \dfrac{1-\sqrt{c}}{2}\right) ^{-4}}`} This is implemented as the arcLength( c, n ) function, where c is the product constant and n is the number of Gaussian nodes per each interval: [1]:https://observablehq.com/@laotzunami/numeric-integration-quadrature4f:T4e7,// rectangular hyperbola arclength in region [[-1,1] , [-1,1]] of hyperbola y=c/x // c is the product constant, and n is the number of gaussian nodes for each gaussian quadratures function arcLength(c, n){ c = Math.abs(c) if(c==1) {return 0} else if(c==0){return 2} else{// divides by point of maximum curvature, then uses 50-point gaussian quadrature for each segment let arcArgument = (x,a) =>{ return Math.sqrt(1 + ( a * x**(-2) )**2 ) // function to be integrated } //integrates right half over interval [ c , sqrt(c) ] let sum = 0 let interval = Math.sqrt(c) - c for(let i=0; i { // hyperbola if(c==0){return [ [[-1,0],[1,0]], [[0,-1],[0,1]] ]} let list = [[], []] for(let i=0; i<201; i++){ t = (1-Math.abs(c))*i/200-1 list[0].push( [t, c/t ] ) list[1].push( [-t, -c/t ] ) } return list } let s = () => { let points = [] for(let i=0; i<401; i++){ points.push([i/200-1 , arcLength(i/200-1, n)]) } return points } let hLine = d3 .line() .x((d) => xScale(d[0])) .y((d) => yScale(d[1])) const hyperbola = svg .selectAll("curve") .data([{id:1},{id:2}]) .enter() .append('path') .datum( (d,i) => f(.25)[i]) .attr('d', hLine) .attr('fill', 'none') .attr('stroke', colorScale(.25)); let sLine = d3 .line() .x((d) => xScale(d[0])+h) .y((d) => yScale2(d[1])) const aprox = svg .append('path') .datum( [ [-1,0] , [0,2] , [1,0] ] ) .attr('d', sLine) .attr('fill', 'none') .attr('stroke', '#DDDDDD') .style("stroke-dasharray", ("15, 15")); const length = svg .append('path') .datum( s()) .attr('d', sLine) .attr('fill', 'none') .attr('stroke', 'black'); const rectified = svg .append('path') .datum( [[.25,0], [.25, arcLength(.25, n)]] ) .attr('d', sLine) .attr('fill', 'none') .attr('stroke', colorScale(.25)); // axes let xAxis1 = d3.axisBottom(xScale).ticks(2); svg.append("g").attr("transform", `translate(0,${h - padding})`).call(xAxis1); let yAxis1 = d3.axisLeft(yScale).ticks(2); svg.append("g").attr("transform", `translate(${padding}, 0)`).call(yAxis1); let xAxis2 = d3.axisBottom(xScale).ticks(2); svg.append("g").attr("transform", `translate(${h},${h - padding})`).call(xAxis2); let yAxis2 = d3.axisLeft(yScale2).ticks(2); svg.append("g").attr("transform", `translate(${padding+h}, 0)`).call(yAxis2); // coordinate product var text = svg .append("g") .attr("cursor", "move") .attr("pointer-events", "none") .append('text') .text(0.25) .attr('x', xScale(.5) ) .attr('y', yScale(.5) ) .style("text-anchor", "middle") .attr("font-family","calibri") .attr("font-weight","bold") .attr("font-size","12pt") .attr("fill", colorScale(.25)) .attr("stroke", 'white') .attr("stroke-width", 5) .attr("paint-order", "stroke"); // make outline first, fill over it //labels svg.append("text") .attr("x", h/2 ) .attr("y", 10 ) .attr("text-anchor", "middle") .style("font-size", "14px") .attr("font-family", "Arial") .attr("font-weight",700) .text("Product Hyperbola"); svg.append("text") .attr("x", h*3/2 ) .attr("y", 10 ) .attr("text-anchor", "middle") .style("font-size", "14px") .attr("font-family", "Arial") .attr("font-weight",700) .text(" Segment arcLength( c, "+n+" )"); // mouse interaction let rect1 = svg .append('rect') .attr('x', 0) .attr('y', 0) .attr('width', h) .attr('height', h) .attr("opacity",0); let x,y rect1 .on('mousemove', function(event) { x = Math.min(xScale(1), Math.max(xScale(-1), d3.pointer(event)[0] )) y = Math.min(h-padding, Math.max(padding, d3.pointer(event)[1]-8 )) text .attr('x', x) .attr('y', y +4) .text( (Math.round( xInverse(x) * yInverse(y) * 100) / 100 ).toFixed(2) ) .attr("fill", colorScale( xInverse(x) * yInverse(y) )) hyperbola .datum( (d,i) => f(xInverse(x) * yInverse(y))[i] ) .attr('d', hLine) .attr('stroke', colorScale( xInverse(x) * yInverse(y) )) rectified .datum( [[xInverse(x) * yInverse(y),0], [xInverse(x) * yInverse(y),arcLength(xInverse(x) * yInverse(y), n)]] ) .attr('d', sLine) .attr('stroke', colorScale( xInverse(x) * yInverse(y) )) }) .on('mouseleave', function(event) { text .attr('x', xScale(.5) ) .attr('y', yScale(.5) ) .attr("fill", colorScale( .25 )) .text(0.25) hyperbola .datum( (d,i) => f(.25)[i] ) .attr('d', hLine) .attr('stroke', colorScale(.25)) rectified .datum( [[.25,0], [.25,arcLength(.25, n)]] ) .attr('d', sLine) .attr('stroke', colorScale( .25 )) }) let rect2 = svg .append('rect') .attr('x', h) .attr('y', 0) .attr('width', h) .attr('height', h) .attr("opacity",0); rect2 .on('mousemove', function(event) { x = h-padding y = Math.min(xScale(1), Math.max(xScale(-1), 2*h-d3.pointer(event)[0] )) text .attr('x', x) .attr('y', y +4) .text( (Math.round( xInverse(x) * yInverse(y) * 100) / 100 ).toFixed(2) ) .attr("fill", colorScale( xInverse(x) * yInverse(y) )) hyperbola .datum( (d,i) => f(xInverse(x) * yInverse(y))[i] ) .attr('d', hLine) .attr('stroke', colorScale( xInverse(x) * yInverse(y) )) rectified .datum( [[xInverse(x) * yInverse(y),0], [xInverse(x) * yInverse(y),arcLength(xInverse(x) * yInverse(y), n)]] ) .attr('d', sLine) .attr('stroke', colorScale( xInverse(x) * yInverse(y) )) }) .on('mouseleave', function(event) { text .attr('x', xScale(.5) ) .attr('y', yScale(.5) ) .attr("fill", colorScale( .25 )) .text(0.25) hyperbola .datum( (d,i) => f(.25)[i] ) .attr('d', hLine) .attr('stroke', colorScale(.25)) rectified .datum( [[.25,0], [.25,arcLength(.25, n)]] ) .attr('d', sLine) .attr('stroke', colorScale( .25 )) }) // print return svg.node(); }51:T999,parameterization = { const w = 400; const h = 400; const padding = {x0:30, x1:10, y0:20, y1:20}; const domain = [c,1] // graph line let f = (x) => { // use t for time in seconds return c/x } let t, points let makeLine = () =>{ points = [] let step = (w-padding.x0-padding.x1)*3 for(let i=0; i { points = [] for(let i=0; i xScale(d[0])) .y((d) => yScale(d[1])) let curve = d3 .line() .x((d) => xScale(d[0])) .y((d) => yScale(d[1])) .curve(d3.curveNatural) //.curve(d3.curveMonotoneX) // plot interpolation const interpolation = svg .append('path') .datum(dotData) .attr('d', curve) .attr('fill', 'none') .attr('stroke', '#FF0000') .attr('stroke-linejoin','round'); // plot function const path = svg .append('path') .datum(data) .attr('d', line) .attr('fill', 'none') .attr('stroke', '#1EDE89') .attr('stroke-linejoin','round'); // sample points const dot = svg.append('g') .selectAll("dot") .data(dotData) .enter() .append("circle") .attr("cx", (d,i) => xScale( d[0] )) .attr("cy", (d,i) => yScale( d[1] )) .attr("r", 2) .style("fill", '#000000'); // axes numbers let xAxis = d3.axisBottom(xScale).ticks(10); svg.append("g") .attr("transform", `translate(0,${h - padding.y0})`) .call(xAxis) let yAxis = d3.axisLeft(yScale); svg.append("g") .attr("transform", `translate(${padding.x0}, 0)`) .call(yAxis) //labels svg.append("text") .attr("x", h/2 ) .attr("y", 10 ) .attr("text-anchor", "middle") .style("font-size", "14px") .attr("font-family", "Arial") .attr("font-weight",700) .text("Hyperbolic Path Sample Points"); // print return svg.node(); }52:T97a,interpolation = { const w = 700; const h = 400; const padding = {x0:30, x1:10, y0:40, y1:20}; const domain = [c,1] let l = lengthSamples[lengthSamples.length-1][0] // graph line let f = (x) => { // use t for time in seconds return cubicInterpolation(lengthSamples, lengthSamples[lengthSamples.length-1][0]*(x+1)/2) } let t, points let makeLine = () =>{ points = [] let step = 300 for(let i=0; i { points = [] for(let i=0; i xScale(d[0])) .y((d) => yScale(d[1])) // plot function const path = svg .append('path') .datum(data) .attr('d', line) .attr('fill', 'none') .attr('stroke', '#1EDE89') .attr('stroke-linejoin','round'); // axes numbers let xAxis = d3.axisBottom(xScale).ticks(20); svg.append("g") .attr("transform", `translate(0,${h - padding.y0})`) .call(xAxis) let yAxis = d3.axisLeft(yScale); svg.append("g") .attr("transform", `translate(${padding.x0}, 0)`) .call(yAxis) //labels svg.append("text") .attr("x", w/2 ) .attr("y", 10 ) .attr("text-anchor", "middle") .style("font-size", "14px") .attr("font-family", "Arial") .attr("font-weight",700) .text("Arc Length Cubic Interpolation"); svg.append("text") .attr("x", w/2 ) .attr("y", h-10 ) .attr("text-anchor", "middle") .style("font-size", "10px") .attr("font-family", "Arial") .attr("font-weight",700) .text("Arc Distance"); svg.append("text") .attr("x", 0 ) .attr("y", 10 ) .attr("text-anchor", "start") .style("font-size", "10px") .attr("font-family", "Arial") .attr("font-weight",700) .text("x Coordinate"); // print return svg.node(); }53:Tb3d,gaussIntersection = { let cInterval = 2 // number of intervals over the range of c let cn = 50 // number of hyperbolic paths in each product interval let ln = 51 // number of [s(x),x] points for cubic look up let m = 10 // number arc length gaussian samples per interval let arcInterval = 2 // intervals per hyperbolic path let hn = 5 // samples per hyperbolic interval //let max = 50 //let min = 50 // hyperbolic segment information let array = [] let list, x0, x1, s, interval, c, spline, arcLength, x, y let f = (x,c) => { return Math.sqrt(1 + ( c * x**(-2) )**2 ) } for( let i=0; i 0; }); // index of first 0 d[0]), list.map((d) => d[1]) ) for( let i=0; i { // [x position, distance from start]\n let dPoints = [ [sample[0][0] , 0] ]\n for(let i=1; i { return Math.sqrt(1 + ( c * x**(-2) )**2 ) }\n for(let i=1; i{\n let spline = new Spline(\n data.map((d) => d[0]),\n data.map((d) => d[1])\n )\n // need to make it accept single values or whole Gaussian list\n return spline.at(x)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"Using cubic interpolation, we can find the x coordinate of a point a certain distance along the hyperbolic path. This x coordinate can also yield a y coordinate by plugging x into the hyperbolic formula ${tex`y = c/x`}.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":793,"value":"Inputs.bind(Inputs.range([0.00014, 1], {value: .1, step: 0.000001, label: \"c, the product of x⋅y\"}), viewof c)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":795,"value":"Inputs.bind(Inputs.range([3, 51], {value: 3, step: 2, label: \"sample points\"}), viewof n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"viewof m = Inputs.range([1, 20], {value: 3, step: 1, label: \"samples per step\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":802,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"md` ## Array of Gaussian Nodes and Weights `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"md` Gaussian node position for low and high percision calculations. The area and color of each point represent weight of each node, which is the calculated from the product of half of the Gaussian weight ${tex` w_j/2 `}, the arc length of the hyperbolic segment ${tex` s(x) `}, and the inverse magnitude of the gradient ${tex` ||\\nabla(xy)||^{-1} `}\n\n${tex` w_{ij} = \\dfrac{w_j}{2} \\cdot \\displaystyle \\int_{|c_i|}^1 \\sqrt{1+c^2 x^{-4} } dx \\cdot \\dfrac{1}{\\sqrt{x^2+y^2}}`}\n\n| Percision | Constant Intervals | Samples Per
Constant Interval | Hyperbola Intervals | Points Per
Hyperbolic Interval | Total Points |\n|:--:|:--:|:--:|:--:|:--:|:--:|\n|Low | 2 | 40 | 4 | 40 | ${2*40*4*40} |\n|High| 2 | 100 | 4 | 100 | ${2*100*4*100} |\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":844,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1055,"value":"{/*\n let size = Math.min(1000, width)\n const canvas = DOM.canvas(size, size);\n const ctx = canvas.getContext('2d');\n ctx.globalCompositeOperation = 'darken'\n \n let padding = 2\n let domain = size - 2*padding\n for(let i=0; i {\n this.alpha = Math.max(.01, a);\n this.beta = Math.max(.01, b);\n this.B = cephes.beta(this.alpha,this.beta);\n if(1 <= this.alpha && 1 <= this.beta){this.support = [-1, 1];}\n else{this.support = [-.99999999999999, .99999999999999];}\n };\n this.f = (x) =>{\n if( x< this.support[0] || this.support[1]map(mean, gamma) takes the mean and the density at the mean, and returns the alpha and beta parameters of a beta distribution with those properties`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"function map(mean, gamma) {\n //converts expected value and combined shape parameter to a, b, and calucaluates B(a,b,)\n // guess alpha and beta parameters\n let a = 1.5 * mean * gamma ** 2 * (1 - 0.9 * (2 * mean - 1) ** 2);\n let b = (a - a * mean) / mean;\n let betaCoefficient, estimate;\n // refine alpha until curve intersects point\n for (let i = 0; i < 15; i++) {\n betaCoefficient = cephes.beta(a, b);\n estimate = betaPDF(mean, a, b, betaCoefficient);\n a = (a * gamma) / estimate;\n b = (a - a * mean) / mean;\n }\n return [a, b, betaCoefficient];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"function betaPDF(x, alpha, beta, B){\n if(x==0){x=.00000001}\n if(x==1){x=.99999999}\n if(0 {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W54","stdlib":"1"}} 24:null