Visiting Research at NYU Shanghai; previously @ Nest, Apple, AOL; faculty @ Olin College, NYU Shanghai.
tile({ n: 4, debug: true }, [[0, 1]])
tile({ n: 5, debug: true }, [[0, 1]])
hcat(arange(5).map(i => tileSvg([[i, (i + 3) % 5]], { n: 5 })))
gallery = options =>
withBackground(
grid(createTiles({ size: (50 * 4) / (options.n || 4), ...options }), {
padding: 10
})
)
createTiles = options => {
const { halfPlanes, n, skipEdges } = { n: 4, ...options };
const connectionSets = halfPlanes
? connectionSetsWithHalfplanes(n)
: sideConnectionSets(n, skipEdges);
return connectionSets.map(pairs => tile(options, pairs));
}
createTileFactory = options => {
const { n, halfPlanes, skipEdges } = { n: 4, ...options };
const connectionSets = halfPlanes
? connectionSetsWithHalfplanes(n)
: sideConnectionSets(n, skipEdges);
return connectionSets.map(pairs => opts =>
tile({ ...options, ...opts }, pairs)
);
}
createTileFactory()[0]({ bgColor: 'red' })
tilePairsDebugString([[0, 1], [2, 3]])
tilePairsDebugString([[0, 1], [2, 3, true]])
sideConnectionSetsG = (ns, allowGaps = true) => {
function* g(ns) {
if (ns.length <= 1) {
if (ns.length === 0 || allowGaps) yield [];
return;
}
let [first, ...rest] = ns;
for (let i in rest) {
let second = rest[i];
let others = rest.filter(j => j !== second);
let pair = [first, second];
for (let l of g(others)) {
yield [pair, ...l];
}
}
if (allowGaps) yield* g(rest);
}
return g(ns);
}
sideConnectionSets = (n, allowGaps) =>
Array.from(sideConnectionSetsG(arange(n), allowGaps))
connectionSetsWithHalfplanes = {
function* g(n) {
const { mod } = modFunctions(n);
const adjustSet = d => s =>
s.map(([i, j, ...t]) => [(i + d) % n, (j + d) % n, ...t]);
yield* sideConnectionSetsG(arange(n));
for (let i = 0; i < n; i++) {
for (let d = 2; d <= n - 2; d++) {
// if (n > 5 && mod(-d) === 2) continue;
let first = [i, (i + d) % n, true];
// let interior = Array.from(g(d - 1)).map(adjustSet(i + 1));
let rests = Array.from(g(n - d - 1)).map(adjustSet(i + d + 1));
for (let rest of rests) {
yield [first, ...rest];
}
}
}
}
return n => Array.from(g(n));
}
// All the sets that include halfplanes
displayConnectionSets(
connectionSetsWithHalfplanes(4).filter(s => s.length && s[0][2])
)
// all the sets that include the first edge
displayConnectionSets(
connectionSetsWithHalfplanes(4).filter(s => s.length && s[0][0] === 0)
)
// all the sets that include the first edge and a halfplane
displayConnectionSets(
connectionSetsWithHalfplanes(6).filter(
s => s.length && s[0][0] === 0 && s.some(([i, j, hp]) => hp)
)
)
grid(
connectionSetsWithHalfplanes(6)
.filter(s => s.length && s[0][0] <= 0)
.slice(-1)
.map(pairs => tile({ n: 6, debug: true, size: 50 }, pairs))
)
connectionSetsWithHalfplanes(6)
.filter(s => s.length && s[0][0] <= 0)
.slice(-1)
// The low-level function. Use tile() instead.
// This defaults debug=true. The other defaults debug=false
tileSvg = (pairs, options) => {
// options
const { n, winged, fgColor, bgColor, debug } = {
n: 4,
fgColor: 'black',
bgColor: 'white',
debug: true,
...options
};
// utilities
const { modDistance } = modFunctions(options.n || 4);
const distance = ([x0, y0], [x1, y1]) =>
Math.sqrt((x1 - x0) ** 2 + (y1 - y0) ** 2);
const midpoint = ([x1, y1], [x2, y2]) => [(x1 + x2) / 2, (y1 + y2) / 2];
const reflect = ([x, y], [cx, cy]) => [cx - 2 * (x - cx), cy - 2 * (y - cy)];
// read or compute default size and edge length
const rawSideLength = distance(
[1, 0],
[Math.cos((2 * Math.PI) / n), Math.sin((2 * Math.PI) / n)]
);
let { edgeLength } = {
edgeLength: ((100 / rawSideLength) * 4) / n,
...options
};
let { size } = { size: edgeLength * rawSideLength, ...options };
let raw = arange(n)
.map(i => ((i + .5) / n) * 2 * Math.PI)
.map(θ => [Math.cos(θ), Math.sin(θ)]);
let rawBounds = [
Math.min(...raw.map(([x]) => x)),
Math.min(...raw.map(([_, y]) => y)),
Math.max(...raw.map(([x]) => x)),
Math.max(...raw.map(([_, y]) => y))
];
if (winged) {
const d = 1 / 3; // FIXME
rawBounds[0] -= d;
rawBounds[1] -= d;
rawBounds[2] += d;
rawBounds[3] += d;
}
const scale = size / rawSideLength;
const mapX = x => (x - rawBounds[0]) * scale;
const mapY = y => (y - rawBounds[1]) * scale;
const pa = θ => [mapX(Math.cos(θ)), mapY(Math.sin(θ))]; // angle => point
const v2a = i => (2 * Math.PI * (i + .5)) / n; // vertex index => angle
const pv = i => pa(v2a(i)); // vector index => point
// midpoint of side between vertices i and i+1
const edgeCenter = i => midpoint(pv(i), pv(i + 1));
let sideLength = distance(pv(0), pv(1));
const lineWidth = sideLength / 3;
const polyPath = arange(n)
.map(pv)
.join(' ');
const clipPathId = DOM.uid("clip");
return svg`<svg width=${mapX(rawBounds[2]) + Number(debug)} height=${mapY(
rawBounds[3]
)}
fill=none stroke=none>
<defs>
<clipPath id="${clipPathId.id}">
<polygon points="${polyPath}" />
</clipPath>
</defs>
<polygon points="${polyPath}" fill="${bgColor}"/>
<g stroke="${fgColor}" stroke-width="${lineWidth}" clip-path="${clipPathId}">
${pairs.map(([i, j, fill]) => {
if (i === j) throw "edge indices in pair must be distinct";
const m1 = edgeCenter(i);
const m2 = edgeCenter(j);
const v1 = pv(i);
const v2 = pv(j);
// could instead test whether the intersection is defined
if (2 * Math.abs(j - i) === n) {
const [x1, y1] = m1;
const [x2, y2] = m2;
const pts = [];
if (fill) {
for (let k = i; k != j; ) {
k = (k + 1) % n;
pts.push(pv(k));
}
return svg`<polygon points="${[m1, ...pts, m2].join(
' '
)}" fill="${fgColor}" stroke-width="${lineWidth}"/>`;
}
return svg`<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}"/>`;
}
let c = math.intersect(m1, v1, m2, v2);
if (fill && (j - i + n) % n > n / 2) {
const center = [mapX(0), mapY(0)];
c = reflect(c, center);
}
const [cx, cy] = c;
const r = distance(m1, c);
return svg`<circle cx="${cx}" cy="${cy}" r="${r}" fill="${
fill ? fgColor : 'none'
}"/>`;
})}
</g>
${winged &&
arange(n)
.map(pv)
.map(
([x, y]) =>
svg`<circle cx="${x}" cy="${y}" r="${lineWidth}" fill="${bgColor}"/>`
)}
${winged &&
arange(n)
.map(edgeCenter)
.map(
([x, y]) =>
svg`<circle cx="${x}" cy="${y}" r="${lineWidth /
2}" fill="${fgColor}" />`
)}
${debug &&
svg`<polygon points="${polyPath}" stroke="blue" stroke-dasharray="4"/>`}
</svg>`;
}
tileSvg([[0, 2, true]], { n: 4 })
tileSvg([[1, 2]], { n: 3 })
arange = (a, b) =>
b === undefined
? Array(a)
.fill(0)
.map((_, i) => i)
: Array(b - a)
.fill(0)
.map((_, i) => a + i)
arange(5)
arange(5,10)
iterMap = (iter, fn) => Array.from(iter).map(fn)
iterMap([0, 1], n => n + 1)
stringify = JSON.stringify
modFunctions = n => {
const mod = i => ((i % n) + n) % n;
const modDistance = (a, b = 0) => Math.min(mod(b - a), n - mod(b - a));
return { mod, modDistance };
}
{
const { mod } = modFunctions(4);
return [-4, -1, 0, 3, 4, 5, 9].map(mod).toString() === "0,3,0,3,0,1,1";
}
{
const { modDistance } = modFunctions(4);
return [[0, 5], [5, 0], [-1, 4], [4, -1]].map(ns => modDistance(...ns));
}
[[0, 2]].map(([a, b]) => {
let { modDistance } = modFunctions(3);
return `|${a}-${b}| = ${modDistance(a, b)}`;
})
[[0, 1], [0, 2], [0, 3], [0, 4], [4, 0]].map(([a, b]) => {
let { modDistance } = modFunctions(5);
return `|${a}-${b}| = ${modDistance(a, b)}`;
})
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.