poptimal/poptimal.js

import jsdom from "jsdom";
import * as d3 from "d3";

const { JSDOM } = jsdom;

const xmlns = "http://www.w3.org/2000/xmlns/";
const xlinkns = "http://www.w3.org/1999/xlink";
const svgns = "http://www.w3.org/2000/svg";

const window = new JSDOM().window;

const document = window.document;


import {RADIUS_OPTS, DotMaker} from './src/components/dots.js';
//import {PALETTES, DotControls} from './src/components/controls.js';

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





function poptimal() {
	const container = d3.select(document.body).append("div");

	const dm = new DotMaker(WIDTH);

	const m1 = 2;
	const m2 = 3;
	const n1 = 4;
	const n2 = 5;
	const bg = "#ffffff";
	const fg1 = "#ff0000";
	const fg2 = "#000000";
	const f1 = "in";
	const f2 = "noise";
	const r1 = 0.5;
	const r2 = 0.19;

	const dots1 = dm.dots(1 / m1, n1);
	const dots2 = dm.dots(1 / m2, n2);


	const svg = container.append("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);
  
	const node = svg.node();

  	node.setAttributeNS(xmlns, "xmlns", svgns);
  	node.setAttributeNS(xmlns, "xmlns:xlink", xlinkns);
  	const serializer = new window.XMLSerializer;
  	console.log(serializer.serializeToString(node));

//	console.log(download_as_svg(svg));
}

poptimal();