add color on count

components/content/ArticleSystemDistributionPlot.vue

@@ -49,7 +49,7 @@ const computedDistribution = computed(() => {
         // group per selected taxo rank and accession
         const itemsPerGroup = d3.rollup(toValSystemHits.hits, D => D.length, d => d[toValSelectedTaxoRank], d => d.Assembly)
         console.log(itemsPerGroup)
-        if (toValSelectedTaxoRank === "order"){
+        if (toValSelectedTaxoRank === "order") {
             console.log(itemsPerGroup.get("Oscillatoriales"))
         }
         const distribution = []
@@ -96,6 +96,7 @@ const distributionOptions = computed(() => {
         marginRight: marginRight.value,
         y: { label: `% of genomes encoding ${toValue(page)?.title ?? 'the system'}` },
         x: { label: selectedTaxoRank.value, tickRotate: 45 },
+        color: { scheme: "plasma", legend: true, domain: [0, 100] },
         width: computedWidth.value - marginRight.value,
         marks: [
             Plot.barY(
@@ -103,6 +104,7 @@ const distributionOptions = computed(() => {
                 {
                     y: "size",
                     x: "taxo",
+                    fill: "size",
                     tip: true,
                     sort: { x: "-y" },
                 },