Visualizing Gene Expression: Transcription and Splicing

A gene is transcribed into RNA, the intron is spliced out, and the mRNA reaches a ribosome in the cytoplasm. The transcript grows nucleotide by nucleotide on its template, and loses its intron without being redrawn as a new molecule.

Gene expression: transcription and splicing

Step through the mechanism with the controls or the arrow keys, or open it in the viewer for the timeline, the thumbnails and SVG or PNG export.

ElongationShown: RNA polymerase II (bound to Gene (promoter)). Strands: Gene: unwound 10–46. pre-mRNA: bottom strand missing 0–36 (top strand single-stranded); top strand newly synthesised 0–36. Pairing: pre-mRNA top strand 0–36 paired with Gene bottom strand 10–46; Gene top strand 10–46 unpaired.
Gene expression: transcription and splicing: Elongation.

The mechanism

Transcription copies one strand of a gene into RNA. RNA polymerase II binds at the promoter, the two strands of the DNA separate, and the polymerase adds nucleotides to the 3′ end of the transcript, each one paired with the template strand. When it has finished, the pre-mRNA leaves the template and the DNA closes again.

In eukaryotes the transcript is then spliced. The spliceosome assembles on the pre-mRNA, cuts it at the 5′ splice site, removes the intron and joins the two exons. The mRNA is exported to the cytoplasm, where ribosomes translate it. This example stops when a ribosome sits on the mRNA: capping, polyadenylation and the peptide are not modelled.

  1. 1 A gene at rest

    Pol II sits on the promoter of a closed gene

  2. 2 Initiation

    The gene opens and the transcript begins as four nucleotides

    • The two strands of the gene separate
    • The first nucleotides of the transcript pair with the template strand
  3. 3 Elongation

    Pol II extends the 3′ end along the template

    • Nucleotides are added 5′→3′, each paired with the template
  4. 4 Release

    The finished pre-mRNA leaves the template and the gene closes

  5. 5 Splice sites

    The spliceosome assembles on the pre-mRNA and cuts the 5′ splice site

  6. 6 Splicing

    The intron is excised and the two exons are joined

    • The intron leaves the molecule
    • Nucleotide 11 becomes the covalent neighbour of nucleotide 24
  7. 7 Export and a ribosome on the junction

    In the cytoplasm, a ribosome covers the end of exon 1 and the start of exon 2

    • The mRNA moves to the cytoplasm
    • A ribosome footprint of 8 nucleotides spans the exon–exon junction

A schematic, explanatory model: it shows the order of events, not stoichiometry or kinetics.

How Molecular Motion represents it

The gene is a dna actor and the transcript an rna actor, each with its own coordinates. An alignment declares which nucleotides of the transcript correspond to which of the gene, so pair can only pair them where they match.

The transcript does not appear whole. Its initial state declares that only the first four nucleotides exist, and extend grows it from its 3′ end by 32 more, along the template. unwind and anneal open and close the gene, and RNA polymerase II occupys the promoter with a footprint of eight base pairs.

Splicing is excise-interval: the intron is removed and its two flanks become covalent neighbours on the same molecule. Coordinates are never renumbered, so the splice sites and the alignment keep their meaning afterwards. translocate moves the mRNA from the nucleus to the cytoplasm, which the figure draws as two bands.

From examples/gene-expression.yaml
actors:
  - id: pre-mrna
    type: rna
    label: pre-mRNA
    compartment: nucleus
    nucleic: { length: 36 }
    sites:
      - { id: three-prime, at: 4 }
      - { id: donor, at: 12, label: 5′ splice site }
      - { id: acceptor, at: 24, label: 3′ splice site }
      - { id: intron, span: [12, 24], label: Intron }
      - { id: upstream, at: 8 }
    # The transcript begins as its first four nucleotides (RFC 0007): state, not an event.
    initial:
      visible: false
      nucleic:
        missing: [{ strand: top, from: 4, to: 36 }]
        nascent: [{ strand: top, from: 0, to: 4 }]

  - id: pol2
    type: protein
    label: RNA polymerase II
    color: "#5aa9a0"
    compartment: nucleus
    footprint: { length: 8, form: duplex }

steps:
  - id: elongation
    title: Elongation
    summary: Pol II extends the 3′ end along the template
    keyEvents:
      - Nucleotides are added 5′→3′, each paired with the template
    actions:
      - { type: extend, target: pre-mrna.three-prime, length: 32, by: pol2 }

  - id: splicing
    title: Splicing
    summary: The intron is excised and the two exons are joined
    keyEvents:
      - The intron leaves the molecule
      - Nucleotide 11 becomes the covalent neighbour of nucleotide 24
    actions:
      - { type: excise-interval, target: pre-mrna.intron, by: spliceosome }
      - { type: unbind, actor: spliceosome }
      - { type: hide, actor: spliceosome }

That is part of the complete file. Showing it on a page takes a few lines:

Figure.tsx
import { parseMechanism } from '@molecular-motion/core/yaml';
import { MolecularMechanism } from '@molecular-motion/react';
import source from './gene-expression.yaml?raw';   // Vite; any way of reading the file as text works

export function Figure() {
  return <MolecularMechanism definition={parseMechanism(source)} controls />;
}

The language describes actors, sites and coordinates, and Actions lists every action used here. To change this mechanism and see the result, paste the file into the playground.

All examples · About Molecular Motion · Source on GitHub