30:T1397,animate = { let dataSet; let uniformCircleRadii, uniAreaCircleRadii; function setUpData() { dataSet = new Array(N * N); uniformCircleRadii = new Array(N); uniAreaCircleRadii = new Array(N); for (let i = 0, k = 0; i < N; i++) { uniformCircleRadii[i] = (0.5 * (i + 1)) / N; uniAreaCircleRadii[i] = 0.5 * Math.sqrt((i + 1) / N); for (let j = 0; j < N; j++, k++) dataSet[k] = [(2 * (i + 0.5)) / N - 1, (2 * (j + 0.5)) / N - 1]; } } setUpData(); // Define the axes const xAxis = d3.axisBottom().scale(xScale); const yAxis = d3.axisLeft().scale(yScale); //Create SVG element const svgNode = DOM.svg( width + margin.left + margin.right, height + margin.top + margin.bottom ); const svg = d3 .select(svgNode) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var drawGrid = false; var firstTime = true; svgNode.draw = draw; return svgNode; function draw(samplingOption) { var str; switch (samplingOption) { case "Uniform Square": scatterPlot(dataSet, false, uniformCircleRadii); break; case "Equiarea Disc": scatterPlot(mapToUnitDisk(dataSet, false), true, uniAreaCircleRadii); break; case "Concentric Disc": scatterPlot(concentricMapToUnitDisk(dataSet), true, uniformCircleRadii); break; case "Wrong Disc Mapping": scatterPlot(mapToUnitDisk(dataSet, true), true, uniformCircleRadii); break; } } function scatterPlot(dataset, gridFlag, radii) { if (firstTime) { svg .selectAll("circle") .data(dataset) .join("circle") .attr("cx", d => xScale(d[0])) .attr("cy", d => yScale(d[1])) .attr("r", 5); firstTime = false; } else { svg .selectAll("circle") .data(dataset) .style("fill", "red") .transition() .delay(d => (d[2] == 2 ? 2000 : 0)) .duration(2000) .style("fill", d => d[2] == 2 ? "green" : d[2] == 1 ? "blue" : "black" ) .attr("cx", d => xScale(d[0])) .attr("cy", d => yScale(d[1])); } svg.selectAll("g.grid").remove(); if (!gridFlag) { svg .append("g") .attr("class", "grid") .attr("transform", "translate(0," + height + ")") .selectAll(".crects") .data(radii) .join("rect") .attr("class", "crects") .style("stroke", "gray") .attr("x", d => width / 2 - d * width) .attr("y", d => -height / 2 - d * height) .attr("width", d => 2 * d * height) .attr("height", d => 2 * d * height) .style("fill", "none"); } else { // concentric circles svg .append("g") .attr("class", "grid") .attr("transform", "translate(0," + height + ")") .selectAll(".ccircle") .data(radii) .enter() .append("circle") .attr("class", "ccircle") .style("stroke", "gray") .attr("cx", d => width / 2) .attr("cy", d => -height / 2) .attr("r", d => d * height) .style("fill", "none"); } } function randomizeData() { var OneMinusEpsilon = 0.9999999403953552; for (var i = 0, k = 0; i < N; i++) { for (var j = 0; j < N; j++, k++) { var a = Math.random(); var b = Math.random(); var x = Math.min((i + a) / N, OneMinusEpsilon), y = Math.min((j + b) / N, OneMinusEpsilon); dataSet[k] = [2 * x - 1, 2 * y - 1]; } } } function mapToUnitDisk(dataIn, wrongFlag) { var nPoints = dataIn.length; var dataOut = new Array(nPoints); for (var i = 0; i < nPoints; i++) { var d = dataIn[i]; var phi, r; var sx = d[0]; var sy = d[1]; r = Math.abs(sx); if (!wrongFlag) r = Math.sqrt(r); // Handle degeneracy at the origin if (sx == 0.0 && sy == 0.0) { dataOut[i] = [0, 0]; continue; } if (sx >= 0) { phi = (Math.PI / 2) * sy; } else { phi = Math.PI - (Math.PI / 2) * sy; } dataOut[i] = [r * Math.cos(phi), r * Math.sin(phi)]; } return dataOut; } function concentricMapToUnitDisk(dataIn) { var nPoints = dataIn.length; var dataOut = new Array(nPoints); for (var i = 0; i < nPoints; i++) { var d = dataIn[i]; var phi, r; var sx = d[0]; var sy = d[1]; // Handle degeneracy at the origin if (sx == 0.0 && sy == 0.0) { dataOut[i] = [0, 0, 0]; continue; } let option = 0; if (sx * sx > sy * sy) { // left and right r = sx; phi = (Math.PI / 4) * (sy / sx); option = 1; } else { // top and bottom r = sy; phi = Math.PI / 2 - (Math.PI / 4) * (sx / sy); option = 2; } dataOut[i] = [r * Math.cos(phi), r * Math.sin(phi), option]; } return dataOut; } }31:Tdec,{ const dataSet = (randomSamplingTypes[+options.randomType])(N); const uniAreaCircleRadii = (new Array(N).fill(0)).map((d,i)=>0.5*Math.sqrt((i+1)/N)); const uniformCircleRadii = (new Array(N).fill(0)).map((d,i)=>0.5*(i+1)/N); const dataDomain = [-1, +1]; xScale.domain(dataDomain); yScale.domain(dataDomain);//([0, d3.max(dataset, function(d) { return d[1]; })]); //return [uniAreaCircleRadii, uniformCircleRadii] var drawGrid = (options.gridButton==="enable"); scatterPlot("#equiAreaMap",equiAreaMapToUnitDisk(dataSet),true,uniAreaCircleRadii); scatterPlot("#uniformSquare",dataSet); scatterPlot("#concentricMap",concentricMapToUnitDisk(dataSet),true,uniformCircleRadii); scatterPlot("#wrongMap",wrongMapToUnitDisk(dataSet),true,uniformCircleRadii); return `Draw function called here` function equiAreaMapToUnitDisk(dataIn) { var nPoints = dataIn.length; var dataOut=new Array(nPoints); for (var i=0; i sy*sy){ // left and right r = sx; phi = (Math.PI/4) * (sy/sx); } else{ // top and bottom r = sy; phi = (Math.PI/2) - ((Math.PI/4) * (sx/sy)); } dataOut[i]=[ r*Math.cos(phi), r*Math.sin(phi)]; } return dataOut; } function scatterPlot(id, dataset, gridFlag, circleRadii) { d3.select(id).select("svg").remove(); //Create SVG element var svg = d3.select(id) .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); svg.selectAll("circle") .data(dataset) .enter() .append("circle") .attr("cx", function(d) { return xScale(d[0]); }) .attr("cy", function(d) { return yScale(d[1]); }) .attr("r", 5); if (drawGrid) if (!gridFlag){ svg.append("g") .attr("class", "grid") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom().scale(xScale).ticks(Math.floor(N/2)+1).tickSize(-height, 0, 0).tickFormat("")); svg.append("g") .attr("class", "grid") .call(d3.axisLeft().scale(yScale).ticks(Math.floor(N/2)+1).tickSize(-width, 0, 0).tickFormat("")); } else{ // concentric circles svg.append("g") .attr("class", "grid") .attr("transform", "translate(0," + height + ")") .selectAll(".ccircle") .data(circleRadii) .enter() .append("circle") .attr("class", "ccircle") .style("stroke", "gray") .attr("cx", function(d) { return width/2 }) .attr("cy", function(d) { return -height/2 }) .attr("r", function(d) { return d*height;}) .style("fill", "none"); } } }32:[] 2e:{"title":"Sampling Disc","cells":[{"id":227,"value":"md`# Sampling Disc`","pinned":true,"hidden":false,"mode":"ojs"},{"id":160,"value":"viewof SamplingOption= select({\n options: [\n \"Uniform Square\",\n \"Concentric Disc\",\n \"Equiarea Disc\",\n \"Wrong Disc Mapping\"], value: \"Uniform Square\", description: \"Choose Sampling option\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"animate.draw(SamplingOption)","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`## Sampling Random Jitter 2D`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"viewof options = columns({\n gridButton: checkbox({\n options: [{ value: \"enable\", label: \"grid enable\" }],\n value: \"enable\"\n }),\n randomType: radio({\n description: 'Choose Sampling Type',\n options: [\n { label: 'regularGrid2D', value: 0 },\n { label: 'uniformJitter2D', value: 1 },\n //{ label: 'isotropicJitter2D', value: 2 },\n { label: 'RandomJitter2D', value: 3 }\n ],\n value: 0\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"html `\n\n\n\n\n\n\n\n\n\n\n

\n Equal Area Mapping Square to Disc \n \n	\n Uniform Distribution on a Square \n \n	\n Concentric Mapping Square to Disc \n \n
	\n Wrong Mapping Square to Disc \n \n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"N = 8","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"randomSamplingTypes = [ regularGrid2D , uniformJitter2D , isotropicJitter2D , RandomJitter2D ]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"regularGrid2D = (N) =>{\n const sample = new Array(N*N).fill(0);\n return sample.map((d,i)=>{\n const row = Math.floor(i / N), col = i % N;\n return [2*(col + 0.5)/N - 1,2*(row + 0.5)/N - 1];\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"uniformJitter2D=(N)=>{\n const sample = new Array(N*N).fill(0);\n const randomShift = Math.random();\n return sample.map((d,i)=>{\n const row = Math.floor(i / N), col = i % N;\n return [2*(col + randomShift)/N - 1,2*(row + randomShift)/N - 1];\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"isotropicJitter2D = (N)=>{\n const sample = new Array(N*N).fill(0);\n const randomShift = Math.random();\n const randomRot = 90*Math.random();\n return sample.map((d,i)=>{\n const row = Math.floor(i / N), col = i % N;\n const P = [2*(col + randomShift)/N - 1,2*(row + randomShift)/N - 1];\n const cosval = Math.cos(randomRot*Math.PI/180.0 )\n const sinval = Math.sin(randomRot*Math.PI/180.0 )\n return [P[0]*cosval-P[1]*sinval, P[0]*sinval + P[1]*cosval];\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"RandomJitter2D = (N)=>{\n const sample = new Array(N*N).fill(0);\n return sample.map((d,i)=>{\n const row = Math.floor(i / N), col = i % N;\n return [2*(col + Math.random())/N - 1,2*(row + Math.random())/N - 1];\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"margin = ({ top: 5, right: 5, bottom: 5, left: 5 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"width = 310 - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"height = 310 - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"xScale = d3.scaleLinear().domain([-1,1]).range([0, width]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"yScale = d3.scaleLinear().domain([-1,1]).range([height, 0]);\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"import {columns} from \"@bcardiff/observable-columns\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"import { select, checkbox, radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}

Equal Area Mapping Square to Disc

Uniform Distribution on a Square

Concentric Mapping Square to Disc

Wrong Mapping Square to Disc