I don’t think I am doing this the most elegant way as it’s not following the functional programming pattern. I have ported the core into observable from JS.
I have two scales, First is a scaleQuantize() that converts the number sectors in a circle into 4 quadrants and assigns a common colour to each quadrant.
The second is a scaleLinear() that takes that colour and based on the ring it is in darkens it to black.
This is very ugly and I am hoping there is a better way to do this.
function QC (sector, ring) {
let QuadColour = d3.scaleQuantize()
.domain([0, teTracks[ring].sectors.length])
.range(['#f8e862', '#5cd516', '#1b50ca', '#b987d9']);
let QuadRingColour = d3.scaleLinear()
.domain([0, 4])
.range([QuadColour(sector), "black"]); // domain is 4 as we dont want it to be black
return QuadRingColour(teTracks[ring].ring)
}