poptimal/src/index.md

toc
false

poptimal

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}));

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"}));

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;
  }
}

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());