Put negative strand on a different line that positive strand.

src/scripts/component/sequence/gene.ts

@@ -57,11 +57,11 @@ export default function () {
       updateGenes.attr("transform", d => "translate(" + d.position.x + "," + d.position.y + ")");
       updateGenes
         .select<SVGPathElement>("path")
-        .style("fill", "lightgrey")
+        .style("fill", d => d.strand === "+" ? "indianred": "steelblue")
         .attr(
           "transform",
           ({ strand, position: { width } }) => (strand === "-")
-            ? "translate(" + width + "," + geneHeight + ") rotate(180)"
+            ? "translate(0," + (geneHeight + 5)  + ") translate(" + width + "," + geneHeight + ") rotate(180)"
             : null
         )
         .attr("d", d => arrowShape(d, geneHeight))

src/scripts/index.ts

@@ -44,7 +44,7 @@ const genes: Array<GeneData> = [
 
 
 function draw(centerGenome: number) {
-    const svg = select<SVGSVGElement, any>("svg").attr("width", width + 100).attr("height", 900);
+    const svg = select<SVGSVGElement, any>("svg").attr("width", width + 1).attr("height", 900);
     const genomeAxisElem = svg.select<SVGElement>("#axis");
     const geneElem = svg.select<SVGElement>("#genes");
     genomeAxisElem