viewof mu = Inputs.range([-7, 7], {
label: "Mean (μ)",
value: 0,
step: 0.1
})
viewof sigma = Inputs.range([0.001, 5], {
label: "Standard Deviation (σ)",
value: 1,
step: 0.01
})
{
const width = 800;
const height = 400;
const margin = {top: 20, right: 30, bottom: 40, left: 50};
const xMin = -10;
const xMax = 10;
const data = [];
for (let x = xMin; x <= xMax; x += 0.1) {
const y = (1 / (sigma * Math.sqrt(2 * Math.PI))) *
Math.exp(-0.5 * Math.pow((x - mu) / sigma, 2));
data.push({x, y});
}
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height]);
const xScale = d3.scaleLinear()
.domain([xMin, xMax])
.range([margin.left, width - margin.right]);
const yScale = d3.scaleLinear()
.domain([0, 0.9])
.range([height - margin.bottom, margin.top]);
const line = d3.line()
.x(d => xScale(d.x))
.y(d => yScale(d.y));
svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "#4CAF50")
.attr("stroke-width", 2.5)
.attr("d", line);
svg.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(xScale));
svg.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(yScale));
svg.append("line")
.attr("x1", xScale(mu))
.attr("x2", xScale(mu))
.attr("y1", margin.top)
.attr("y2", height - margin.bottom)
.attr("stroke", "red")
.attr("stroke-width", 2)
.attr("stroke-dasharray", "5,5");
return svg.node();
}