acriths genome browser

100%

acriths genome browser

✓ Published0🌍 Public

Last edited Mar 24, 2016

Created on Mar 1, 2016

This example presents an interactive genome browser for phamerator.org, visualizing gene positions and directions along a linear genome. Genes are rendered as animated rectangles that grow and color-code direction—green for forward, red for reverse—while staggered vertically to avoid overlap. The visualization includes a genome axis with tick marks at intervals, and users can hover over genes to see Pham identifiers and GC content, or click to access a BLAST link for further sequence analysis.

AI-generated description

Similar vizzes

Loading thumbnail…

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.

BBrandonStroud

81% match

Loading thumbnail…

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

81% match

Loading thumbnail…

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

81% match

Loading thumbnail…

genome browser

This genome browser visualizes gene positions and orientations along a linear genome. The SVG animation first displays four gene blocks in a staging area, then slides them to their correct genomic coordinates while color-coding forward genes green and reverse genes red. Gene and pham IDs fade in as labeled text above or below each block. The visualization uses D3.js transitions to animate the placement, reading gene attributes from a JSON file, with tick marks indicating genomic positions at 100, 500, and 1000 base-pair intervals.

TThanisataS

80% match

Loading thumbnail…

The genome browser

This genome browser visualizes annotated genes along a linear genome map. Each gene is represented as a colored block—green for forward direction and red for reverse—with blocks offset into two staggered rows on each strand to reduce overlap. Gene names and pham identifiers appear as text labels. The visualization uses D3.js to animate gene blocks sliding from the right edge into their correct positions along the sequence, with labels fading in afterward. Hovering over a gene reveals a tooltip with its name. Tick marks at 100, 500, and 1000 base-pair intervals provide a genomic scale, and the layout separates forward and reverse strands vertically, with gene sizes proportional to their sequence lengths.

AAdamBlaine1

80% match

Loading thumbnail…

genome browser

This visualization presents a linear genome browser for phage genes, displaying four annotated genes along a 7,800-base-pair sequence. It shows the data before explaining the mechanics: a horizontal track with tick marks at 100, 500, and 1,000-base intervals, while gene blocks are drawn above or below the central axis based on their direction. The code uses D3.js (v3.5) with SVG elements and transitions to animate gene rectangles and labels, which fade in sequentially with staggered delays. Gene coordinates and strand information come from an external JSON file, with tick generation and placement driven by iterative data checks.

BBrandonStroud

80% match

Loading thumbnail…

genome browser

This example presents a comparative genome browser for multiple phage genomes, displaying genes as colored rectangles along horizontal genome-length rulers. Genes are positioned by their start and stop coordinates, with forward and reverse directions placed on opposite sides of the ruler, and each genome is stacked vertically for comparison. The visualization uses D3.js to load JSON data and render SVG elements, including animated tick marks at 100, 500, and 1000 base-pair intervals, along with tooltip interactions. All visual elements transition smoothly into view using D3 transitions, with gene labels and ruler annotations provided via SVG text.

TThanisataS

80% match

Loading thumbnail…

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.

BBrandonStroud

80% match