genome browser

genome browser

This visualization presents a linear genome browser for a synthetic DNA sequence, displaying four annotated genes along a horizontal genomic axis. It shows the relative positions, lengths, and orientations (forward in green, reverse in red) of each gene, with staggered vertical offsets for readability. The visualization animates the appearance of gene blocks and labels using D3 transitions, and it renders tick marks at 1000, 500, and 100 base-pair intervals to indicate scale. The code uses D3’s selection and transition methods (e.g., `.transition().delay().duration()`) to sequentially reveal the genome, starting with the ruler, then the gene rectangles, and finally the text labels. Gene data comes from a JSON file, and the scale is fixed at one pixel per ten base pairs, with the SVG width set to one-tenth of the genome length.

91% match

MMorganShannonMaryBioInformatics

genome browser

A genome browser displays multiple phage genomes side-by-side, showing genes as colored rectangles above and below a central ruler. Genes are colored by orientation, with tick marks and labels marking genomic positions at 100, 500, and 1000 base-pair intervals. The visualization uses D3.js to load JSON data, append SVG elements, and animate opacity transitions for the ruler, ticks, and gene blocks, with tooltips on hover.

91% match

The genome browser making multiples)

This interactive genome browser visualizes phage gene annotations along a linear genomic ruler. Each gene is rendered as an orange rectangle, with forward and reverse genes positioned on alternating tracks above and below a central axis to reduce overlap. The SVG animation reveals the ruler by fading in its stroke, while hover tooltips display gene names. The x-axis is scaled by sequence position, and tick marks at 100, 500, and 1000 base-pair intervals provide a genomic coordinate reference.

AAdamBlaine1

91% match

genome browser

This genome browser visualizes gene annotations along a linear genome, using an animated D3.js layout to reveal gene positions, directions, and associated pham identifiers. The example loads gene data from a JSON file and renders each gene as a colored rectangle—green for forward direction and red for reverse—on a track with tick marks every 1000 bases. The initial view places genes off-screen, then transitions them into position over 1.5 seconds, with gene and pham labels fading in afterward. The code uses D3's `selection.transition` for animations and SVG for rendering, with tick marks generated from computed genome positions.

The genome browser

This visualization presents a genome browser that displays gene sequences along a linear genome track, with forward and reverse genes color-coded in green and red. It shows how genes are positioned and oriented within a genome, with tick marks marking 100, 500, and 1000 base-pair intervals. The view animates gene rectangles from an initial off-track position into their correct places along the track, while labels for gene names and phage numbers fade in sequentially. The code uses D3.js (version 3.5.5) to bind JSON data, manipulate SVG elements, and apply transitions.

AAdamBlaine1

genome browser

This interactive genome browser visualizes gene positions along a linear genome of 7,800 base pairs. The visualization renders a main genomic backbone as a horizontal black-bordered rectangle, with five genes displayed as colored blocks—pink for forward-strand genes and teal for reverse-strand genes. Genes are offset vertically in alternating rows based on their name parity and direction, creating a clear strand-separated layout. Each gene is labeled with its number in white sans-serif text. The animation begins with genes growing from zero height to their full 30-pixel height, while tick marks for thousands, five-hundreds, and hundreds appear with staggered transitions. Data is loaded from an external JSON file (genes.json.txt) using d3.json, and the visualization is rendered as an SVG using D3.js. Tick marks are generated by iterating over genome positions, and gene rectangles transition into place with a delay, producing a dynamic, animated genome browser view.

genome browser

This interactive genome browser visualizes gene positions along a linear genome sequence, with genes displayed as colored blocks above and below a central axis based on their direction. The view animates gene rectangles growing into place, followed by staggered tick marks at 100, 500, and 1000 base-pair intervals. Using D3.js, the code loads gene data from a JSON file and applies chained transitions (`.transition().duration()`) to reveal elements sequentially, while fill colors encode forward (purple) or reverse (orange) strand orientation. The SVG canvas is sized proportionally to genome length, and tick marks fade or slide in at different speeds to build the final annotation.

genome browser

This interactive genome browser visualizes gene arrangements across multiple phage genomes, comparing the positions of homologous genes. The visualization uses D3.js with SVG and animation to display genomic data loaded from a JSON file, with genes rendered as directional blocks along a horizontal track, colored by pham family. Each gene is clickable, linking to its sequence on PhagesDB, and hovering reveals a tooltip with details like gene name, pham, and coordinates. Toggles in the sidebar let users filter which genomes to display, enabling quick comparison of gene order and orientation between closely related phages like Butterscotch and PBl1.