Genome Sequence Comparison

From your Education to your Job

This example visualizes gene comparison data as a chord diagram, with the left side representing copepod gene names and the right side representing percent similarity values. The chart uses a custom stretched chord layout to pull the two halves apart, enabling clearer comparison of connections. Built with D3.js v3, it renders SVG paths and includes an animated linear gradient that moves across the chords. The data comes from a CSV file of nematode genes with identity percentages.

LLisaPicado

76% match

From your Education to your Job

LLisaPicado

76% match

The genome browser

This visualization presents a genome browser that displays gene sequences along a linear genome track, with forward and reverse genes color-coded in green and red. It shows how genes are positioned and oriented within a genome, with tick marks marking 100, 500, and 1000 base-pair intervals. The view animates gene rectangles from an initial off-track position into their correct places along the track, while labels for gene names and phage numbers fade in sequentially. The code uses D3.js (version 3.5.5) to bind JSON data, manipulate SVG elements, and apply transitions.

72% match

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.

72% match

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

genome browser

This genome browser visualizes a 7,800-base-pair genetic sequence with an animated ruler track, using SVG rendered by D3.js. It displays tick marks at three scales—thousand-base, five-hundred-base, and hundred-base intervals—which are generated from a static array of positions. The code employs D3 data joins and `transition().duration()` to animate each tick group’s translation, creating a cascading effect where coarser marks appear before finer ones. The example’s data comes from a hardcoded `genes.json.txt` array of gene objects, though the current render focuses solely on the ruler rather than the gene annotations.

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

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.