poptimal/src/index.md

---
toc: false
---

<h1>poptimal</h1>

<div class="grid grid-cols-2">

  <div class="card">

```js

import {make_dots, dot_func} from './components/dots.js'

const CELL = 10;
const WIDTH = 20;
const HEIGHT = 20;

const bg = view(Inputs.color({label: "background", value: d3.color("yellow").formatHex()}))
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}));

```

```js

const fg2 = view(Inputs.color({
  label: "fg2", value: d3.color("blue").formatHex(),
  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


const svg = d3.create("svg")
  .attr("width", WIDTH * CELL * 2)
  .attr("height", HEIGHT * CELL * 2)
  .attr("viewBox", [ 0, 0, WIDTH, HEIGHT ])
  .attr("style", "max-width: 100%; height: auto;");

const background = svg.append("rect")
  .attr("x", 0)
  .attr("y", 0)
  .attr("width", WIDTH * 20)
  .attr("height", WIDTH * 20)
  .attr("fill", bg);

const dots_g1 = svg.append("g")
  .attr("id", "dots1");

dots_g1.selectAll("circle")
  .data(dots1)
  .join("circle")
  .attr("r", (d) => radius_func(d, f1, r1))
  .attr("fill", fg1)
  .attr("cx", (d) => d.x)
  .attr("cy", (d) => d.y);

const dots_g2 = svg.append("g")
  .attr("id", "dots2");

dots_g2.selectAll("circle")
  .data(dots2)
  .join("circle")
  .attr("r", (d) => radius_func(d, f2, r2))
  .attr("fill", fg2)
  .attr("cx", (d) => d.x)
  .attr("cy", (d) => d.y);



display(svg.node());


```

</div>
</div>

<style>

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--sans-serif);
  margin: 4rem 0 8rem;
  text-wrap: balance;
  text-align: center;
}

.hero h1 {
  margin: 1rem 0;
  padding: 1rem 0;
  max-width: none;
  font-size: 14vw;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(30deg, var(--theme-foreground-focus), currentColor);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero h2 {
  margin: 0;
  max-width: 34em;
  font-size: 20px;
  font-style: initial;
  font-weight: 500;
  line-height: 1.5;
  color: var(--theme-foreground-muted);
}

@media (min-width: 640px) {
  .hero h1 {
    font-size: 90px;
  }
}

</style>