Published
Edited
May 24, 2018
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
L = ([a, b]) => [a + b, b]
Insert cell
R = ([a, b]) => [a, a + b]
Insert cell
binary_to_fraction = function (int) {
const [a, b] = int
.toString(2)
.slice(1)
.split('')
.reduce(
(s,v) => [R, L][+v](s),
[1, 1]);
return a / b;
}
Insert cell
Insert cell
Insert cell
data = [...Array(1<<(n+1)).keys()]
.map(binary_to_fraction)
.slice(1)
.sort((a,b) => a-b)
.slice(0, (1<<n)-1)
Insert cell
plot = {
const height = width;
const svg = d3.select(DOM.svg(width, height))
const margin = 10;
const y = d3.scaleLinear().domain([0, 1]).range([height-margin, margin])
const x = d3.scaleLinear().domain([0, 1]).range([margin, width-margin])

const reference = svg.append('path')
.attr("stroke", "#aaa").attr("stroke-width", 0.4)
.attr('d', `M${x(0)},${y(0)}L${x(1)},${y(1)}`);
const point = svg.append("g").selectAll("circle")
.data(data)
.enter().append("circle")
.attr("r", .3).attr("fill", 'black')
.attr("cy", (d, i) => y(i / (1<<n) + 1/(1<<(n+1))))
.attr("cx", (d, i) => x(d));

const endpoints = svg.append("g").selectAll("circle")
.data([[0,0],[1,1]])
.enter().append("circle")
.attr("r", .3).attr("fill", 'black')
.attr("cx", d=>x(d[0]))
.attr("cy", d=>y(d[1]));
return svg;
}
Insert cell
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