Dynamic Programming

100%

Dynamic Programming

✓ Published0🌍 Public

Last edited Apr 4, 2016

Created on Apr 3, 2016

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.

AI-generated description

Built with blockbuilder.org

Similar vizzes

Loading thumbnail…

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.

WWanagram

77% 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

76% 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

65% match

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

63% 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

59% match

Loading thumbnail…

Genetic.js Hello World

This example demonstrates a genetic algorithm evolving a string toward a target phrase, with each generation’s best individual displayed in a table. It uses Genetic.js for the evolutionary operations (selection, crossover, mutation) and d3.v4 to append rows to the table body. The fitness function scores characters by proximity to the target, and the table highlights per-character differences with background colors. The visualization shows the progression of generations, fitness values, and the evolving best solution in real time.

PPhilippe Rivière

59% match

Loading thumbnail…

Dynamic Programming

This example demonstrates the classic combinatorial problem of counting all possible paths on a 2D grid from the top-left to the bottom-right corner, moving only down or right. It visually presents the number of unique routes for various grid dimensions (m × n) as computed by the `gridTraveler` function, which uses memoization to optimize repeated subproblems. The visualization renders the results as an SVG grid, with each cell likely sized and labeled to reflect its path count. The code is built with D3.js v5 and pulls data from the United Nations World Population Prospects 2019 dataset, though the grid computations are self-contained in JavaScript.

VVlad Bogo

58% 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

57% match