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)
var xAxis = d3.axisBottom().scale(xScale).ticks(9)
var yAxis = d3.axisLeft().scale(yScale).ticks(9)
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`<div>${svg.node()}</div>
</br>
<div style='display: flex'><div>${alphaslider}</div><button id="button" style="margin: 10px">Draw Sample</button></div>`
const button = container.querySelector('#button');
var xlocs = normalSample();
var ylocs = stickBreakingSample(5);
for(var i=0;i<n_samples;i++) {
svg.append('line')
.style("stroke", "blue")
.style("stroke-width", 2)
.attr("x1", xScale(xlocs[i]))
.attr("y1", yScale(0))
.attr("x2", xScale(xlocs[i]))
.attr("y2", yScale(ylocs[i]))
.attr("id", "seg"+i);
}
function update() {
var xlocs = normalSample();
var ylocs = stickBreakingSample(alphaslider.value);
for(var i=0;i<n_samples;i++) {
d3.select("#seg"+i)
.style("stroke", "blue")
.style("stroke-width", 2)
.transition()
.duration(1500)
.attr("x1", xScale(xlocs[i]))
.attr("y1", yScale(0))
.attr("x2", xScale(xlocs[i]))
.attr("y2", yScale(ylocs[i]));
}
}
button.onclick = update;
return container;
}