Skip to main content
100%

3D DNA Helix

✓ Published0🌍 Public
Aadamhurst
Last edited Jun 18, 2015
Created on Jun 18, 2015

A 3D DNA helix animates in an SVG scene, with two intertwined strands of colored circles connected by short lines that rotate and twist over time. The visualization uses D3.js and Underscore.js to generate the helix’s coordinates from sine and cosine functions, updating every 25 milliseconds via `setInterval`. Mouse movement over the canvas adjusts the torsion parameter, changing the helix’s twist interactively. Circle size and opacity encode depth along the z-axis, while line thickness and opacity vary to suggest the spiral’s three-dimensional form.

AI-generated description

Similar vizzes

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
91% 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
88% 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…

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

Double Helix

A DNA double helix rotates slowly in a purple void, its two helical strands formed from colored spheres connected by white cylindrical base pairs. The scene renders in real time using Three.js with WebGL, featuring smooth orbit controls for interactive viewing. The helix is generated procedurally from configurable parameters, with each strand offset by 180 degrees and colored via HSL values that shift along the vertical axis.

CCurran Kelleher
76% match
Loading thumbnail…

D3 Spin Art

This interactive visualization lets users draw freehand lines or dots on a rotating canvas, producing spiral-like patterns whose appearance changes with speed. A vertical slider controls revolutions per minute, a color palette selects stroke colors, and radio buttons toggle between line and circle draw styles. The code uses D3 v4 transitions with a linear easing function to animate the SVG group’s rotation, while drag events append polyline or circle elements to the rotating group.

Aalexmacy
72% match
Loading thumbnail…

A tweetable d3 animation

A single animated SVG visualization shows 100 circles arranged in a shifting radial pattern. The code uses a `d3.timer` loop to update circle positions, with each circle’s radius and angle computed via sine and cosine functions. The circles are drawn with D3’s `selectAll` and `data` join, appended to an SVG group element. Styling is minimal, with unfilled circles stroked in dark gray on a light background. The animation continuously couples each circle’s distance from the center to time, creating a pulsating, spiral-like effect.

CColinEberhardt
72% match
Loading thumbnail…

Circles Sine Wave Animation D3

Animated circles glide across the screen in a sine wave pattern, with each circle's position, size, and color shifting over time. The visualization uses D3 v7's `select`, `selectAll`, `range`, and `line` APIs to generate and update SVG elements on a 60fps interval. Circle color is derived from a dynamic HSL value based on the animation tick, while the number of circles oscillates between 1 and 35. The line generator draws a smooth path connecting the circles, creating a flowing sinusoidal curve.

Eelisabet@pitch.io
71% match