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";