30:T4f8,{ const svg = d3.create("svg") .attr("width",W) .attr("height",H) .style("background-color",bg_color); let xs_min=xmin.value; let xs_max=xmax.value; if(nbin==1){ xs_min=xmin.value; xs_max=xmax.value; } let x = d3.scaleLinear() .domain([xs_min,xs_max]) .range([margin.left, W-margin.right]); let xAxis_bottom = d3.axisBottom(x); let x_axis_bottom_g=svg.append("g") .attr("class","axis") .attr("transform","translate("+0+","+(H-margin.bottom)+")") .call(xAxis_bottom); let y = d3.scaleLinear() .domain([0,bmax.value]) .range([(H-2*margin.bottom), 0]); let yAxis_left = d3.axisLeft(y); let y_axis_left_g = svg.append("g") .attr("class","axis") .attr("transform","translate("+margin.left+","+margin.top+")") .call(yAxis_left); let histoline=d3.area() .x(function(d,i){ if(raw.length==1 && i==0)return x(xs_min); return x(xs_min+(i)*w_bin) }) .y1(function(d,i){return margin.top+y(raw[i])}) .y0(function(){return H-margin.bottom;}) .curve(d3.curveStepAfter); svg.append("path") .attr("d", histoline(raw)) .attr("fill", fill_color) .attr("stroke", "#000") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .style("stroke-width",1); return svg.node() }31:T412,current_vars={ let colnames=["sigmaX","nbin","wbin","xmin","xmax","bmax","nevent"] let table=d3.create("table"); let thr=table.append("tr") let tdr=table.append("tr") for(var colname of colnames){ thr.append("th").html(colname) switch(colname){ case "sigmaX": tdr.append("td").html(sigmaX);break; case "nbin": tdr.append("td").html(nbin);break; case "wbin": tdr.append("td").html(w_bin.toFixed(2));break; case "xmin": if(xmin.value){ tdr.append("td").html(xmin.value.toFixed(2)); } else tdr.append("td").html("-"); break; case "xmax": if(xmax.value){ tdr.append("td").html(xmax.value.toFixed(2)); } else tdr.append("td").html("-"); break; case "bmax": tdr.append("td").html(bmax.value);break; case "nevent": tdr.append("td").html(ntuple.length);break; default: tdr.append("td").html("ERR!") } } return table.node(); }32:[] 2e:{"title":"Histo1D","cells":[{"id":0,"value":"md`# Histo1D`","pinned":false,"hidden":false,"mode":"ojs"},{"id":712,"value":"md`# Description\nThis is a partial port of a 1D histogram widget from a project\ncalled d3plot. It uses pure d3js and svg. Push the Run button \nand move the nbin slider to dynamically rebin the data as it is \ngenerated. (\"nbin\" stands for \"number of bins\") The data-generating \nfunction samples a Gaussian (normal) distribution via the Box-Muller \nmethod [1]. The \"sigmaX\" slider controls the standard deviation \nof the resulting distribution.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"viewof nbin=html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":932,"value":"html`nbin`","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"viewof sigmaX=html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":938,"value":"html`sigmaX`","pinned":false,"hidden":false,"mode":"ojs"},{"id":856,"value":"html`

Run

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":550,"value":"w_bin={\n\tlet rval=(xmax.value-xmin.value)/nbin\n if(nbin>1)rval=(xmax.value-xmin.value)/(nbin)\n\treturn rval;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"margin=({top:50,right:50,bottom:50,left:50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"xmin=({value:null,})","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"xmax=({value:null,})","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"bmax={\n\tlet rval={value:null}\n return rval\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"ntuple=[]","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"raw=[]","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"refill=function(){\n\twhile(raw.length>0)raw.shift();\n \n\tfor(var dummy=0;dummy<(nbin);dummy++)raw.push(0)\n\traw.push(0)//they all need it in order to get called for the final edge of the area curve\n \n\t//fill\n\tvar range=xmax.value-xmin.value;\n\tif(range==0)range=1;\n \tlet rcount=0;\n\tfor(var row of ntuple){\n \trcount+=1;\n\t\traw[ Math.min(parseInt(((row[0]-xmin.value)/range)*nbin),nbin-1) ]+=1; \t\n\t}\n\t\n \tbmax.value=1;\n\tfor(var bin of raw){\n\t\tif(bin>bmax.value)bmax.value=bin;\n\t}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"gen_dat=function(){\n \n let sigmaY=5\n let F1=Math.random()\n let F2=Math.random()\n let x=sigmaX*Math.sqrt(-Math.log(F1))*Math.cos(2.*Math.PI*F2)\n \n if(!xmin.value || xxmax.value)xmax.value=x;\n \n F1=Math.random()\n F2=Math.random()\n let y=-sigmaY*Math.sqrt(-Math.log(F1))*Math.cos(2.*Math.PI*F2)\n ntuple.push([x,y])\n \n let event = document.createEvent('Event');\n event.initEvent('input', true, true);\n d3.selectAll(\"#nbin_range\").node().dispatchEvent(event);\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"interval_id=({value:null})","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"genCB={\n d3.select(\"#gen\").on(\"click\",function(){\n if(interval_id.value){\n window.clearInterval(interval_id.value);\n interval_id.value=null;\n d3.select(\"#gen\")\n .html(\"Run\")\n .style(\"background-color\",\"#070\");\n }\n else{\n interval_id.value=window.setInterval(gen_dat,100)\n d3.select(\"#gen\")\n .html(\"Stop\")\n .style(\"background-color\",\"#700\");\n } \n })\n return \"ok\"\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"init={\n\tlet event = document.createEvent('Event');\n \tevent.initEvent('input', true, true);\n \td3.selectAll(\"#nbin_range\").node().dispatchEvent(event);\n \treturn \"ok\"\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"W=800","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"H=600","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"viewof bg_color=html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"viewof fill_color=html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"d3.select(\"#nbin_range\").on(\"input\",function(){\n\trefill();\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":785,"value":"interval_id.value=window.setInterval(gen_dat,100)","pinned":false,"hidden":false,"mode":"ojs"},{"id":873,"value":"stylesheet=html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":810,"value":"d3.select(\"#gen\")\n\t.html(\"Stop\")\n\t.style(\"background-color\",\"#700\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":685,"value":"md`## References`","pinned":false,"hidden":false,"mode":"ojs"},{"id":687,"value":"md`\\[1\\] [William R. Gibbs, Computation In Modern Physics](https://www.amazon.com/Computation-Modern-Physics-William-Gibbs/dp/9812567992/)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":841,"value":"md`\\[2\\] [C. Cossé, d3plot](https://www.readingedge.org)`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}