genome browser

100%

genome browser

✓ Published0🌍 Public

Last edited Apr 12, 2016

Created on Feb 25, 2016

A genome browser visualizes four genes as directional arrows along a linear genome, with each gene’s start and stop positions mapped from a JSON file. Hovering or clicking a gene opens a modal displaying its family, sequence, and translated amino acid composition. The visualization uses D3.js for SVG rendering and animation, jQuery for JSON loading and modal interactions, and Bootstrap for the modal layout.

AI-generated description

Genome browser for phamerator.org

forked from <a href='http://bl.ocks.org/scresawn/'>scresawn</a>'s block: <a href='http://bl.ocks.org/scresawn/b8a8fcb885b6840bfde5'>genome browser</a>

Similar vizzes

Loading thumbnail…

genome browser

This example presents a simple genome browser visualization built with D3.js, displaying four annotated genes along a linear genome sequence. It shows the relative positions and orientations of genes as colored rectangles, with green indicating forward direction and blue indicating reverse direction, placed above and below a central axis respectively. The visualization includes a ruler with tick marks at 100, 500, and 1000 base-pair intervals, computed programmatically from the genome length. Using SVG rendering with animations, the code loads gene data from a JSON file, then uses D3 transitions to animate gene rectangles growing into place and tick marks drawing themselves sequentially, while gene name labels fade in after a delay.

AAdamBlaine1

87% match

Loading thumbnail…

Genome Browser

This genome browser uses D3 v4 to display four genes, each with a name, DNA sequence, direction, and function. Green forward-oriented genes animate from the left, while red reverse-oriented genes animate from the right, with sequences and function labels moving alongside. A static ruler with tick marks at 1000-base intervals sits beneath them. The visualization uses animated SVG rectangles and text elements with `transition().duration(1500)` and staggered delays to illustrate gene positions along the genome.

HHeywhoyou22

86% match

Loading thumbnail…

genome browser

This genome browser visualizes gene positions along a linear genomic axis, using pink rectangles to represent forward-oriented genes and black tick marks to indicate genomic scale intervals. It employs D3.js to append SVG rectangles and groups, binding each gene's start and stop coordinates to the x-position and width of its corresponding shape. The tick marks animate into place via D3 transitions, with increasing durations for smaller intervals, while the genome ruler itself is a static black-outlined rectangle. The underlying data comes from a hardcoded JavaScript array of gene objects.

SSmith5mr

86% match

Loading thumbnail…

genome browser

This example displays a schematic genome browser with four gene rectangles positioned along a horizontal axis, color-coded by direction (green for forward, red for reverse) and labeled by name. A central track with tick marks represents the genomic coordinate scale. Built with D3 v4, the visualization uses SVG rects and text elements, animating gene positions and opacity via transitions that move the rectangles from off-screen starting points to their target coordinates over 2.5 seconds.

TTylerVaughan

86% 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

86% match

Loading thumbnail…

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.

BBrandonStroud

86% match

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

86% match

Loading thumbnail…

genome browser(testing3)

This example presents a genome browser visualization that maps four genes across an 8,000-base-pair genome, displaying each gene’s position, direction, and pham identifier. It shows gene orientation and relative size through animated rectangles that slide into place from outside the genome track, with labels and tick marks for scale. The visualization uses D3.js (v3) selections, data binding with `d3.json`, and `transition` to animate the rectangles. Tick marks for thousands, five-hundreds, and hundreds are generated programmatically, and the genome length and gene data come from an external JSON file.

DDarius9

86% match