add threshold color when below 0.3

components/content/pdockqMatrix.vue

@@ -108,8 +108,12 @@ const groupedPdocks = computed(() => {
     } else { return [] }
 })
 
-
 const computedPDocksMatrixPlotOptions = computed(() => {
+    const domain = [0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9]
+    const scaleLinear = d3.scaleLinear([0.3, 0.9], [1, 0])
+    const range = domain.map(d => {
+        return d3.interpolatePlasma(scaleLinear(d))
+    })
     const { marginBottom, marginLeft, marginRight, marginTop } = toValue(margin)
     return toValue(groupedPdocks).map((matrix) => {
         return {
@@ -126,7 +130,7 @@ const computedPDocksMatrixPlotOptions = computed(() => {
             x: { axis: "top", label: "Protein on x", tickRotate: 45 },
             y: { label: "Proteins on y" },
             legend: { label: matrix[0] },
-            color: { scheme: "plasma", legend: true, reverse: true, domain: [0, 1] },
+            color: { type: "threshold", domain: [0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1], range: ["lightgrey", ...range], legend: true },
             marks: [
                 // Plot.frame(),
                 on(Plot.cell(toValue(matrix[1]), {