Public
Edited
Feb 28, 2024
1 fork
3 stars
largesvg(spiralNrNoMax,(x,y)=>rainbowColor(spiralNrNoMax(x,y)-frame/20))
function lapPos(x,y) {
/*EAST*/ if (y<x && -x<y) return x +y -1;
/*NORTH*/ if (x<=y && -x<y) return -x +3*y -1;
/*WEST*/ if (x<=y && y<=-x) return -5*x -y -1;
/*SOUTH*/ if (y<x && y<=-x) return x -7*y -1;
}
function spiralNrAsSum(x,y) {
let pos;
if (y<x && -x<y) pos = x +y -1;
if (x<=y && -x<y) pos = -x +3*y -1;
if (x<=y && y<=-x) pos = -5*x -y -1;
if (y<x && y<=-x) pos = x -7*y -1;
const lap = Math.max(Math.abs(x), Math.abs(y));
return 4*lap*lap -4*lap + 1 + pos;
}
function spiralNrSimplified(x,y) {
let pos;
if (y<x && -x<y) pos = -3*x +y;
if (x<=y && -x<y) pos = -x -y;
if (x<=y && y<=-x) pos = -x -y;
if (y<x && y<=-x) pos = x -3*y;
const lap = Math.max(Math.abs(x), Math.abs(y));
return 4*lap*lap + pos;
}
function spiralNrNoMax(x,y) {
if (y<x && -x<y) return -3*x +y +4*x*x;
if (x<=y && -x<y) return -x -y +4*y*y;
if (x<=y && y<=-x) return -x -y +4*x*x;
if (y<x && y<=-x) return x -3*y +4*y*y;
}
function spiralNrThreeBranches(x,y) {
let pos;
if (y<x && -x<y) pos = -3*x +y;
if (x<=y) pos = -x -y;
if (y<x && y<=-x) pos = x -3*y;
return 4*Math.max(x*x, y*y) + pos;
}
function derivingBranchless(x,y) {
const se = y<x;
const sw = y<=-x;
// second branch + first branch + third branch
const pos1 = !se * (-x-y) + (se&&!sw)*(-3*x+y) + (se&&sw)*(x-3*y);
// simplifying in several steps (pos1 through pos5 are equivalent)
const pos2 = (1-se)*(-x-y) + se*(1-sw)*(-3*x+y) + se*sw*(x-3*y);
const pos3 = -x -y +se*x +se*y -3*se*x +se*y +3*se*sw*x -se*sw*y + se*sw*x -3*se*sw*y;
const pos4 = -x -y -2*se*x +2*se*y +4*se*sw*x -4*se*sw*y;
const common = -2*se + 4*se*sw;
const pos5 = (common-1)*x - (common+1)*y;
return 4*Math.max(x*x,y*y) + pos5;
}
function spiralNrBranchless(x,y) {
const se = y<x;
const sw = y<=-x;
const common = -2*se + 4*se*sw;
return 4*Math.max(x*x,y*y) + (common-1)*x - (common+1)*y;
}
lap = (x,y) => Math.max(Math.abs(x),Math.abs(y))
showLap = (x,y) => laps.includes(lap(x,y));
rainbowColor = (nr) => d3.color(d3.interpolateRainbow((nr%20/20))).formatHex()
rainbowLighter = (nr) => d3.color(d3.interpolateRainbow((nr%20/20))).brighter(1).formatHex()
visibleLapStart = (x,y) => showLap(x,y) ? (2*lap(x,y)-1)**2 : undefined
lapStartColors = l => [rainbowColor([13,15,17,19,21][l]),rainbowLighter([13,15,17,19,21][l]),'#eeeeee']
visibleLcolor = (x,y) => lapStartColors(lap(x,y))[showLap(x,y) ? 0 : lap(x,y) < Math.max(...laps) ? 1 : 2]
visibleLapPos = (x,y) => showLap(x,y) ? lapPos(x,y) : undefined;
lapPosColors = q => [rainbowColor([1,4,6,8][q]),rainbowLighter([2,4,6,8][q])]
eastColors = (x,y) => (y<x && -x<y) ? lapPosColors(0) : undefined;
northColors = (x,y) => (x<=y && -x<y) ? lapPosColors(1) : undefined;
westColors = (x,y) => (x<=y && y<=-x) ? lapPosColors(2) : undefined;
southColors = (x,y) => (y<x && y<=-x) ? lapPosColors(3) : undefined;
noColors = () => ['#eeeeee','#eeeeee'];
visibleQcolor = (x,y) => [...qcolors,noColors].map(f => f(x,y)).filter(c => c)[0][showLap(x,y)?0:1];
function cell(text,fcolor,bcolor,fontsize) {
const textAttrs = {
'font-family':'Abril Fatface',
'font-size':`${fontsize}px`,
fill:fcolor,
'text-anchor':'middle',
'dominant-baseline':'middle'
};
return svgt`<rect x="${0}" y="${.9}" ${""} width="${.9}" height="${-.9}${0}${0}" ${{fill:bcolor}}></rect>
<text x="${0.45}" y="${0.45}" ${textAttrs}>${text}</text>`
}
function grid(size,fontsize,getNumber,getColor) {
const start = -Math.floor(size/2);
const end = start+size;
const cellxy = (x,y) => translate([x,y,0],cell(''+(getNumber(x,y)??''),'#ffffff',getColor(x,y),fontsize))
const cells = d3.range(start,end).flatMap(x => d3.range(start,end).map(y => cellxy(x,y)));
const xAxis = d3.range(start,end).map(x => translate([x,start-1,0],cell(''+x,'#aaaaaa','#ffffff',0.8*fontsize)));
const yAxis = d3.range(start,end).map(y => translate([start-1,y,0],cell(''+y,'#aaaaaa','#ffffff',0.8*fontsize)));
return g(...cells,...xAxis,...yAxis);
}
largesvg = (getNumber,getColor) => svgtBox(scale(1/5,grid(9,20,getNumber,getColor)), 350, 350)
smallsvg = (getNumber,getColor) => svgtBox(scale(1/5,grid(9,16,getNumber,getColor)), 250, 250)
import {svgt, scale, g, translate, svgtBox} from '@sanderevers/svg-transformations'
import {Scrubber} from "@mbostock/scrubber"
html`<style>
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
</style>`
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.
