Skip to main content
100%

genome browser

✓ Published0🌍 Public
BBrandonStroud
Last edited Mar 1, 2016
Created on Mar 1, 2016

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.

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>

forked from <a href='http://bl.ocks.org/BrandonStroud/'>BrandonStroud</a>'s block: <a href='http://bl.ocks.org/BrandonStroud/17b1a9d5f1788c35b255'>genome browser</a>

Similar vizzes