genome browser

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.

91% match

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

91% match

genome browser

This interactive genome browser displays multiple phage genomes with their genes, directions, and genomic positions on a linear scale. It uses D3.js (v3.5.5) to load JSON data from `genes.json.txt` and render each genome as a separate row, with tick marks at 100, 500, and 1000 base-pair intervals. Gene blocks are positioned and colored by direction and gene name, with animated transitions revealing the ruler and labels. The visualization is rendered as SVG and includes tooltip support for additional details.

TThanisataS

90% 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.

90% match

genome browser

This genome browser visualizes gene positions along a linear genome sequence, with genes drawn as colored rectangles that animate downward into place above and below a central axis based on their forward or reverse direction. The SVG rendering uses D3.js to bind gene data from a JSON file, while tick marks at 100, 500, and 1,000 base-pair intervals are animated with staggered transitions. The code relies on `d3.json` for data loading, `transition().duration()` for sequential animations, and `attr("transform")` to position tick groups. The genome length is fixed at 7,800 base pairs, with gene labels fading in after the rectangles settle.

AAdamBlaine1

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 genome browser visualizes gene positions along a linear genomic sequence, displaying genes as colored rectangles and a ruler with tick marks at 1000, 500, and 100 base-pair intervals. It shows gene orientation through direction metadata and uses an animated transition to draw tick marks onto the SVG. The code leverages D3.js (v3.5) to bind data from a JavaScript array of gene objects, appending SVG `<rect>` elements and groups, with transitions animating tick mark placement. The visualization uses a fixed genome length of 7800 base pairs and scales positions by dividing by 10 for display.