28:null 29:["$","title",null,{"children":"Histo1D | C. Cossé | Observable"}] 2e: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() }2f: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(); }30:[] 2c:{"id":"bb0e869e5a5cb9ce","slug":"histo1d","title":"Histo1D","thumbnail":"e1e9f6ba932655e564638125bccf0bd253659c199dc3bda16c0cc2d775d7644b","access_level":"public","create_time":"$D2018-03-05T22:28:35.442Z","update_time":"$D2023-07-21T05:37:46.079Z","view_time":null,"first_public_time":"$D2018-03-08T03:18:10.668Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b01bcd961d83c6be","login":"ccosse","name":"C. Cossé","avatar_url":"https://avatars-next.observableusercontent.com/48cf2c3551c34fcb0106a512d13291ba6473a78230aadd3a53d80d71d5188b0b","tier":"starter_2024"},"version":943,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5a154d4c0dffd950","login":"ccosse","name":"C. Cossé","avatar_url":"https://avatars-next.observableusercontent.com/48cf2c3551c34fcb0106a512d13291ba6473a78230aadd3a53d80d71d5188b0b","tier":null}],"members":[{"type":"individual","id":"5a154d4c0dffd950","login":"ccosse","name":"C. Cossé","avatar_url":"https://avatars-next.observableusercontent.com/48cf2c3551c34fcb0106a512d13291ba6473a78230aadd3a53d80d71d5188b0b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Histo1D","cells":[{"id":0,"value":"md`# Histo1D`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"viewof nbin=html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"html`nbin`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"viewof sigmaX=html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"html`sigmaX`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":856,"value":"html`

Run

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"margin=({top:50,right:50,bottom:50,left:50})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"xmin=({value:null,})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"xmax=({value:null,})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"bmax={\n\tlet rval={value:null}\n return rval\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"ntuple=[]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"raw=[]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"interval_id=({value:null})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"W=800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"H=600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"viewof bg_color=html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"viewof fill_color=html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"d3.select(\"#nbin_range\").on(\"input\",function(){\n\trefill();\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":785,"value":"interval_id.value=window.setInterval(gen_dat,100)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":873,"value":"stylesheet=html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"d3.select(\"#gen\")\n\t.html(\"Stop\")\n\t.style(\"background-color\",\"#700\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"md`## References`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"md`\\[2\\] [C. Cossé, d3plot](https://www.readingedge.org)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"