index.ts 1.19 KB
Newer Older
1
import GeneComponent, { GeneData } from "./component/sequence/gene";
Remi  PLANEL's avatar
Remi PLANEL committed
2
import GenomeAxis from "./component/sequence/genome-axis";
Remi  PLANEL's avatar
Remi PLANEL committed
3
import { select } from "d3-selection";
Remi  PLANEL's avatar
Remi PLANEL committed
4
5

const width = 1500;
Remi  PLANEL's avatar
Remi PLANEL committed
6
const genomeWindowSize = 6000
Remi  PLANEL's avatar
Remi PLANEL committed
7
const genes: Array<GeneData> = [
Remi  PLANEL's avatar
Remi PLANEL committed
8
9
10
11
    { name: "gene 1", strand: "-", begin: 20815, end: 21078, gene: "insA" },
    { name: "gene 2", strand: "+", begin: 21181, end: 21399, gene: "yaaY" },
    { name: "gene 3", strand: "+", begin: 21407, end: 22348, gene: "ribF" },
    { name: "gene 4", strand: "+", begin: 22391, end: 25207, gene: "ileS" }
Remi  PLANEL's avatar
Remi PLANEL committed
12
13
14
]

const geneComponent = GeneComponent();
Remi  PLANEL's avatar
Remi PLANEL committed
15
16
17
18
19
20
const genomeAxis = GenomeAxis();
const svg = select<SVGSVGElement, any>("svg").attr("width", width + 100).attr("height", 900);
const genomeAxisElem = svg.select<SVGElement>("#axis");
const geneElem = svg.select<SVGElement>("#genes");

genomeAxisElem
Remi  PLANEL's avatar
Remi PLANEL committed
21
    .datum(getGenomeWindow(23000, genomeWindowSize))
Remi  PLANEL's avatar
Remi PLANEL committed
22
23
24
25
26
    .call(genomeAxis, width, 0);

geneElem
    .datum<Array<GeneData>>(genes)
    .call(geneComponent, genomeAxis.scale(), 40);
Remi  PLANEL's avatar
Remi PLANEL committed
27

Remi  PLANEL's avatar
Remi PLANEL committed
28
29
30
31
32
33
34


function getGenomeWindow(middle: number, genomeWindowSize: number): [number, number] {
    const halfWindow = genomeWindowSize / 2;
    return [middle - halfWindow, middle + halfWindow]

}