here to learn
Published unlisted
Edited
Dec 6, 2019
txt = (await (await fetch(
'https://gist.githubusercontent.com/bryangingechen/e666d26ed3842b459184441cc99dfcab/raw/09124678dce6c7e0164affde90302b8e2c7a701e/2019%2520day%252006'
)).text()).slice(0, -1)
function makeGraph(s) {
const edges = txt
.split('\n')
.map(l => l.match(/(\w+)\)(\w+)/))
.map(([, v1, v2]) => [v1, v2]);
const verts = {};
for (const [v1, v2] of edges) {
if (!verts[v1]) {
verts[v1] = { name: v1, children: [] };
verts[v1].parent = null;
}
if (!verts[v2]) {
verts[v2] = { name: v2, children: [] };
}
verts[v2].parent = verts[v1];
verts[v1].children.push(verts[v2]);
}
let count = 0;
for (const [k, v] of Object.entries(verts)) {
let w = v;
while (w.parent) {
count++;
w = w.parent;
}
}
return { edges, verts, count };
}
part1 = makeGraph(txt)
function commonAncestor(verts, v1, v2) {
const ancestors1 = [];
let w = verts[v1];
while (w.parent) {
ancestors1.push(w);
w = w.parent;
}
w = verts[v2];
const ancestors2 = [];
while (w.parent) {
ancestors2.push(w);
if (ancestors1.includes(w)) {
ancestors2.reverse();
return {
ancestors1,
ancestors2,
path: ancestors1
.slice(1, ancestors1.indexOf(w))
.concat(ancestors2.slice(ancestors2.indexOf(w), -1))
};
}
w = w.parent;
}
}
part2 = commonAncestor(part1.verts, 'YOU', 'SAN')
data = part1.verts.COM
chart
dist = 0
str = 1.5
import { chart } with { data, dist, str } from '61ff1d3df08e156a'
radialChart
import { chart as radialChart } with { data } from '@d3/radial-tidy-tree'
dy = width / 360
import { graph, d3 } with { dy } from '@d3/d3-hierarchy'
graph(d3.hierarchy(data), {
label: d => d.data.name,
highlight: d =>
path.has(d.data.name) || d.data.name == 'YOU' || d.data.name == 'SAN',
marginLeft: 0
})
path = new Set(part2.path.map(d => d.name))
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.
