I am a very very creative app but it seems to have work hard and it doesn't even open. (written using predictive text)
viewof highlightPrimes = Inputs.toggle({ label: "Highlight Prime" })
viewof selectedPrime = Inputs.select(
["", ..._.takeWhile(primes, (p) => p < drawLimit)],
{ label: "Highlight Prime" }
)
{
let width = 20;
let height = 50;
return html`
<div style="display:flex; overflow: scroll;">
${_.range(1, drawLimit).map((n) => {
let factors = [...allPrimeFactors[n]];
factors.reverse();
return html`
<div style="display: flex; flex-direction: column; justify-content: flex-end;">
${factors.map((f) => {
let color = getColor(f, Math.log2(drawLimit));
let opacity = 1;
if (highlightPrimes && factors.length !== 1) {
let hsl = d3.hsl(color);
hsl.s *= 0.25;
color = d3.color(hsl).toString();
opacity = 0.25;
} else if (selectedPrime && f !== +selectedPrime) {
let hsl = d3.hsl(color);
hsl.s *= 0.25;
color = d3.color(hsl).toString();
opacity = 0.25;
}
return html`<div class="log-bar" style="
transition: opacity 250ms ease-in-out;
height:${height * Math.log2(f)}px;
width:${width}px;
font-size: 12pt;
background-color: ${color};
border: .5px solid white;
opacity: ${opacity};
text-align: center;
color: white;
writing-mode: vertical-lr;
box-sizing: border-box;">
${f}
</div>`;
})}
</div>
`;
})}
</div>
`;
}
function getColor(n, max) {
let theta = frac(Math.log2(n));
let shade = 1 - Math.log2(n) / (max);
return `lch(${100 * shade}% 100 ${-25 + theta * 360})`;
}
function frac(x) {
return x - Math.floor(x);
}
scale = {
let maxPrime = primes.find((p) => p > drawLimit);
return (p) => {
return d3.interpolateSpectral(Math.log2(p) / Math.log2(maxPrime));
};
}
drawLimit = 2 ** 10
scheme = [
...d3.schemeCategory10,
...d3.schemeTableau10,
...d3.schemeObservable10,
...d3.schemeSet1,
...d3.schemeSet2,
...d3.schemeSet3
]
primeIndexes = {
let indexes = {};
for (let i = 0; i < primes.length; i++) {
indexes[primes[i]] = i;
}
return indexes;
}
_.range(0, 17).map((n) => n / 16)
primes.filter((p) => p < 32).map((p) => ({ p, log: 2 * Math.log2(p) }))
primes.filter((p, i) => p - primes[i - 1] === primes[i + 1] - p)
Plot.plot({
marks: [Plot.dot(primeSums, { x: "p", y: "smallest", tip: true })]
})
// Plot.plot({
// marks: [Plot.dot(numberSums, { x: "n", y: "smallest", tip: true })]
// })
primeSums = _.take(primes, 2000).map((n) => ({
p: n,
smallest: smallestSmoothnessSum(n)
}))
// numberSums = _.range(1000).map((n) => ({
// n,
// smallest: smallestSmoothnessSum(n)
// }))
// _.range(1000)
// .map((n) => {
// let smallest = numberSums[n].smallest;
// let factors = _.uniq(allPrimeFactors[n]);
// let primeSmallest = factors.map((p) => numberSums[p].smallest);
// return {
// n,
// smallest,
// primeSmallest
// };
// })
// .filter((data) => data.primeSmallest.every((p) => p > data.smallest))
function smallestSmoothnessSum(n) {
let largest = Infinity;
for (let i = 1; i < n / 2; i++) {
let j = n - i;
let iFactors = _.uniq(allPrimeFactors[i]);
let jFactors = _.uniq(allPrimeFactors[j]);
let iLargest = _.max(_.union(iFactors, jFactors));
largest = Math.min(largest, iLargest);
}
return largest;
}
Plot.plot({
axis: null,
margin: 20,
marginRight: 120,
height: 1500,
marks: [
Plot.tree(binaryPrimes, {
path: "path",
text: (d) => d?.p,
fill: (d) => (d ? "red" : "black"),
stroke: "black"
})
]
})
binaryPrimes = _.takeWhile(primes.slice(1), (p) => p < 2 ** 10).map((p) => ({
path: digits(p, 2).join("/"),
p
}))
function digits(n, radix) {
let digits = [];
while (n !== 0) {
digits.push(n % radix);
n = Math.floor(n / radix);
}
return digits;
}
allPrimeFactors = primeFactors(limit)
limit = 2 ** 16
import { primes, primeFactors } from "@tesseralis/math"
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.
