Multiple Sequence Aligment

100%

Multiple Sequence Aligment

✓ Published0🌍 Public

Last edited Jul 13, 2015

Created on Jul 13, 2015

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.

AI-generated description

Visualizing the results of a multpiple DNA sequence alignment. 15 sequences were aligned using ClustalW2 and their results which are of following form -

	 ATGGAATGATCCATGGT-GCTGACAGATG-CTTCCATGGTGTTAACAGAGTTTCTGGTCT
 AAGGGCAAATACATCAT-GAGATGAGTTGGCTTCCATAACATTATAAAACATTTTGATCA
 ----------AAAACAT-GCAAGAAATGGCTGAACAGGGCACTTTCGGCGG--CAGG---
 ----------AAATCAT-GCATACAAG---TTCCTAGGGGCCTCAAAACAT--CAAA---
 GCCGGGTATTACACCATTGCTGGATGCAATCAAACGAGTGTCTCACTATGCTAAATTTCT
 ATAGAGCTGTATAAGGTCCTGAATTGTTCATTCAAGAACTGAAGTCAATGATAACAATCT
 ATAGAGCTGTATAAGGTCCTGAATTGTTCATTCAAGAACTGAAGTCAATGATAACAATCT
 -----------TGAGTTCCT-AATAG-----TCAAGGGAGGCTATTTATAATAGAAATAA
 ---TCTAAAAAGAAACTTGCGAATTTTTTCTTCAATGATTAGACACAAAGCTCCAAAGGA
 -------------AGGTTGTAAAATTTAATATTTATGAATCTATGAAATACCCCACAG--
 GCCGGGTATTACACCATTGCTGGATGCAATCAAACGAGTGTCTCACTATGCTAAATTTCT
 AAGGGCAAATACATCAT-GAGATGAGTTGGCTTCCATAACATTATAAAACATTTTGATCA
 ATAGAGCTGTATAAGGTCCTGAATTGTTCATTCAAGAACTGAAGTCAATGATAACAATCT
 ATAGAGCTGTATAAGGTCCTGAATTGTTCATTCAAGAACTGAAGTCAATGATAACAATCT
 ----------AAAACAT-GCAAGAAATGGCTGAACAGGGCACTTTCGGCGG--CAGG---
 ---TCTAAAAAGAAACTTGCGAATTTTTTCTTCAATGATTAGACACAAAGCTCCAAAGGA
 ATGGAATGATCCATGGT-GCTGACAGATG-CTTCCATGGTGTTAACAGAGTTTCTGGTCT

Similar vizzes

Loading thumbnail…

Multiple sequence alignment

A multiple sequence alignment heatmap displays amino acid residues across aligned protein sequences, with rows representing individual chains by PDB code and columns indicating alignment positions. Each cell is colored according to its amino acid type using a custom d3.scaleOrdinal palette. The visualization uses d3.csv to load data, d3.scaleBand for axes, and d3-tip to show tooltips detailing the residue number and chain information on hover. Rendered as SVG rectangles with mouseover interactions, the chart includes a title and axis labels.

BBoris Gomaz

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

72% match

Loading thumbnail…

3D DNA HELIX From Sequence

This animated visualization renders a DNA helix from a user-supplied text sequence, showing two intertwined strands that rotate over time. Each nucleotide is represented as a colored circle, with colors mapped via `d3.interpolateRainbow` based on the unique characters in the string, while connecting lines between complementary bases emphasize the helical structure. The code uses D3.js v5 with SVG elements, updating positions and scales through a `setInterval` loop that regenerates data and applies logarithmic z-depth scaling to simulate three-dimensional perspective. The animation highlights the sequence’s layout by encoding torsional rotation and opacity changes.

MMauricio García Benítez

72% match

Loading thumbnail…

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

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

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

71% match

Loading thumbnail…

heatmap

This interactive heatmap visualizes a 50×5 co-occurrence matrix, where each cell’s color encodes a log2 ratio value from the accompanying TSV dataset. Built with D3 v3 using SVG, the chart supports reordering via hierarchical clustering or by row/column labels, and clicking a row or column label sorts the corresponding cells. Users can click individual cells to highlight their row and column labels, or select multiple cell blocks while holding the Alt key. Hovering or selecting cells highlights the associated row and column labels, and the interface includes animated transitions for reordering. The example is adapted from GerardoFurtado’s block and is distributed under the MIT license.

GGerardoFurtado

70% match

Loading thumbnail…

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.

AAdamBlaine1

70% match