bombinans
/
poptimal
1
0
Fork 0
Code Issues 9 Pull Requests Packages Projects 1 Releases Wiki Activity

Two-column interface which is gorgeously broken

rc-1.0.0
Mike Lynch 2025-01-05 18:02:23 +11:00
parent d1bff0adf7
commit a23e12af40
2 changed files with 40 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/dots.js
View File

@ -17,4 +17,6 @@ export function make_dots(m, n, cell, max) {
}
}
return ps;
}
}

43
src/index.md
View File

@ -4,9 +4,13 @@ toc: false
<h1>poptimal</h1>
<div class="grid grid-cols-2">
<div class="card">
```js
import {make_dots} from './components/dots.js'
import {make_dots, dot_func} from './components/dots.js'
const CELL = 10;
const WIDTH = 20;
@ -16,6 +20,8 @@ const bg = view(Inputs.color({label: "background", value: d3.color("yellow").for
const fg1 = view(Inputs.color({label: "fg1", value: d3.color("red").formatHex()}))
const m1 = view(Inputs.range([1, 5], {value: 2, step: 1, label:"m1"}));
const n1 = view(Inputs.range([1, 5], {value: 2, step: 1, label:"n1"}));
const r1 = view(Inputs.range([0, 0.5], {value: 0.3, step: 0.01, label: "radius"}));
const f1 = view(Inputs.radio(["constant", "right", "left", "up", "down"], {value: "constant"}));
const v2 = view(Inputs.toggle({label: "Second grid", value:true}));
@ -27,19 +33,42 @@ const v2 = view(Inputs.toggle({label: "Second grid", value:true}));
const fg2 = view(Inputs.color({
label: "fg2", value: d3.color("blue").formatHex(),
disabled: !v2
}))
}));
const m2 = view(Inputs.range([1, 5], {value: 2, step: 1, label:"m2", disabled: !v2}));
const n2 = view(Inputs.range([1, 5], {value: 2, step: 1, label:"n2", disabled: !v2}));
const m2 = view(Inputs.range([1, 5], {value: 1, step: 1, label:"m2", disabled: !v2}));
const n2 = view(Inputs.range([1, 5], {value: 3, step: 1, label:"n2", disabled: !v2}));
const r2 = view(Inputs.range([0, 0.5], {value: 0.2, step: 0.01, label: "radius"}));
const f2 = view(Inputs.radio(["constant", "right", "left", "up", "down"], {value: "constant"}));
```
</div>
<div>
```js
const dots1 = make_dots(1 / m1, n1, CELL, WIDTH)
const dots2 = v2 ? make_dots(1 / m2, n2, CELL, WIDTH) : []
function radius_func(d, func, maxr) {
switch (func) {
case "constant":
return maxr;
case "right":
return maxr * d.x / WIDTH;
case "left":
return maxr * (WIDTH - d.x) / WIDTH;
case "up":
return maxr * d.y / WIDTH;
case "down":
return maxr * (WIDTH - d.y) / WIDTH;
default:
return maxr;
}
}
```
```js
@ -64,7 +93,7 @@ const dots_g1 = svg.append("g")
dots_g1.selectAll("circle")
.data(dots1)
.join("circle")
.attr("r", 0.2)
.attr("r", (d) => radius_func(d, f1, r1))
.attr("fill", fg1)
.attr("cx", (d) => d.x)
.attr("cy", (d) => d.y);
@ -75,7 +104,7 @@ const dots_g2 = svg.append("g")
dots_g2.selectAll("circle")
.data(dots2)
.join("circle")
.attr("r", 0.2)
.attr("r", (d) => radius_func(d, f2, r2))
.attr("fill", fg2)
.attr("cx", (d) => d.x)
.attr("cy", (d) => d.y);
@ -87,6 +116,8 @@ display(svg.node());
```
</div>
</div>
<style>