📜JavaScript developer.
🐲RPG fan.
📚Storyteller and 🕹game developer.
👨Father and Husband.
function index2coords(index, length) {
const x = index % length;
const y = (index - x) / length;
return [x, y];
}
function getColor(x, y, cols) {
const center = [cols / 2, cols / 2];
const dist = distance(x, y, ...center);
const rUV = math.inverseLerp(0, maxDistance, dist);
const opacity = Math.max(1 - rUV, 0.05);
const hue = math.lerp(260, 80, rUV);
return `hsla(${hue} 80% 40% / ${opacity})`;
}
maxDistance = distance(0, 0, cols / 2, cols / 2)
0 == index2coords(3, 3)?.[0] && 1 == index2coords(3, 3)?.[1]
styles = htl.html`<style>
.viewport {
--border-color: #ddd;
--border-width: 1px;
width: ${viewportSize}px;
height: ${viewportSize}px;
background-color: var(--border-color);
overflow: auto;
border: var(--border-width) solid var(--border-color);
}
.grid {
display: grid;
grid-template-columns: repeat(${cols}, ${cellSize}px);
grid-template-rows: repeat(${cols}, ${cellSize}px);
gap: var(--border-width);
}
.cell {
background-color: white;
}
.cell {
display: grid;
place-items: center;
scroll-snap-align: start end;
}
.cell--dot::before {
content: '';
background-color: var(--dot-fill, red);
border-radius: 50%;
position: sticky;
inset: 0;
width: calc(var(--cell-size) * .333);
aspect-ratio: 1;
}
.main {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.main p {
margin-top: 0;
}
</style>`
viewportSize = Math.min(width, 480)
extend = 2
cellSize = viewportSize / visibleCols
cols = visibleCols * 3
import { distance } from "@saneef/helper-functions-geometry"
import { CSMath as math } from "@saneef/canvas-sketch-util"
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.
