colorMatrix = {
const svg = d3.create('svg').attr("viewBox", [0, 0, layout.width, layout.height]);
const g = svg.append('g').attr('id', 'global-group')
.attr('transform', `translate(${layout.margin.left},${layout.margin.top})`);;
const frames = g.selectAll('g')
.data(colorArray_Categorical_bySource)
.join('g')
.attr('data-color-type',d=>d[0])
.attr('transform',(d,n) => {
let position = getPosition(n, layout.horizontalNumber)
return `translate(${position[0]*(layout.frameWidth + layout.gutter)},${position[1]*(frameHeight + layout.gutter)})`
})
if(withFrame){
frames.append('rect')
.attr('width',layout.frameWidth)
.attr("height", frameHeight)
.attr("fill", "none")
.attr("stroke", "#E9E9E9")
}
frames.append('text')
.attr('transform',`translate(${layout.frameWidth/2},${-16})`)
.text(d=>d[0])
.style("font", "12px sans-serif")
.style("font-weight", '500')
.style("text-anchor","middle")
let centeredg = frames.append('g').attr('class','plot-g')
.attr('transform', `translate(${radius},${radius})`)
let plotg = centeredg.append('g').attr('class','color-plot-g')
let colorDots = plotg.selectAll('circle')
.data(d=>d[1].slice(0, firstN))
.join('circle')
.attr("r", 5)
.attr("fill", d => d['Hex'])
.attr('cx', d => {
if(RValue=='chroma'){
return scaleChromaR(chroma_okhcl(d['Hex'])[RValue])
}else if(RValue=='lightness'){
return scaleLightnessR(chroma_okhcl(d['Hex'])[RValue])
}
})
.attr('transform', d => {
return `rotate(${scaleHueY(chroma_okhcl(d['Hex'])['hue'])})`
})
centeredg.call(rAxis);
centeredg.call(xAxis);
return svg.node()
}