Skip to main content
100%

Amino Chain

✓ Published0🌍 Public
WWanagram
Last edited Apr 3, 2016
Created on Apr 3, 2016

Amino Chain displays gene sequences as colored rectangular blocks, with each block representing a translated amino acid derived from DNA codons in the loaded JSON data. The visualization maps start and stop positions from the `genes.json.txt` file onto horizontal bars, using D3.js and jQuery to fetch and parse the data. D3 selections append SVG rectangles to the page, while a switch statement converts nucleotide triplets into amino acid names for the block styling.

AI-generated description

Built with blockbuilder.org

Similar vizzes

Loading thumbnail…

Gist f0d047bd1b55bcd4f98416acd33ce078

This example visualizes a DNA sequence by translating each codon into its corresponding amino acid and displaying the resulting protein sequence. The code stores the nucleotide string in an array of three-base codons, then uses a switch statement to map each codon to its amino acid abbreviation, including ambiguous codes like Asx and Glx. The visualization relies on standard JavaScript array methods and string manipulation rather than external libraries, processing the sequence data directly in the browser to reveal the encoded amino acid chain.

WWanagram
75% match
Loading thumbnail…

Gene coding

This visualization maps six gene annotations along a linear DNA ruler. Blocks, colored green or red according to their coding direction, animate into place at their start positions, with numbered labels fading in after all blocks. The D3 v4 script builds the SVG with block append/transition methods, while the ruler itself is composed of nested black rectangles at 100, 500, and 1000-unit scales generated from a simple loop. Data is embedded directly in the code.

CCraftbd
73% match
Loading thumbnail…

fresh block

Animated genome browser visualization displays four gene sequences as colored rectangles sliding from off-screen into their mapped positions. Forward genes appear green on the top track, reverse genes red on the bottom track, with each sequence labeled and annotated with a color-coded function description. The code uses D3 v4 selections with `transition()` and `delay()` to animate both rectangles and text elements, computing element widths from sequence length and positioning based on each gene’s start coordinate. Data is stored as a hardcoded JavaScript array of gene objects.

HHeywhoyou22
72% match
Loading thumbnail…

fresh block

This visualization presents a simple genome browser, displaying four genes as colored rectangles positioned along a horizontal chromosome. Each gene’s sequence and a descriptive function label appear near its corresponding block, with forward-direction genes in green on the top row and reverse-direction genes in red below. Using d3.v4, the SVG elements animate in sequence with staggered transitions, applying `transition.delay` and `transition.duration` to sequentially reveal each rectangle and text. The data is hardcoded in the script, and the layout derives from each gene’s start position and sequence length.

HHeywhoyou22
72% match
Loading thumbnail…

The genome browser

This genome browser visualizes annotated genes along a linear genome map. Each gene is represented as a colored block—green for forward direction and red for reverse—with blocks offset into two staggered rows on each strand to reduce overlap. Gene names and pham identifiers appear as text labels. The visualization uses D3.js to animate gene blocks sliding from the right edge into their correct positions along the sequence, with labels fading in afterward. Hovering over a gene reveals a tooltip with its name. Tick marks at 100, 500, and 1000 base-pair intervals provide a genomic scale, and the layout separates forward and reverse strands vertically, with gene sizes proportional to their sequence lengths.

AAdamBlaine1
70% match
Loading thumbnail…

Multiple Sequence Aligment

This visualization displays the results of a multiple DNA sequence alignment, showing 17 sequences as a grid of colored cells where each color represents one of four nucleotide bases (A, G, C, T) and gaps appear in white. It uses D3.js v3 to render the alignment as an SVG heatmap-like matrix, with each sequence labeled on the left and a legend showing the base-to-color mapping. The dataset comes from ClustalW2 alignment results, and interactive tooltips appear on hover, displaying the row, column, and base for any selected cell. The implementation binds data to SVG rectangles and uses D3’s enter/exit selections to create the grid.

JJverma
70% match
Loading thumbnail…

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
69% 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
69% match