Published
Edited
Apr 5, 2021
Insert cell
Insert cell
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`<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;
}
Insert cell
d3 = require('d3@6')
Insert cell
n_samples = 1000
Insert cell
{
var unif = Math.random()
return stdlib.base.dists.beta.quantile(unif, 5,7)
}
Insert cell
function normalSample() {
var vals = []
for(var i=0;i<n_samples;i++) {
vals.push(stdlib.base.dists.normal.quantile(Math.random(), 0, 1))
}
return vals
}
Insert cell
normalSample()
Insert cell
function stickBreakingSample(alpha) {
var betas = []
var values = []
betas.push(stdlib.base.dists.beta.quantile(Math.random(), 1,alpha));
values.push(betas[0]);
var prod=1;
for(var j=0;j<n_samples-1;j++) {
betas.push(stdlib.base.dists.beta.quantile(Math.random(), 1,alpha));
prod = prod * (1-betas[j])
values.push(betas[j+1]*prod)
}
return values
}
Insert cell
alphaslider = slider({
min: 0.1,
max: 100,
step: 0.1,
value: 5,
title: "Concentration Parameter",
})
Insert cell
import {slider} from "@jashkenas/inputs"
Insert cell
stdlib = require( "https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js" )
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more