Published
Edited
Jun 19, 2022
1 fork
labels = ({
n: "Beauty",
s: "Good",
e: "Truth",
w: "Economy"
})
tetrahedron = {
const nodes = path => path.map(({x, y, name, c}) => `
<g transform="translate(${x} ${y})">
<circle r=${scale} stroke=black fill=${c} />
<text x=0 y=0 textLength=${1.3*scale} lengthAdjust=spacingAndGlyphs dominant-baseline=middle>${labels[name]}</text>
</g>`)
const edges = path => pairs(path).map(([tail, head]) => {
return ``
})
return (path) => svg`
<svg viewBox="-${5*scale} -${5*scale} ${10*scale} ${10*scale}">
<style>text {font: ${scale}rem; text-anchor: middle;}</style>
${nodes(path)}
${edges(path)}
</svg>`
}
sequence = {
const nodes = path => path.map(({o, x, y, name, c}) => {
return svg`
<g transform="translate(${o*scale*2.2} 0)">
<circle r=${scale} stroke=black fill=${c} />
<text x=0 y=0 textLength=${1.3*scale} lengthAdjust=spacingAndGlyphs dominant-baseline=middle>${labels[name]}</text>
</g>`
})
const edges = path => pairs(path).map(([tail, head]) => {
return ``
})
return (path) => svg`
<svg viewBox="-${5+scale} -${5+scale} ${5+4*scale*2.2} ${2*(5+scale)}">
<style>text {font: ${scale}rem; text-anchor: middle;}</style>
${nodes(path)}
${edges(path)}
</svg>`
}
scale = 20
paths = {
// thanks https://gist.github.com/CrossEye/f7c2f77f7db7a94af209
const permutations = (tokens, subperms = [[]]) =>
R.isEmpty(tokens)
? subperms
: R.addIndex(R.chain)((token, idx) => permutations(
R.remove(idx, 1, tokens),
R.map(R.append(token), subperms)
), tokens);
const nodes = [
{o: 0, x: 0, y: -2*scale},
{o: 1, x: 0, y: 2*scale},
{o: 2, x: 2*scale, y: 0},
{o: 3, x: -2*scale, y: 0}
]
const colors = d3.schemeTableau10
return permutations(nodes).map(([N, S, E, W]) => [
{...N, c: colors[0], name: "n"},
{...S, c: colors[1], name: "s"},
{...E, c: colors[2], name: "e"},
{...W, c: colors[3], name: "w"}
] )
}
function pairs(tokens) {
const result = [], max = tokens.length - 1
tokens.forEach((left, i) => {
for (let j = max; i < j; j--) {
const right = tokens[j]
result.push([left, right])
result.push([right, left])
}
})
return result
}
R = require("//cdnjs.cloudflare.com/ajax/libs/ramda/0.27.1/ramda.min.js")
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.
