big_svg = {
const circleHeight = 200
const height = styles.length * circleHeight;
const svg = DOM.svg(width, height);
const circles4 = [[1/3, "#ff0000"],[1/2, "#00ff00"],[2/3, "#0000ff"]]
let yArray = Array.from(styles.keys()).map((y) => 100+(y*circleHeight))
let y = d3.scaleOrdinal().domain(styles).range(yArray);
let plotArray = []
for (let i = 0; i < styles.length; i++) {
for (let j = 0; j < circles2.length; j++) {
plotArray.push({"style": styles[i],
"x": 150 + circles4[j][0] * circleHeight,
"y": y(styles[i]),
"fill": circles4[j][1]
})
}
}
d3.select(svg)
.selectAll("text")
.data(plotArray)
.enter()
.append("text")
.text((item) => item.style)
.attr("x", "10")
.attr("y", (item) => item.y)
d3.select(svg)
.selectAll("circle")
.data(plotArray)
.enter()
.append("circle")
.attr("cx", (item) => item.x)
.attr("cy", (item) => item.y)
.attr("r", circleHeight/2 - 20)
.attr("fill", (item) => item.fill)
.style("mix-blend-mode", (item) => item.style)
return svg
}