DJ-1 / PARK7 — Structure Explorer

https://antfitch.github.io/dj1-explorer/

An interactive, single-page explainer for DJ-1 (gene PARK7, UniProt Q99497) — a small human protein that acts as a cellular oxidative-stress sensor, and whose loss causes an inherited, early-onset form of Parkinson's disease.

The page loads the real AlphaFold-predicted structure live from EMBL-EBI and renders it in an interactive 3D viewer, alongside a guided walkthrough of the protein's redox-switch chemistry. It's aimed at a curious general reader rather than a structural biologist: the goal is to connect an abstract fold to a concrete biological consequence.

Features

• Live 3D structure — real coordinates fetched at runtime from AlphaFold DB, rendered with 3Dmol.js. Not a recreation or a static image.
• Four coloring modes — per-residue confidence (pLDDT), N→C rainbow, atom elements (N/O/S), and sensor-cysteine highlighting. Plus an axis-spin toggle.
• Redox switch panel — steps through the four oxidation states (–SH → –SOH → –SO₂H → –SO₃H) for each of the three sensor cysteines (Cys46, Cys53, Cys106), with plain-language commentary on what each state means for the cell.
• Sequence map — all 189 residues, clickable, synced bidirectionally with the 3D view.
• Side chain spotlight — hand-drawn skeletal diagrams for arginine and cysteine, with a per-atom key explaining what each element symbol means and why it matters.
• Graceful degradation — if the AlphaFold server is unreachable (CORS, sandboxed iframe, network policy), the viewer falls back to the experimental crystal structure PDB 1P5F — the same protein — and relabels the UI honestly, disabling confidence coloring since crystallographic B-factors are not pLDDT scores. If WebGL itself is unavailable, the 3D panel says so and every other panel keeps working.

Running it

No build step, no dependencies to install. Open the file directly:

open index.html

Or serve it over HTTP, which is recommended — some browsers apply stricter CORS rules to file:// origins, which can push the viewer into its PDB fallback path unnecessarily:

python3 -m http.server 8000

Then visit http://localhost:8000/.

Requirements

A modern browser with WebGL enabled. The page pulls three things from the network at runtime:

Resource	Host	Purpose
3Dmol.js 2.0.4	cdnjs.cloudflare.com	3D molecular viewer
Fraunces, IBM Plex Sans/Mono	fonts.googleapis.com	Typography
AF-Q99497-F1 model	alphafold.ebi.ac.uk	Structure coordinates

It will not work fully offline. If the structure host is blocked the page still renders and falls back to RCSB; if the CDN is blocked the 3D viewer will not initialize at all.

Data sources & attribution

• Structure — AlphaFold Protein Structure Database, entry AF-Q99497-F1 (EMBL-EBI / Google DeepMind), licensed CC-BY 4.0. Coordinates are fetched live at page load and are not redistributed in this repository.
• Fallback structure — PDB 1P5F, human DJ-1 at 1.1 Å, via RCSB.
• Sequence & annotation — UniProt Q99497.
• Viewer — 3Dmol.js, BSD-3-Clause.

If you cite or reuse the structural data, cite AlphaFold and UniProt directly rather than this page.

Accuracy notes

This is a teaching tool, and a few things are deliberately simplified. They are called out on the page itself, and repeated here so nobody is misled by a screenshot:

1. The oxidation walkthrough is a simplified illustration of a real, published redox mechanism. It is not a series of per-state crystal structures.
2. Only one subunit is shown. DJ-1 functions as a homodimer in the cell; the AlphaFold entry models a single chain.
3. Side-chain diagrams are schematic skeletal structures, not extracted geometry.

Confidence values are not on this list: both the 3D coloring and the sequence map read the model's own per-residue pLDDT out of the downloaded file's B-factor column. Nothing about confidence is estimated or stylized.

Known limitations

• Side-chain spotlight diagrams exist for arginine and cysteine only; other residues show a placeholder. Adding one is a data-only change — see SIDECHAINS in js/data.js.
• The AlphaFold model is requested in PDB format rather than mmCIF, because 3Dmol 2.0.4's mmCIF parser does not read _atom_site.B_iso_or_equiv and therefore drops the pLDDT scores entirely. If that parser gains B-factor support, the order in AF_SOURCES can be revisited.
• Structure version numbers are pinned in AF_SOURCES. AlphaFold DB serves only the current version, so when v6 is superseded the list needs updating.

Project layout

index.html             markup and page structure
css/styles.css         all styling; the pLDDT band colors live here and only here
js/data.js             sequence, annotation copy, side-chain diagram geometry
js/state.js            shared UI state
js/viewer.js           3Dmol integration: loading, coloring, camera
js/ui.js               sequence map, residue picker, redox panel, side-chain spotlight
js/main.js             wiring and startup

Scripts are plain classic <script> tags rather than ES modules, so the page still works when opened directly from disk. Load order matters: data → state → viewer → ui → main.

The four confidence-band colors are defined once, as CSS custom properties in css/styles.css. js/viewer.js reads them back out with getComputedStyle, so the 3D render, the legend swatches and the sequence map are guaranteed to agree.

License

Copyright 2026 Amanda Fitch

Code in this repository — markup, styles, and viewer logic — is licensed under the Apache License, Version 2.0. You may obtain a copy of the license at http://www.apache.org/licenses/LICENSE-2.0

The explanatory prose and the SVG side-chain diagrams are licensed under CC-BY 4.0. This split follows the usual convention for a project that is part software and part written explanation: Apache 2.0 governs the software, and a content license governs the writing, which Apache 2.0 fits awkwardly.

Structure data is not covered by either and is not redistributed here. It is fetched at runtime from AlphaFold DB under CC-BY 4.0 — see Data sources & attribution.

No third-party code is bundled in this repository. 3Dmol.js is loaded from a CDN at runtime and remains under its own BSD-3-Clause license.