import * as jsdom from "jsdom";

const { JSDOM } = jsdom;


const document = new JSDOM().window.document;



import * as d3 from "d3";

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;




//d3.select(document.body).append("div");

function poptimal() {

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

	console.log(svg);
}

poptimal();