diff --git a/content/5.gb.md b/content/5.gb.md
new file mode 100644
index 0000000000000000000000000000000000000000..79737db29b87913953702202decf864b6ac8205a
--- /dev/null
+++ b/content/5.gb.md
@@ -0,0 +1,7 @@
+---
+layout: article
+navigation: 
+---
+
+
+# test
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 98aed1fc5a29a47dc81782ecacd4bec5125d6bdb..f17cc673334e4267de1fef6cd9a713fb19df1118 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
       "dependencies": {
         "@observablehq/plot": "^0.6.11",
         "@pinia/nuxt": "^0.4.11",
+        "d3": "^7.8.5",
         "d3-dsv": "^3.0.1",
         "d3-fetch": "^3.0.1",
         "meilisearch": "^0.35.0",
@@ -2661,7 +2662,8 @@
     },
     "node_modules/d3": {
       "version": "7.8.5",
-      "license": "ISC",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.8.5.tgz",
+      "integrity": "sha512-JgoahDG51ncUfJu6wX/1vWQEqOflgXyl4MaHqlcSruTez7yhaRKR9i8VjjcQGeS2en/jnFivXuaIMnseMMt0XA==",
       "dependencies": {
         "d3-array": "3",
         "d3-axis": "3",
diff --git a/package.json b/package.json
index 4fcdc51d90f328d44c6661b53b5b5df1d938bd9f..1540f4af384e42298a05a728f502bdf12f15f9c5 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
   "dependencies": {
     "@observablehq/plot": "^0.6.11",
     "@pinia/nuxt": "^0.4.11",
+    "d3": "^7.8.5",
     "d3-dsv": "^3.0.1",
     "d3-fetch": "^3.0.1",
     "meilisearch": "^0.35.0",
diff --git a/pages/gb.vue b/pages/gb.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d49f141692b4cbe11cac8ab34f1f8ef5589a2d3b
--- /dev/null
+++ b/pages/gb.vue
@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import * as d3 from "d3";
+
+const data = ref([
+    { start: 20, end: 30, strand: 1, name: "toto" },
+    { start: 40, end: 55, strand: -1, name: "tata moins" },
+    { start: 38, end: 59, strand: 1, name: "tata plus" },
+    { start: 65, end: 95, strand: 1, name: "foo" }
+])
+const width = ref(1280)
+const height = ref(200)
+
+
+const geneOptions = { x0: 'start', x1: 'end', y: 'strand' }
+const svgRef = ref(null)
+
+function drawGene(context, { width, height }) {
+    const halfHeight = height / 2
+    context.moveTo(0, 0)
+    context.lineTo(width - halfHeight, 0)
+    context.lineTo(width, halfHeight)
+    context.lineTo(width - halfHeight, height)
+    context.lineTo(0, height)
+    context.closePath()
+
+    return context
+}
+
+// const zoom = d3.zoom()
+//       .scaleExtent([0.5, 32])
+//       .on("zoom", zoomed);
+
+function draw() {
+
+    const svg = d3.select(svgRef.value);
+
+    const zoom = d3.zoom()
+        .scaleExtent([0.5, 32])
+        .on("zoom", zoomed);
+
+    const xScale = d3.scaleLinear()
+        .domain([0, 100]) // input values...
+        .range([0, width.value]); // ... output values
+
+    const yScale = d3.scaleLinear()
+        .domain([-1, 1]) // input values...
+        .range([0, height.value]); // ... output values
+
+    const computedData = computed(() => {
+        return data.value.map(gene => {
+            const width = xScale(gene.end - gene.start)
+            const height = yScale(-0.5)
+            return {
+                ...gene,
+                width,
+                height
+            }
+        })
+    })
+
+
+    let gx = svg.select("g.xaxis")
+    if (gx.empty()) {
+        gx = svg.append("g").classed("xaxis", true)
+    }
+    gx
+        .attr("transform", `translate(0,${height.value - 18})`)
+        .call(d3.axisBottom(xScale))
+
+
+    let gGenes = svg.select("g.genes")
+    if (gGenes.empty()) {
+        gGenes = svg.append("g").classed("genes", true)
+    }
+    gGenes
+        .selectAll("g.gene") // get all "existing" lines in svg
+        .data(computedData.value) // sync them with our data
+        .join(
+            enter => {
+                const g = enter.append("g")
+                    .classed("gene", true);
+                // create gene path
+                g.append("path")
+
+                    // everything after .join() is applied to every "new" and "existing" element
+                    .attr("fill", "green")
+                // create text
+                g.append("text")
+
+            },
+            update => {
+                const path = d3.path()
+
+                update
+                    .attr("transform", d => `translate(${xScale(d.start)},${d.strand < 0 ? yScale(0.25) : yScale(-0.75)})`)
+
+                update.select("path").attr("d", d => drawGene(path, d).toString())
+
+                update.select("text")
+                    .attr("x", d => xScale(d.start + 5))
+                    .attr("y", d => yScale(d.strand))
+                    .text(d => d.name)
+
+            },
+            exit => exit.remove()
+        )
+
+
+    svg.call(zoom).call(zoom.transform, d3.zoomIdentity);
+
+    function zoomed({ transform }) {
+        const zx = transform.rescaleX(xScale);
+        // console.log(zx())
+        gGenes.attr("transform", transform.applyX(zx))
+        // draw(svg)
+        gx.call(d3.axisBottom(zx));
+    }
+}
+
+onMounted(() => {
+    const svg = d3.select(svgRef.value);
+    draw()
+})
+watchEffect(() => {
+    // styling
+    const svg = d3.select(svgRef.value);
+    draw()
+
+})
+// scales: map index / data values to pixel values on x-axis / y-axis
+
+
+
+</script>
+<template>
+    <v-card title="test">
+        <v-slider v-model="height" class="align-center" :max="1000" :min="100" />
+        <svg ref="svgRef" :width="width" :height="height">
+            <g class="x-axis" />
+        </svg>
+    </v-card>
+</template>
\ No newline at end of file
diff --git a/pages/refseq.vue b/pages/refseq.vue
index 0415ff51999a3b2a16c4ad478711264044328472..a2377d7227a67f168d0bd0350f7ecd248141fdf8 100644
--- a/pages/refseq.vue
+++ b/pages/refseq.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { csv as d3Csv } from 'd3-fetch';
-import { csvParse } from 'd3-dsv'
+
 import * as Plot from "@observablehq/plot";
 import PlotFigure from "~/components/PlotFigure";
 import { useDisplay } from "vuetify";