genome browser

100%

genome browser

✓ Published0🌍 Public

Last edited Apr 28, 2016

Created on Apr 28, 2016

This interactive genome browser visualizes three phage genomes (D29, U2, L5) by rendering gene blocks as annotated SVG tracks with transition animations and scale bars. It uses D3 v3 to load JSON data from `genes.json.txt`, while jqPlot generates a separate, smooth-scrolling GC-content line chart from DNA sequences via the custom `genome` prototype function. D3 handles tick marks, labels, and tooltip-style overlays, with genome positions divided by 10 to map nucleotide coordinates to pixel widths.

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/dunlapea/'>dunlapea</a>'s block: <a href='http://bl.ocks.org/dunlapea/7b750aac02c274ce7be1a2ec65681b6b'>genome browser</a>

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

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

forked from <a href='http://bl.ocks.org/dunlapea/'>dunlapea</a>'s block: <a href='http://bl.ocks.org/dunlapea/63b313292ecb948800fb1bebaef690b3'>genome browser</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/73d2088a4754f9a3b46db81c3a12ca42'>genome browser</a>

forked from <a href='http://bl.ocks.org/dunlapea/'>dunlapea</a>'s block: <a href='http://bl.ocks.org/dunlapea/752ff3769123dd6f733dd1a0fd139698'>genome browser</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/8e82406ccf2abef3600b5c63db1830ca'>genome browser</a>

forked from <a href='http://bl.ocks.org/dunlapea/'>dunlapea</a>'s block: <a href='http://bl.ocks.org/dunlapea/0bc494cbfc5dab3fbea588a6a7cc0cdb'>genome browser</a>

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

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

forked from <a href='http://bl.ocks.org/ThanisataS/'>ThanisataS</a>'s block: <a href='http://bl.ocks.org/ThanisataS/1e629563fec7314eae2a09fa71d732a7'>genome browser</a>

forked from <a href='http://bl.ocks.org/ThanisataS/'>ThanisataS</a>'s block: <a href='http://bl.ocks.org/ThanisataS/237c8eea17f00059191c179f1452ebbf'>genome browser</a>

Similar vizzes

Loading thumbnail…

genome browser

This interactive genome browser visualizes three phage genomes (D29, U2, L5) as horizontal tracks, each with directional gene blocks, tick marks, and base-pair labels. The D3.js v3 code renders SVG elements, animating opacity and stroke transitions to introduce the ruler and ticks. jQuery parses a JSON file of gene sequences, while jqPlot generates an additional line chart below each genome, plotting GC-content values computed from the nucleotide sequences via a custom function. The tooltip and hover interactions are not implemented beyond basic styling.

TThanisataS

97% match

Loading thumbnail…

genome browser

This interactive genome browser visualizes the genetic sequences of multiple phages as horizontal tracks, using a custom jQuery plugin (jqPlot) to render a smooth line chart of GC content beneath each genome. The D3 v3 library enhances the display by adding SVG-rendered genome rulers, tick marks, and animated labels that fade in via `transition().duration()`. The example loads data from `genes.json.txt`, which contains gene positions, directions, and DNA sequences for each phage, and it directs users to phamerator.org, a resource for phage genomics.

TThanisataS

94% match

Loading thumbnail…

genome browser

This genome browser displays multiple phage genomes as horizontal tracks, with genes rendered as blocks along a ruler marked in kilobase pairs. The visualization is built with D3.js v3 for SVG layout and animation, while nucleotide sequences from the JSON data are processed through a custom genome function and plotted using the jqPlot library to generate smoothed GC-content curves beneath each gene track.

TThanisataS

94% match

Loading thumbnail…

genome browser

This interactive genome browser displays three phage genomes as annotated horizontal tracks, with genes rendered as colored blocks that alternate position by strand direction and index. A ruler marks genomic positions at 100, 500, and 1000 base-pair intervals, with labels in kilobases. The visualization reads gene data from a JSON file and uses D3.js v3 selections, transitions, and SVG elements to build the layout. Tooltips appear on hover, while tick marks and gene rectangles fade in through timed `transition` calls, creating an animated reveal of the genomic structure.

TThanisataS

93% match

Loading thumbnail…

genome browser

This interactive genome browser visualizes multiple phage genomes as annotated linear maps, with genes displayed as positioned blocks along horizontal rulers. A button toggles coloring by G/C content, and animated transitions highlight nucleotide composition. The implementation combines jQuery and jqPlot for waveform renderings of sequence data with D3 v3 for SVG-based genomic layout and tooltips, using JSON data for three phage species.

TThanisataS

93% match

Loading thumbnail…

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

93% match

Loading thumbnail…

genome browser

This interactive genome browser displays three phage genomes as horizontal tracks, with genes rendered as colored blocks and directional tick marks indicating forward or reverse orientation. The visualization compares gene arrangements across species, using a ruler with labeled 1-kbp markings to show scale. Built with D3 version 3, it loads gene data from a JSON file and uses SVG transitions to animate the appearance of tick marks and gene rectangles. The code computes tick positions by iterating through genome positions to generate ruler increments.

TThanisataS

92% match

Loading thumbnail…

genome browser

This genome browser displays multiple phage genomes aligned horizontally, with genes shown as colored rectangles above or below the genomic ruler depending on their direction and index. It uses D3.js (v3) to render the visualization as SVG and includes animated transitions that fade in ruler tick marks and gene annotations. The data is loaded from a JSON file, with gene positions scaled by dividing nucleotide coordinates by 10, and the interface supports tooltip interactions.

TThanisataS

91% match