2d:null 2e:["$","title",null,{"children":"Histogram1D | Johannes Mainusch | Observable"}] 33:T1c40,/* 20151025: Johannes Mainusch 1D Histogram */ function Histogram1D(xMin, xMax, nBins) { this.ID = new Date().getTime(); this.xMin = xMin || 0; this.xMax = xMax || 1; this.nBins = nBins || 100; this.bins = new Array(nBins); this.title = "1D histogram"; this.plottextboxstats = true; this.plotbinentries = true; this.bin // this.fill = function (d, weight) { this.nEntries += (weight || 1); this.sum += d * (weight || 1); this.sum2 += d * (weight * weight || 1) if (d > this.max) this.max = d; if (d < this.min) this.min = d; if (d < xMin) this.underflow += weight || 1; else if (d >= xMax) this.overflow += weight || 1; else { var bin = Math.trunc(this.nBins * (d - this.xMin) / (this.xMax - this.xMin)); this.bins[bin] += weight || 1; this.average = this.sum / this.nEntries; this.rms = Math.sqrt(this.sum2 / this.nEntries); } return this; }; this.reset = function () { console.log ("in reset...", this.ID); this.underflow = 0.0; this.overflow = 0.0; this.sum = 0.0; this.sum2 = 0.0; this.average = 0.0; this.rms = 0.0; this.nEntries = 0.0; this.min = 0.0; this.max = 0.0; for (let i = 0; i < this.bins.length; i++) { this.bins[i] = 0; } return this; }; this.print = function () { let output = ""; output += "underflow: " + this.underflow + "\n" output += "overflow: " + this.overflow + "\n" output += "nEntries: " + this.nEntries + "\n" output += "average: " + this.average + "\n" output += "rms: " + this.rms + "\n" for (let i in this.bins) { let binwidth = (this.xMax-this.xMin) / this.nBins; output += "bin[" + i + "] ["+(this.xMin + i * binwidth)+" : "+(this.xMin + binwidth + i*binwidth) +"] = " + this.bins[i] + "\n"; } return output; }; this.testfill = function (nEntries, distributionFunction) { console.log ("in testfill...", this.ID) let entries = nEntries || 100; let self = this; // d = [0..1] --> [this.xMin...this.xMax] function gleichverteilung () { let scale = (self.xMax - self.xMin); return (Math.random() * scale + self.xMin); } let df = distributionFunction || gleichverteilung ; for (let i = 0; i < entries; i++) { this.fill( df() ); } return this; } this.plot = function (w, h, domElemId) { console.log ("in plot...", this) // // plot a Histogram with d3 // let width = w || 400; let height = h || 200; let margin = this.margin || ({ top: 25, right: 30, bottom: 20, left: 20 }); var svg = this.svg || d3.select(DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom)); if (domElemId) { d3.select(domElemId).append(svg); } if (this.svg) { this.svg.selectAll("rect").remove(); this.svg.selectAll("text").remove(); this.svg.selectAll("g").remove(); } this.svg = svg; // background svg.append("rect") .attr("class", "bar") .attr("fill", "#ccf") .attr("fill-opacity", "0.2") .attr("x", 0) .attr("y", 0) .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); // x-scale let x = d3.scaleLinear() .domain([this.xMin, this.xMax]) .range([margin.left, width+margin.left]) // y-scale let y = d3.scaleLinear() .domain([0, d3.max(this.bins)*1.2]) .range([height,0]) // x-Axis svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + (height +margin.top) + ")") .call(d3.axisBottom(x)) .call(g => g.append("text") .text(function (d,i){return i})); // y-Axis let maxval = d3.max(this.bins); svg.append("g") //.attr("class", "y axis") .attr("transform", "translate("+margin.left+","+margin.top+")") .call(d3.axisRight(y).tickSize(width)) .call(g => g.selectAll(".tick:not(:first-of-type) line").attr("stroke", "#ddd")) .call(g => g.append("text") .text(function (d,i){return y(d) })); // the frame svg.append("rect") .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", "1") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width) .attr("height", height); // the histogram let barWidth = width/this.nBins; let bar = svg.selectAll("bar").data(this.bins).enter(); let barFunction = (d,i) => x( (i/ this.nBins)*(this.xMax - this.xMin) + this.xMin); let textxPosition = (d,i) => x( ( (i+0.5)/ this.nBins)*(this.xMax - this.xMin) + this.xMin); bar.append("rect") .attr("fill", "steelblue") //.attr("x", (d,i) => x( (i/ this.nBins)*(this.xMax - this.xMin) + this.xMin) ) .attr("x", barFunction ) .attr("y", d => y(d) + margin.top) .attr("height", d => height - y(d) ) .attr("width", barWidth-1); // text in the histogram box if (this.plotbinentries) { bar.append("text") //.attr("x", (d,i) => x((i+0.5) / this.nBins )) .attr("x", textxPosition) .attr("y", d => y(d) + 10) .attr("dy", "1.5em") .attr("fill", "white") .attr("writing-mode", "tb") .attr("text-anchor", "left") .text( d => d ) .attr("font-size", "10px") .attr("f0nt-family","sans-serif"); } // textbox stats if (this.plottextboxstats) { svg.append("text") .attr("transform", "translate("+margin.left+","+margin.top+")") .attr("font-size", "10px") .attr("f0nt-family","sans-serif") .attr("y", 10) .attr("x", 10) .append("tspan") .text("N: " + this.nEntries) .append("tspan") .text("underflow: " + this.underflow) .attr("x", 10) .attr("dy", 10) .append("tspan") .text("overflow: " + this.overflow) .attr("x", 10) .attr("dy", 10) .append("tspan") .text("average: " + Math.round(this.average * 100) / 100) .attr("x", 10) .attr("dy", 10) .append("tspan") .text("rms: " + Math.round(this.rms * 100) / 100) .attr("x", 10) .attr("dy", 10); } // the title if (this.title) { svg.append ("text") .attr("transform", "translate("+margin.left+",20)") .attr("font-size", "20px") .attr("f0nt-family","sans-serif") .attr("y", 0) .attr("x", 0) .text(this.title); } return svg.node(); } // this.reset(); return this; }34:[] 31:{"id":"0e82a815d7fbd6fa","slug":"histogram1d","title":"Histogram1D","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2018-02-21T08:50:28.073Z","update_time":"$D2023-09-01T20:12:03.480Z","view_time":null,"first_public_time":"$D2018-03-04T21:17:40.868Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ae5e0aa7324794cc","login":"ahojsenn","name":"Johannes Mainusch","avatar_url":"https://avatars-next.observableusercontent.com/e0207661263f514787582149fc224d289f2498ae5ad80bd02aaa3145c65b94d2","tier":"starter_2024"},"version":1795,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"277b45a6eb5af5e8","login":"ahojsenn","name":"Johannes Mainusch","avatar_url":"https://avatars-next.observableusercontent.com/e0207661263f514787582149fc224d289f2498ae5ad80bd02aaa3145c65b94d2","tier":null}],"members":[{"type":"individual","id":"277b45a6eb5af5e8","login":"ahojsenn","name":"Johannes Mainusch","avatar_url":"https://avatars-next.observableusercontent.com/e0207661263f514787582149fc224d289f2498ae5ad80bd02aaa3145c65b94d2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Histogram1D","cells":[{"id":0,"value":"md`# Histogram1D\nuse: import {viewof Histogram1D} from \"@ahojsenn/histogram1d\"\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1605,"value":"histogram = {\n let h = new Histogram1D ( 0, 10 , 30)\n h.margin = ({ top: 25, right: 50, bottom: 20, left: 20 });\n h.title = \"test 1D histogram\";\n let Zwölferregel = () => {let z = 0; for (let i=0; i<12; i++) {z += Math.random()} return z}\n h.testfill(500, Zwölferregel);\n //h.testfill(5000);\n return h \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1146,"value":"histogram.plot(300,200)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1719,"value":"{\n let Zwölferregel = () => {let z = 0; for (let i=0; i<12; i++) {z += Math.random()} return z}\n //\n const form = html``;\n form.fillhist.onclick = () => {histogram.testfill(500); histogram.plot(300,200);}\n form.gfillhist.onclick = () => {histogram.testfill(500, Zwölferregel); histogram.plot(300,200);}\n form.reset.onclick = () => {histogram.reset(); histogram.plot(300,200);}\n\n histogram.testfill(500);\n histogram.plot();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"