---
toc: false
---

<h1>poptimal</h1>

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

  <div class="card">

```js

import {RADIUS_OPTS, DotMaker} from './components/dots.js'

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

const dm = new DotMaker(WIDTH);


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.select(RADIUS_OPTS, {value: RADIUS_OPTS[0]}));


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.select(RADIUS_OPTS, {value: RADIUS_OPTS[0]}));


```

</div>
<div>


```js

const dots1 = dm.dots(1 / m1, n1)
const dots2 = v2 ? dm.dots(1 / m2, n2) : []


```
  
```js


const svg = d3.create("svg")
  .attr("width", WIDTH * CELL * MAG)
  .attr("height", HEIGHT * CELL * MAG)
  .attr("viewBox", [ 0, 0, WIDTH, HEIGHT ]);

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

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

dots_g1.selectAll("circle")
  .data(dots1)
  .join("circle")
  .attr("r", (d) => dm.radius(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) => dm.radius(d, f2, r2))
  .attr("fill", fg2)
  .attr("cx", (d) => d.x)
  .attr("cy", (d) => d.y);



display(svg.node());


```

</div>
</div>

<style>


</style>