Locating Restriction Sites Algorithm

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.

57% match

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.

51% match

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.

50% match

Gist 6b30d347b0402263522888c0a96653ad

This histogram visualizes the distribution of sequence lengths from Oxford Nanopore sequencing data, comparing 1D+2D and 2D reads of *Silene latifolia* DNA. The chart shows how many reads fall into each length bin, highlighting the range and frequency of fragment sizes for both datasets. The underlying shell script uses `bioawk` with the `fastx` input mode to extract the `length()` of each sequence, writing the resulting measurements to separate text files before plotting. The visualization relies on the bioawk library’s FASTA/FASTQ parsing capabilities to generate the raw length counts.

NNpfn

Dynamic Programming

A dynamic programming matrix visualizes the alignment of two DNA sequences, "GAATTCAGTTA" and "GGATCGA", by filling a grid where each cell holds the optimal match score computed from neighboring cells. The code uses plain JavaScript arrays and nested loops to build the matrix, applying the recurrence relation with match penalties and gap scores. The final matrix is rendered as a console table via `console.table(arr)`, showing the scored path without any graphical library or SVG output.

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

fresh block

This example compares two DNA sequences by constructing a dynamic programming matrix that calculates the longest common subsequence score. It visualizes the alignment scoring process through a grid of numerical values, where each cell represents the optimal match score up to that position. The code builds a multi-dimensional array in plain JavaScript, iterating through both sequences to fill the matrix with scores based on match, insertion, or deletion logic. No external visualization libraries are used; the example focuses solely on the algorithmic computation within the HTML file.