display = { var x = d3.range(-4., 4.1, 0.1) var fnorm = x => (1. / Math.sqrt(2 * Math.PI)) * Math.exp(-0.5 * Math.pow(x, 2)) var y = new Array() for (var i = 0 ; i < x.length ; i++) { y[i] = fnorm(x[i]) } var data = [] for (var j = 0; j < x.length; j++) { data[j] = [] data[j][0] = x[j] data[j][1] = y[j] } var w = 500 var h = 500 var padding = 50 var xScale = d3.scaleLinear() .domain([d3.min(x, function(d) { return d }), d3.max(x, function(d) { return d })]) .range([padding, w - padding * 2]) var yScale = d3.scaleLinear() .domain([0, 1]) .range([h - padding, padding]) var svg = d3.select('body') .append('svg') .attr('width', w) .attr('height', h) // Define the axis var xAxis = d3.axisBottom().scale(xScale).ticks(9) var yAxis = d3.axisLeft().scale(yScale).ticks(9) // Create the axis svg.append('g') .attr('class', 'axis') .attr('transform', 'translate(0,' + (h - padding) + ')') .call(xAxis) svg.append('g') .attr('class', 'axis') .attr('transform', 'translate(' + padding + ',0)') .call(yAxis) var line = d3.line() .x(function(d) { return xScale(d[0]);}) .y(function(d) { return yScale(d[1]);}); svg.append("path") .attr("d", line(data)) .attr("stroke", "navy") .attr("fill", "none"); const container = html`

${svg.node()}

${alphaslider}

` const button = container.querySelector('#button'); var xlocs = normalSample(); var ylocs = stickBreakingSample(5); for(var i=0;i