Skip to main content
SimilarExport ZIP
100%

DNA sequence

✓ Published1🌍 Public
MMauricio García Benítez
Last edited Dec 28, 2020
Created on Dec 28, 2020
Forked from Smiley Face Part V

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.

AI-generated description

Splitting React components into multiple files using ES6 modules. Bonus: React Fragments!

MIT Licensed

Similar vizzes

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
87% match
Loading thumbnail…

3D DNA HELIX Interactive

This interactive visualization depicts a stylized 3D DNA double helix, with two intertwined strands of colored nucleotide pairs (circles connected by lines) that continuously rotate and animate as the central axis twists. Mouse movement changes the helix’s torsion, altering the rotation speed and curve magnitude. The visualization is built with D3.js (version 3.5.5) and the underscore.js library, rendering via SVG. The code generates two sine/cosine-based strands, maps their 3D coordinates using linear scales for x, y, and depth (z), and updates the scene every 25 milliseconds using `setInterval` and D3’s selection/data-binding API, applying color fills from a predefined palette.

MMauricio García Benítez
82% 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
81% 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
74% 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
74% 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
73% match
Loading thumbnail…

sequences

This scatter plot visualizes nucleotide sequences from four DNA samples, mapping each position along the x-axis against a concatenated representation of nucleotides on the y-axis. The data originates from a CSV file containing sequence data, which is processed through a custom `btb` function that converts nucleotide letters into binary coordinate arrays. Built with React and D3 v5, the visualization uses `scaleLinear` for both axes, renders circles as SVG marks with tooltips showing formatted position values, and includes custom `AxisBottom` and `AxisLeft` components for tick labels.

FFloweringDeathStar
72% 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
72% match