Published
Edited
Mar 24, 2021
3 forks
Importers
4 stars
Insert cell
Insert cell
Insert cell
Insert cell
// A global object keep track of the flips.
flips = ({ flips: d3.range(20).map(d3.randomBernoulli(0.5)), n: 20, p: 0.5 })
Insert cell
// Try to fill the space with small windows a bit better.
the_width = {
let the_width;
if (width < 801) {
the_width = width;
} else {
the_width = 0.7 * width;
}
//the_width = 0.8 * the_width;
return the_width;
}
Insert cell
// Initial setup
setup = make_pic()
Insert cell
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);
}
Insert cell
d3 = require('d3-selection@1', 'd3-array@2', 'd3-random@2', 'd3-format@1')
Insert cell
import { slider } from "@jashkenas/inputs"
Insert cell
import { plotter } from '@kjerandp/plotter'
Insert cell
tippy = require("https://unpkg.com/tippy.js@2.5.4/dist/tippy.all.min.js")
Insert cell
arr = [1, 2, 3, 4, 5, 6]
Insert cell
arr.slice(0, 3)
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