Home › DNA 3D Viewer ⚠️ Research Use Only. Not validated for clinical diagnostic use. 3D structures are predictions and require experimental validation.
3D DNA Structure Viewer
Input any DNA sequence — select A, B, or Z-DNA — visualize the 3D helix structure in real time.
Drag to rotate · Scroll to zoom · Right-click to pan · Click atoms to measure distance
View:
Default
Major Groove
Minor Groove
Top-Down
Side
Measure:
Distance
Reset
Understanding DNA Helix Structures
DNA exists in three major conformations depending on the environmental conditions. The 3D viewer above generates real coordinates using standard helix parameters from Saenger (1984), allowing you to visualize the differences between A-DNA, B-DNA, and Z-DNA directly in your browser.
🔬
B-DNA (Physiological)
The most common form found in living cells. Right-handed helix with 10.5 base pairs per turn, 3.4 Å rise per bp, and 10.0 Å radius. Features asymmetric major and minor grooves.
🧫
A-DNA (Dehydrated)
Found under dehydrated conditions. Wider (11.5 Å radius) with 11 bp per turn and 2.6 Å rise. The major groove is deep and narrow; the minor groove is wide and shallow.
⟳
Z-DNA (Left-Handed)
A left-handed helix that forms in GC-rich regions under high salt conditions. Narrower (9.0 Å) with 12 bp per turn. Associated with gene regulation and chromatin remodeling.
The double helix is held together by hydrogen bonds between complementary base pairs: A pairs with T through two hydrogen bonds, while G pairs with C through three. The aromatic bases stack vertically through pi-pi interactions, stabilizing the helix interior. The major groove (wider) is where most DNA-binding proteins read the sequence, while the minor groove (narrower) is targeted by small-molecule binders.
×
Sign in
Access your VigyanLLM account
Don't have an account? Register
// ─── STATE ────────────────────────────────────────
let viewer = null;
let currentData = null;
// ─── INIT ──────────────────────────────────────────
function initViewer() {
// DNA type selector
document.querySelectorAll('.dna-type-btn').forEach(btn => {
btn.addEventListener('click', function() {
document.querySelectorAll('.dna-type-btn').forEach(b => b.classList.remove('active'));
this.classList.add('active');
updateStats();
});
});
// Build button
document.getElementById('buildBtn').addEventListener('click', buildStructure);
// Input changes update stats
document.getElementById('seqInput').addEventListener('input', updateStats);
// Toggle changes re-render if structure exists
['showBackbone','showBases','showHbonds','showLabels','showPrimerHL'].forEach(id => {
document.getElementById(id).addEventListener('change', function() {
if (currentData) buildStructure();
});
});
// Style/color changes re-render
document.getElementById('styleSelect').addEventListener('change', function() {
if (currentData) buildStructure();
});
document.getElementById('colorSelect').addEventListener('change', function() {
if (currentData) buildStructure();
});
// Mobile menu
var ham = document.getElementById('hamburger');
var mm = document.getElementById('mobile-menu');
if (ham) ham.addEventListener('click', function() {
this.classList.toggle('active');
mm.classList.toggle('open');
});
// Initial stats
updateStats();
// Auto-build — wait for 3Dmol to load
waitFor3Dmol();
}
function waitFor3Dmol() {
if (typeof $3Dmol !== 'undefined') {
buildStructure();
} else {
setTimeout(waitFor3Dmol, 100);
}
}
document.addEventListener('DOMContentLoaded', initViewer);
// ─── UPDATE STATS ──────────────────────────────────
function updateStats() {
var seq = document.getElementById('seqInput').value.toUpperCase().replace(/[^ATGC]/g, '');
var dnaType = getSelectedType();
var params = window.DNAViewer.DNA_TYPES[dnaType];
var gc = seq.length > 0 ? Math.round((seq.split('').filter(b => b==='G'||b==='C').length / seq.length) * 100) : 0;
var turns = seq.length > 0 ? (seq.length / params.basesPerTurn).toFixed(1) : '0';
document.getElementById('statLen').textContent = seq.length;
document.getElementById('statGC').textContent = gc + '%';
document.getElementById('statTurns').textContent = turns;
}
function getSelectedType() {
var active = document.querySelector('.dna-type-btn.active');
return active ? active.getAttribute('data-type') : 'B-DNA';
}
// ─── BUILD STRUCTURE ──────────────────────────────
function buildStructure() {
var seq = document.getElementById('seqInput').value;
var dnaType = getSelectedType();
var fwd = document.getElementById('fwdPrimer').value;
var rev = document.getElementById('revPrimer').value;
var errEl = document.getElementById('errorMsg');
errEl.style.display = 'none';
// Validate sequence
var val = window.DNAViewer.validateSequence(seq);
if (!val.valid) {
errEl.textContent = val.error;
errEl.style.display = 'block';
return;
}
// Validate primers
if (fwd) {
var fwdVal = window.DNAViewer.validatePrimer(fwd, val.cleaned);
if (!fwdVal.valid) {
errEl.textContent = 'Forward primer: ' + fwdVal.error;
errEl.style.display = 'block';
return;
}
}
if (rev) {
var revVal = window.DNAViewer.validatePrimer(rev, val.cleaned);
if (!revVal.valid) {
errEl.textContent = 'Reverse primer: ' + revVal.error;
errEl.style.display = 'block';
return;
}
}
try {
currentData = window.DNAViewer.generatePDB(val.cleaned, dnaType, fwd, rev);
renderViewer();
showStats();
updateStats();
} catch (e) {
errEl.textContent = 'Error generating structure: ' + e.message;
errEl.style.display = 'block';
console.error('DNA generation error:', e);
}
}
// ─── RENDER VIEWER ────────────────────────────────
function renderViewer() {
var container = document.getElementById('viewer-3d');
container.innerHTML = '';
try {
viewer = $3Dmol.createViewer(container, {
backgroundColor: '#0a0a1a',
antialias: true,
disableFog: true
});
// Add PDB model
var model = viewer.addModel(currentData.pdb, 'pdb');
// Apply style
applyStyle(model);
// Center and zoom — use viewportProperty for auto-fit
viewer.zoomTo();
// Rotate to show helix from side view
viewer.rotate(90, 'y');
viewer.zoom(1.6);
viewer.render();
// Resize handler
window.addEventListener('resize', function() {
if (viewer) {
var w = container.clientWidth;
var h = container.clientHeight;
viewer.resize();
viewer.render();
}
});
} catch (e) {
console.error('3Dmol.js init failed:', e);
container.innerHTML = '🧬
3D rendering requires WebGL
Try Chrome, Firefox, or Safari