function pic(i, j, start, size) {
let width, height;
if (size) {
width = size;
height = size / 2;
} else {
width = 230;
height = 100;
}
let pad = 5;
let div = d3
.create('div')
.attr('class', 'pic')
.style('width', `${width}px`)
.style('height', `${height + 40}px`);
let pic_container = div
.append('div')
.style('width', `${width + 1}px`)
.style('height', `${height + 1}px`);
let pic = pic_container
.append('svg')
.attr('width', width)
.attr('height', height)
.style('background-color', 'white');
let xmin = -3.4;
let xmax = 3.4;
let ymin = -0.05;
let ymax = 0.5;
let x_scale = d3
.scaleLinear()
.domain([xmin, xmax])
.range([pad, width - pad]);
let y_scale = d3
.scaleLinear()
.domain([ymin, ymax])
.range([height - pad, pad]);
let pts_to_path = d3
.line()
.x(function(d) {
return x_scale(d[0]);
})
.y(function(d) {
return y_scale(d[1]);
});
let dx = 0.01;
let Z = i / 10 + j / 100;
if (start == 0) {
let fill_pts = d3.range(0, Z + dx, dx).map(x => [x, normal_pdf(x)]);
fill_pts = [[0, 0]].concat(fill_pts).concat([[Z, 0]]);
pic
.append('path')
.attr('class', 'fill')
.attr('d', pts_to_path(fill_pts))
.attr('stroke', 'none')
.attr('fill', 'lightblue');
} else {
let fill_pts = d3.range(xmin, Z + dx, dx).map(x => [x, normal_pdf(x)]);
fill_pts = [[xmin, 0]].concat(fill_pts).concat([[Z, 0]]);
pic
.append('path')
.attr('class', 'fill')
.attr('d', pts_to_path(fill_pts))
.attr('stroke', 'none')
.attr('fill', 'lightblue');
}
pic
.append('line')
.attr('x1', x_scale(xmin))
.attr('x2', x_scale(xmax))
.attr('y1', y_scale(0))
.attr('y2', y_scale(0))
.attr('stroke', 'black');
pic
.append('line')
.attr('x1', x_scale(0))
.attr('x2', x_scale(0))
.attr('y1', y_scale(ymin))
.attr('y2', y_scale(ymax))
.attr('stroke', 'black');
let x_ticks = [-3, -2, -1, 1, 2, 3];
pic
.selectAll('line.xtick')
.data(x_ticks)
.join('line')
.attr('class', 'xtick')
.attr('x1', x => x_scale(x))
.attr('x2', x => x_scale(x))
.attr('y1', y_scale(0))
.attr('y2', y_scale(ymin / 3))
.attr('stroke', 'black');
pic
.selectAll('text.xtick')
.data(x_ticks)
.join('text')
.attr('class', 'xtick')
.attr('x', x => x_scale(x) - width / 100)
.attr('y', y_scale(1.3 * ymin))
.text(x => x);
let pts = d3.range(xmin, xmax + dx, dx).map(x => [x, normal_pdf(x)]);
pic
.append('path')
.attr('class', 'curve')
.attr('d', pts_to_path(pts))
.attr('stroke', 'black')
.attr('stroke-width', 2.5)
.attr('fill', 'none');
let tex_string = tex`Z=${d3.format("0.2f")(
Z
)}, \: \: \: P \approx ${d3.format("0.4f")(P(i, j, start))}`;
div
.append('div')
.attr('class', 'tex_container')
.style('width', '230px')
.style('margin', '0 auto')
.append(() => tex_string);
return div.node();
}