Skip to main content
100%

Gist f0d047bd1b55bcd4f98416acd33ce078

✓ Published0🌍 Public
WWanagram
Last edited Mar 29, 2016
Created on Mar 29, 2016

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Amino Chain

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.

WWanagram
75% match
Loading thumbnail…

Gist 3b2b529e54d1f10d3698fcf6b22ee1e4

This example shows the nucleotide composition of a DNA sequence by calculating the percentage of adenine, thymine, cytosine, and guanine. It uses a JavaScript loop with a switch statement to count each base in the hardcoded `sequence` string, then logs the percentages to the console. No external libraries or visualization APIs are used; the rendering approach is purely text-based output via `console.log`. The data source is the static sequence embedded in the code.

WWanagram
74% match
Loading thumbnail…

Gist ffcc056cd10b4ea1386f2a81189aa95a

This example shows the reverse complement of a DNA sequence, converting each nucleotide to its complementary base and reversing the order. The code defines a hardcoded string of genetic letters and processes it character by character using a `for` loop and a `switch` statement. It outputs the transformed sequence to the console with `console.log`, producing a string like “GGCTAGCTACGCCGCGACTAGCTACATGCGCGCTCAGCATCATCGCCGCGCAGGTTTGC.” No external libraries are used; the entire visualization is a plain JavaScript computation and text output.

WWanagram
73% match
Loading thumbnail…

DNA sequence

This visualization animates a synthetic DNA double helix, where each colored node represents a letter from a string of fake genes and pulses along a twisting, sinusoidal path over time. It shows the helix rotating continuously, with lines connecting complementary strands and opacity varying based on depth to suggest a 3D structure rendered in SVG. The code fires a `setInterval` to regenerate and update data every 25 milliseconds, using d3’s `scaleLinear`, `extent`, `range`, and `interpolateRainbow` for color mapping. React manages the component, with fragments wrapping the DNA sequence inside the app’s root element.

MMauricio García Benítez
68% match
Loading thumbnail…

Gist 0b2fc1de581870e9c573c5a203d3b293

This example demonstrates global sequence alignment using the Needleman-Wunsch algorithm, comparing two nucleotide strings ("ATGCGAATCGC" and "ATCCTACCG"). It shows the dynamic programming score matrix via `console.table`, then performs a traceback to reconstruct the optimal alignment, printing both aligned sequences with gaps denoted by underscores. The visualization relies on plain JavaScript arrays and recursive functions, with no external libraries, rendering results purely through console output.

WWanagram
68% 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
67% match
Loading thumbnail…

genome browser

A genome browser visualizes four genes as directional arrows along a linear genome, with each gene’s start and stop positions mapped from a JSON file. Hovering or clicking a gene opens a modal displaying its family, sequence, and translated amino acid composition. The visualization uses D3.js for SVG rendering and animation, jQuery for JSON loading and modal interactions, and Bootstrap for the modal layout.

WWanagram
66% match
Loading thumbnail…

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.

AAdamBlaine1
65% match