function make_pic() {
d3.select(flip_pic)
.selectAll('svg')
.remove();
const plot = plotter({
width: the_width,
height: 0.5 * the_width,
yDomain: [1.0, -0.1],
xDomain: [-flips.n / 100, d3.max([flips.flips.length, 5])],
grid: false
});
let running_means = flips.flips.map(function(x, i) {
return { x: i + 1, y: d3.mean(flips.flips.slice(0, i + 1)) };
});
plot.polyline(running_means, { stroke: 'black', width: 2 });
if (flips.n < 60) {
running_means.forEach(o =>
plot.point(o.x, o.y, {
size: d3.min([5, 80 / flips.n])
})
);
}
plot.line_segment(0, flips.p, flips.n, flips.p, { dash: '5,5', width: 1 });
d3.select(flip_pic).append(() => plot.node);
d3.select(flip_pic)
.selectAll('circle')
.attr('title', function(d, i) {
let t = d3.sum(flips.flips.slice(0, i + 1));
let s, ss, iPlusOne;
if (t == 1) {
s = '';
} else {
s = 's';
}
if (i + 1 == 1) {
iPlusOne = '';
ss = '';
} else {
iPlusOne = i + 1;
ss = 's';
}
return `${t} head${s} in first ${iPlusOne} flip${ss}`;
})
.nodes()
.forEach(tippy);
}