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.
AI-generated descriptionGenome 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>