deBruijn graph from DNA sequence reads

100%

deBruijn graph from DNA sequence reads

✓ Published0🌍 Public

Last edited Jul 8, 2015

Created on Jul 8, 2015

A de Bruijn graph constructed from a segment of DNA sequence shows how 5-mer overlaps connect 4-mer subsequences into a network. The animation renders nodes and edges dynamically, illustrating genome assembly concepts. Built with the NetworkxD3 package, the visualization uses d3.forceSimulation to position nodes and animate the graph structure.

AI-generated description

de Bruijn graph constructed from a segment of DNA sequence. We used 5-mer dbg which means that the nodes are all the 4-mers (subsequences of length 4) and there is an edge between two nodes is a 5-mer which joins them. These very very useful in genome assembly. This is made using the NetworkxD3 package.

Similar vizzes

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

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

66% match

Loading thumbnail…

Force Layout

This example visualizes a graph of DNA sequence nodes and their connections, allowing users to toggle between the original graph and a community-detected version using buttons. The force-directed layout positions nodes using `d3.layout.force` with SVG rendering, drawing circles for nodes and lines for links. The two views load separate JSON files (`graph.json` and `community.json`), where the community file includes additional intra-community connections. Node and link styling relies on D3 v3 selections, with the simulation updating positions on each tick event.

JJverma

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

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

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

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

63% match

Loading thumbnail…

Fork of DNA Animation

This animation depicts a stylized, two-stranded DNA helix constructed from a sequence of circles connected by smooth, colored paths. The parallel strands oscillate horizontally, and the connecting rungs are rendered as thick line segments, creating a simplified molecular representation. The visualization is built with D3 version 7, using its `line` generator and the `.join()` operation to efficiently update SVG circles, paths, and lines at 60 frames per second via `setInterval`. Two independently timed sine-wave functions drive the positional data for each strand.

TToly

62% match