68 lines
1.2 KiB
JavaScript
68 lines
1.2 KiB
JavaScript
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
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();
|