add left margin for example

components/content/ArticleSystemDistributionPlot.vue

@@ -4,10 +4,23 @@ import * as d3 from "d3";
 import * as Plot from "@observablehq/plot";
 import { useDisplay } from "vuetify";
 
+export interface PlotMargin {
+    marginTop: number,
+    marginRight: number,
+    marginBottom: number,
+    marginLeft: number
+}
+
+const margin = ref<PlotMargin>({
+    marginTop: 50,
+    marginRight: 50,
+    marginBottom: 100,
+    marginLeft: 40
+
+})
 const { width } = useDisplay();
 const systemHits = ref(undefined)
 const refseqTaxo = ref(undefined)
-const marginRight = ref(50)
 const selectedTaxoRank = ref("phylum")
 const taxoRanks: Ref<string[]> = ref([
     "species",
@@ -86,13 +99,13 @@ const systemStatistics = computed(() => {
 })
 
 const distributionOptions = computed(() => {
+    const { marginLeft, marginRight } = toValue(margin)
     return {
-        marginBottom: 100,
-        marginRight: marginRight.value,
+        ...toValue(margin),
         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,
+        color: { scheme: "plasma", legend: true, domain: [0, 100], marginLeft: 10 },
+        width: computedWidth.value - marginRight - marginLeft,
         marks: [
             Plot.barY(
                 toValue(computedDistribution),