genome browser

100%

genome browser

✓ Published0🌍 Public

Last edited Feb 23, 2016

Created on Feb 23, 2016

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.

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

BBrandonStroud

94% match

Loading thumbnail…

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

94% match

Loading thumbnail…

genome browser

This genome browser visualizes gene positions along a linear genome using D3.js, with tick marks at 1000, 500, and 100 base-pair intervals animated via staggered transitions. It displays a horizontal backbone rectangle representing the genome, while gene data (from a local JSON file) is loaded asynchronously but not yet rendered. The example also includes sample circles with fixed coordinates and colors, suggesting placeholder for feature mapping. Rendering relies on SVG elements and D3’s selection and transition methods, with a hardcoded genome length of 7800 and tick calculations in JavaScript. The visualization focuses on animated ruler construction rather than full genomic annotation.

AAdamBlaine1

93% match

Loading thumbnail…

genome browser

This example presents a simple linear genome browser visualization, displaying gene positions along a horizontal axis. It shows a set of named genes with start and stop coordinates, rendered as a single white rectangle with black border, while tick marks of varying heights indicate genomic positions at 100, 500, and 1000 base-pair intervals. The visualization uses D3.js (version 3.5.5) to bind the gene data, append SVG elements, and animate the tick marks’ appearance with staggered transitions. The code reads gene coordinates from an embedded JavaScript array and uses `d3.selectAll`, `.data()`, and `.transition().duration()` to animate the ruler-like ticks across the genome length.

BBrandonStroud

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

93% match

Loading thumbnail…

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.

BBrandonStroud

92% match

Loading thumbnail…

genome browser

This genome browser visualizes gene positions along a linear genomic sequence of 7,800 base pairs, with genes colored green for forward direction and blue for reverse. The D3.js (v3.5.5) code loads gene coordinates from a JSON file and animates their rectangles growing from zero height to full size after a 3-second delay. A separate set of tick marks, generated by iterating through all genome positions, appears at 1000, 500, and 100 base-pair intervals, with each tier’s marks animating in sequence to build the ruler. The SVG rendering includes a white backbone rectangle and black tick lines, all scaled by dividing base-pair coordinates by 10 for display.

BBrandonStroud

92% match

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

92% match