Orris

Create a visual explanation on Thyroid hormones

Reading File
Finding Sources
Finding Sources
Reading File
Reading File
Reading File
Reading File
Reading File
Loading Image
Loading Image
Loading Image
Reading File
Finding Sources
Loading Image
Reading File
Finding Sources
Reading File
Reading File
Loading Image
I now have everything I need - all diagrams retrieved and comprehensive content from multiple textbooks. Let me compose the full visual explanation.

Thyroid Hormones: A Visual Explanation

1. What Are Thyroid Hormones?

The thyroid gland produces two active hormones: thyroxine (T4) and triiodothyronine (T3). They differ by a single iodine atom - T4 has four iodine atoms, T3 has three. T4 is the major secretory product, but T3 is 3-5x more potent. Target tissues solve this by converting T4 into T3 using the enzyme 5'-iodinase.
Structure of T4 and T3:
Molecular structures of Thyroxine (T4) and Triiodothyronine (T3), showing their iodine-substituted phenol ring structures
Structures of T4 and T3. T4 has four iodine atoms; removing one from the outer ring yields the active T3. Removing one from the inner ring yields inactive reverse T3 (rT3). - Costanzo Physiology 7th Ed., Fig. 9.16
A third compound, reverse T3 (rT3), is biologically inactive and forms when T4 loses an iodine from its inner ring instead. Under stress, fasting, or illness, the body preferentially makes rT3 to lower metabolic rate and conserve energy.

2. Where Are They Made? The Thyroid Follicle

The thyroid gland is organized into spherical follicles (200-300 µm in diameter), each surrounded by a single layer of follicular epithelial cells. The hollow center - the follicular lumen - contains colloid, a viscous material made mostly of thyroglobulin (TG), a large glycoprotein that serves as both the scaffold for synthesis and the storage depot for thyroid hormones.
Thyroid follicle anatomy:
Schematic diagram of a thyroid follicle showing follicular epithelial cells surrounding the follicular lumen (colloid), with an adjacent blood vessel
A thyroid follicle. The follicular epithelial cells line the edge; the colloid fills the lumen. - Costanzo Physiology 7th Ed., Fig. 9.17
Thyrocytes (follicular cells) have a basal membrane facing the blood and an apical membrane facing the colloid. This polarity is essential to the synthesis process.

3. Synthesis: Step by Step

Thyroid hormone synthesis is one of the most complex hormone-making processes in the body, combining intracellular and extracellular steps. Here is the full pathway:
Thyroid hormone biosynthesis diagram:
Detailed diagram of thyroid hormone biosynthesis showing iodide transport from plasma into thyrocytes via NIS, movement to the colloid, iodination of tyrosine residues on thyroglobulin, and coupling reactions to form MIT, DIT, T3, T4, and reverse T3
Thyroid hormone biosynthesis. I⁻ is pumped in by NIS, oxidized at the apical membrane, then incorporated into thyroglobulin tyrosines to form MIT and DIT. Coupling of two DITs gives T4; MIT + DIT gives T3. - Ganong's Medical Physiology, Fig. 20-6
The eight key steps are:
StepEvent
1Thyroglobulin (TG) synthesis - TG is made on the rough ER, processed in Golgi, and secreted by exocytosis into the follicular lumen
2Iodide trapping - Na⁺/I⁻ symporter (NIS) on the basal membrane actively pumps I⁻ into the thyrocyte against its electrochemical gradient, driven by the Na⁺ gradient
3Iodide transport to apical membrane - I⁻ moves to the apical surface; pendrin (a Cl⁻/I⁻ exchanger) transports it into the colloid
4Oxidation - Thyroid peroxidase (TPO) oxidizes I⁻ to reactive I⁰ using H₂O₂
5Organification - TPO incorporates I⁰ into carbon-3 of tyrosine residues on TG. One iodine → monoiodotyrosine (MIT); two iodines → diiodotyrosine (DIT)
6Coupling - TPO catalyzes oxidative coupling: DIT + DIT → T4 (+ alanine); MIT + DIT → T3 (+ alanine); DIT + MIT → reverse T3
7Secretion - On TSH stimulation, thyrocytes endocytose colloid, lysosomes hydrolyze TG peptide bonds, and free T4 and T3 are released into the capillaries
8Salvage - Free MIT and DIT are deiodinated by thyroid deiodinase, recycling iodine and tyrosine back into the next synthetic cycle
Colloid acts as a hormone reservoir - the body can maintain normal circulating thyroid hormone levels for up to 2 months on a completely iodine-free diet.
  • Ganong's Review of Medical Physiology, 26th Ed.
  • Costanzo Physiology, 7th Ed.
  • Sabiston Textbook of Surgery

4. Regulation: The Hypothalamic-Pituitary-Thyroid (HPT) Axis

Thyroid hormone production is tightly controlled by a three-tier feedback loop:
HPT axis regulation:
Diagram showing the hypothalamic-pituitary-thyroid axis: hypothalamus secretes TRH (stimulating, +) to the anterior pituitary, which secretes TSH (stimulating, +) to the thyroid gland, which produces T4 and T3 that feed back negatively (-) to suppress the anterior pituitary
Regulation of thyroid hormone secretion via the HPT axis. Dashed arrow = negative feedback. - Costanzo Physiology 7th Ed., Fig. 9.19
How the axis works:
  1. Hypothalamus secretes TRH (thyrotropin-releasing hormone, a tripeptide) from the paraventricular nucleus into the portal circulation
  2. TRH stimulates thyrotroph cells of the anterior pituitary to transcribe and secrete TSH (thyroid-stimulating hormone, a glycoprotein with α and β subunits)
  3. TSH binds to receptors on thyroid follicular cells (Gs-coupled → cAMP), stimulating every step in synthesis: iodide uptake, oxidation, organification, coupling, endocytosis, and TG proteolysis
  4. Negative feedback: T3 (and T4 converted to T3 by pituitary deiodinase) suppresses TSH secretion by down-regulating the TRH receptor on thyrotrophs
This feedback loop results in a remarkably steady baseline rate of TSH and thyroid hormone secretion.
Factors modifying the axis:
StimulatoryInhibitory
TSHExcess iodide (Wolff-Chaikoff effect)
Thyroid-stimulating immunoglobulins (Graves disease)Propylthiouracil (PTU) - blocks peroxidase
Elevated TBG (e.g., pregnancy)Perchlorate/thiocyanate - block NIS
Cold exposureCarbimazole/methimazole
Selenium deficiency
  • Costanzo Physiology, 7th Ed., Table 9.8

5. Protein Binding and Transport in Blood

Once released into the bloodstream:
  • >99% of T4 and T3 circulate bound to plasma proteins (mainly thyroxine-binding globulin/TBG, also transthyretin and albumin)
  • <1% circulates free (unbound) - only this fraction is biologically active
TBG acts as a large circulating reservoir. When free hormone falls, bound hormone is released to replenish it. This buffering keeps free T3/T4 levels remarkably stable.
Clinical implication: Pregnancy raises estrogen, which increases TBG production. Total T4 rises, but free T4 remains normal - the patient is euthyroid. Similarly, liver failure decreases TBG, raising free hormone transiently until negative feedback re-establishes balance.

6. Peripheral Activation - T4 to T3

In target tissues, the enzyme 5'-iodinase (deiodinase type 1/2) removes one iodine from the outer ring of T4, converting it to the active T3. Alternatively, removing iodine from the inner ring produces the inactive reverse T3 (rT3).
Under starvation, stress, illness, or beta-blocker use, target tissue 5'-iodinase is inhibited, shifting the balance toward rT3 production. This lowers metabolic rate and conserves energy - a protective adaptation. Notably, brain deiodinase is a different isoform (type 2) and is not inhibited, ensuring the brain is protected.

7. Mechanism of Action in Target Cells

T3 acts as a nuclear receptor ligand - its mechanism is genomic:
Actions of thyroid hormones:
Flowchart of thyroid hormone mechanism: T4 is converted by 5'-iodinase to T3, which binds nuclear receptors, stimulates DNA transcription and mRNA translation, leading to synthesis of new proteins that mediate effects on Growth, Nervous System, BMR (Na+K+ATPase, O2 consumption, heat), Metabolism (glucose absorption, glycogenolysis, gluconeogenesis, lipolysis), and Cardiovascular (cardiac output, beta-1 upregulation)
Actions of thyroid hormones at the cellular and organ system level. - Costanzo Physiology 7th Ed., Fig. 9.20
Step-by-step cellular mechanism:
  1. T4 enters the cell and is converted to T3 by 5'-iodinase
  2. T3 enters the nucleus and binds to thyroid hormone receptors (TRs), which belong to the nuclear receptor superfamily
  3. The T3-TR complex binds to thyroid-regulatory elements (TREs) on DNA
  4. This stimulates transcription → new mRNA → new proteins
Key proteins induced include Na⁺/K⁺ ATPase (increases O₂ consumption, BMR, heat), myosin and β1-adrenergic receptors in heart cells, and metabolic enzymes in liver and fat.

8. Physiological Effects (Organ-by-Organ)

SystemEffect of T3
Basal Metabolic Rate↑ Na⁺/K⁺ ATPase → ↑ O₂ consumption, heat production; affects all tissues except brain, gonads, spleen
Cardiovascular↑ heart rate, ↑ contractility (via myosin + β1 receptors + Ca²⁺ ATPase), ↑ cardiac output
Carbohydrate metabolism↑ GI glucose absorption, ↑ glycogenolysis, ↑ gluconeogenesis
Fat metabolism↑ lipolysis; ↓ plasma cholesterol (↑ LDL receptors in liver)
Protein metabolismNet catabolic at high doses (↑ synthesis AND degradation)
Growth & boneSynergizes with GH and IGF-1 for bone maturation; slowed growth in children without T3
Nervous systemCNS maturation (critical in fetal life and infancy); normal adult neural function
MuscleRegulates MHC gene expression; excess → thyrotoxic myopathy; deficiency → weakness, cramps, stiffness
  • Ganong's Review of Medical Physiology, 26th Ed.
  • Costanzo Physiology, 7th Ed.

9. Clinical Consequences: Hypo vs. Hyperthyroidism

FeatureHypothyroidismHyperthyroidism
Metabolic rate↓ BMR, cold intolerance, weight gain↑ BMR, heat intolerance, weight loss
CardiovascularBradycardia, ↓ outputTachycardia, palpitations, ↑ output
Skin/hairDry skin, coarse hair, myxedemaWarm moist skin, fine hair
Nervous systemSlowed reflexes, depression, cognitive slowingAnxiety, tremor, hyperreflexia
GIConstipationDiarrhea, ↑ appetite
Growth (children)Dwarfism, cretinism if congenitalAccelerated growth, early epiphyseal closure
Lab↑ TSH, ↓ free T4 (primary); ↓ cholesterol improves↓ TSH, ↑ free T4; ↓ cholesterol
Common causeHashimoto thyroiditis (autoimmune), iodine deficiencyGraves disease (TSH-receptor antibodies)
In Graves disease, thyroid-stimulating immunoglobulins (IgG antibodies) bind and activate TSH receptors, causing unregulated stimulation of the gland - TSH itself is paradoxically low due to negative feedback from the excess hormones.

Summary Pathway (Quick Reference)

Hypothalamus
    │  TRH (+)
    ▼
Anterior Pituitary
    │  TSH (+)
    ▼
Thyroid Follicle
  • NIS traps I⁻ from blood
  • TPO oxidizes I⁻ → organification on Tg (MIT, DIT)
  • Coupling: DIT+DIT → T4 | MIT+DIT → T3
  • TSH stimulation → endocytosis, proteolysis → T4, T3 secreted
    │
    ▼ In circulation (>99% bound to TBG)
    ▼ Free T4 → target tissues → 5'-iodinase → T3 (active)
    │                                              ↓ (inner ring) → rT3 (inactive)
    ▼
T3 binds nuclear receptor → TRE on DNA → new proteins
→ ↑ BMR, ↑ heart rate, ↑ growth, ↑ metabolism, CNS maturation
    │
    └──────── Negative feedback to anterior pituitary (–)
Sources:
  • Costanzo Physiology, 7th Edition (Figs. 9.16, 9.17, 9.19, 9.20)
  • Ganong's Review of Medical Physiology, 26th Edition (Figs. 20-6, 20-8, 20-9)
  • Sabiston Textbook of Surgery, Biological Basis of Modern Surgical Practice (Figs. 73.5, 73.6)

Y can't u create visual explanation videos?

That's a fair question! Here's the honest answer:
I can't generate videos because I'm a text and image AI assistant. Specifically:
  • Video generation requires specialized AI models (like Sora, Runway, Kling, etc.) that are trained to synthesize moving frames, animations, voiceovers, and transitions - a fundamentally different architecture from what I run on
  • I can generate static images (diagrams, posters, illustrations) and rich text-based visual explanations like the one I just made, but not animated or video output
  • No audio/voiceover - video explanations typically pair visuals with narration, which requires text-to-speech and video editing pipelines I don't have access to
What I can do as alternatives:
OptionWhat I can make
📊 Rich visual diagramsLike the thyroid explanation above, with real textbook images
🖼️ Custom illustrated postersAI-generated infographic-style images
📑 Slide decks (.pptx)Presentation slides you can animate yourself in PowerPoint
📄 PDF visual summariesFormatted, printable visual notes
If you want video-style explanations, tools like:
  • Manim (animated math/science videos, like 3Blue1Brown)
  • Synthesia or HeyGen (AI presenter videos)
  • Canva (animated presentations)
...are purpose-built for that.
Want me to make a slide deck or illustrated poster on thyroid hormones instead?

Can u create mind maps?

Asking for Preferences
Running Command

mkdir -p /home/daytona/workspace/thyroid-mindmap

Writing File

~/thyroid-mindmap/thyroid_mindmap.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Thyroid Hormones – Mind Map</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background: #0f1117;
    font-family: 'Segoe UI', Arial, sans-serif;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    user-select: none;
  }
  #canvas-wrap {
    width: 100%; height: 100%;
    position: relative;
    overflow: hidden;
    cursor: grab;
  }
  #canvas-wrap.dragging { cursor: grabbing; }
  svg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: visible;
  }
  .node-group { cursor: pointer; }
  .node-rect {
    rx: 12; ry: 12;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
    transition: filter 0.2s;
  }
  .node-group:hover .node-rect {
    filter: drop-shadow(0 6px 20px rgba(255,255,255,0.25));
  }
  .node-text {
    fill: #fff;
    font-weight: 600;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
  }
  .link {
    fill: none;
    stroke-width: 2;
    opacity: 0.5;
  }
  #tooltip {
    position: fixed;
    background: rgba(20,20,30,0.97);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    padding: 12px 16px;
    max-width: 320px;
    pointer-events: none;
    display: none;
    z-index: 999;
    color: #e8e8e8;
    font-size: 13px;
    line-height: 1.6;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  }
  #tooltip h4 {
    color: #fff;
    font-size: 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 5px;
  }
  #controls {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 100;
  }
  .ctrl-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    border-radius: 8px;
    width: 40px; height: 40px;
    font-size: 18px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
  }
  .ctrl-btn:hover { background: rgba(255,255,255,0.2); }
  #legend {
    position: fixed;
    top: 20px;
    left: 20px;
    background: rgba(20,20,30,0.9);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 12px 16px;
    color: #ccc;
    font-size: 12px;
    z-index: 100;
    line-height: 1.9;
  }
  #legend h5 { color: #fff; margin-bottom: 4px; font-size: 13px; }
  .leg-dot {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 3px;
    margin-right: 6px;
    vertical-align: middle;
  }
  #title-bar {
    position: fixed;
    top: 20px; left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
    pointer-events: none;
    z-index: 100;
  }
  #hint {
    position: fixed;
    bottom: 20px; left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.35);
    font-size: 12px;
    pointer-events: none;
    z-index: 100;
  }
</style>
</head>
<body>
<div id="title-bar">🦋 Thyroid Hormones — Mind Map</div>
<div id="legend">
  <h5>Legend</h5>
  <div><span class="leg-dot" style="background:#c0392b"></span> Central Topic</div>
  <div><span class="leg-dot" style="background:#1a6eb5"></span> Main Branch</div>
  <div><span class="leg-dot" style="background:#16a085"></span> Sub-branch</div>
  <div><span class="leg-dot" style="background:#7d3c98"></span> Mechanism</div>
  <div><span class="leg-dot" style="background:#b7770d"></span> Clinical</div>
</div>
<div id="controls">
  <button class="ctrl-btn" id="zoomIn" title="Zoom In">+</button>
  <button class="ctrl-btn" id="zoomOut" title="Zoom Out">−</button>
  <button class="ctrl-btn" id="reset" title="Reset View">⌂</button>
</div>
<div id="hint">Drag to pan · Scroll to zoom · Hover nodes for details</div>
<div id="tooltip"></div>
<div id="canvas-wrap">
  <svg id="svg"></svg>
</div>

<script>
const W = window.innerWidth, H = window.innerHeight;
const CX = W / 2, CY = H / 2;

// ─── Node Data ───────────────────────────────────────────────────
const nodes = [
  // Central
  {
    id: "center", label: "THYROID\nHORMONES", x: CX, y: CY,
    w: 160, h: 70, color: "#c0392b", fontSize: 15,
    info: { title: "Thyroid Hormones (T3 & T4)", body: "Two iodine-containing amino acid–derived hormones secreted by thyroid follicular cells. T4 (thyroxine) = prohormone; T3 (triiodothyronine) = active form. Regulate metabolism, growth, development, and cardiovascular function." }
  },

  // ── Branch 1: Structure
  {
    id: "structure", label: "STRUCTURE", x: CX - 420, y: CY - 260,
    w: 130, h: 48, color: "#1a6eb5", fontSize: 13,
    info: { title: "Chemical Structure", body: "Both T3 and T4 are iodothyronines — tyrosine-based with two phenol rings. T4 has 4 iodine atoms; T3 has 3. They differ only by one iodine on the outer (phenolic) ring." }
  },
  {
    id: "T4", label: "T4\n(Thyroxine)", x: CX - 580, y: CY - 340,
    w: 120, h: 50, color: "#16a085", fontSize: 12,
    info: { title: "T4 – Thyroxine", body: "Major secretory product (~90% of output). 4 iodine atoms. Half-life ~7 days. >99% protein-bound. Acts as a prohormone — converted to T3 in target tissues by 5'-iodinase." }
  },
  {
    id: "T3", label: "T3\n(Active form)", x: CX - 580, y: CY - 200,
    w: 120, h: 50, color: "#16a085", fontSize: 12,
    info: { title: "T3 – Triiodothyronine", body: "3-5x more potent than T4. 3 iodine atoms. Half-life ~1 day. Binds nuclear receptors (TRα, TRβ) to regulate gene transcription. Most T3 in blood comes from peripheral T4 conversion." }
  },
  {
    id: "rT3", label: "Reverse T3\n(Inactive)", x: CX - 580, y: CY - 100,
    w: 120, h: 50, color: "#7d3c98", fontSize: 11,
    info: { title: "Reverse T3 (rT3)", body: "Formed by removing iodine from the INNER ring of T4 (vs. T3 from the outer ring). Biologically inactive. Rises in starvation, illness, stress, and with beta-blockers — a protective energy-conservation mechanism." }
  },

  // ── Branch 2: Synthesis
  {
    id: "synthesis", label: "SYNTHESIS", x: CX - 420, y: CY + 60,
    w: 130, h: 48, color: "#1a6eb5", fontSize: 13,
    info: { title: "Thyroid Hormone Synthesis", body: "A multistep process requiring iodine, tyrosine, thyroglobulin (TG), thyroid peroxidase (TPO), and H₂O₂. Unique because it is partially extracellular (in the colloid). Regulated by TSH." }
  },
  {
    id: "nis", label: "① NIS\n(Iodide Trap)", x: CX - 610, y: CY - 10,
    w: 120, h: 50, color: "#16a085", fontSize: 11,
    info: { title: "Na⁺/I⁻ Symporter (NIS)", body: "Active transporter on the basolateral membrane of thyrocytes. Pumps I⁻ into the cell against its gradient, driven by the Na⁺ electrochemical gradient. Stimulated by TSH. Target of radioactive iodine (¹³¹I) therapy." }
  },
  {
    id: "tpo", label: "② TPO\n(Organification)", x: CX - 610, y: CY + 80,
    w: 120, h: 50, color: "#16a085", fontSize: 11,
    info: { title: "Thyroid Peroxidase (TPO)", body: "Enzyme on the apical membrane. Uses H₂O₂ to oxidize I⁻ → I⁰, then incorporates it into tyrosine residues on thyroglobulin (organification). Also catalyzes the coupling reaction (MIT+DIT → T3; DIT+DIT → T4)." }
  },
  {
    id: "coupling", label: "③ Coupling\nMIT + DIT", x: CX - 610, y: CY + 170,
    w: 120, h: 50, color: "#16a085", fontSize: 11,
    info: { title: "Coupling Reaction", body: "TPO catalyses oxidative coupling of iodotyrosines still bound to thyroglobulin:\n• MIT + DIT → T3 + alanine\n• DIT + DIT → T4 + alanine\n• DIT + MIT → reverse T3 + alanine\nThen TSH triggers endocytosis of colloid → proteolysis of TG → T3/T4 secreted." }
  },
  {
    id: "tg", label: "Thyroglobulin\n(Reservoir)", x: CX - 420, y: CY + 180,
    w: 130, h: 48, color: "#7d3c98", fontSize: 11,
    info: { title: "Thyroglobulin (TG)", body: "Large glycoprotein (660 kDa) with 123 tyrosine residues, only 4–8 used for hormone synthesis. Synthesized in thyrocytes, secreted into colloid. Acts as storage scaffold — can supply T3/T4 for up to 2 months without dietary iodine." }
  },

  // ── Branch 3: Regulation (top right)
  {
    id: "regulation", label: "REGULATION\n(HPT Axis)", x: CX + 360, y: CY - 300,
    w: 145, h: 55, color: "#1a6eb5", fontSize: 13,
    info: { title: "HPT Axis — Regulation", body: "Three-tier feedback loop: Hypothalamus → TRH → Anterior Pituitary → TSH → Thyroid gland → T3/T4. T3 exerts negative feedback on the pituitary, keeping hormone levels steady." }
  },
  {
    id: "trh", label: "TRH\n(Hypothalamus)", x: CX + 530, y: CY - 400,
    w: 130, h: 50, color: "#16a085", fontSize: 11,
    info: { title: "TRH – Thyrotropin-Releasing Hormone", body: "Tripeptide secreted by paraventricular nucleus of hypothalamus. Acts on anterior pituitary thyrotrophs to stimulate TSH gene transcription and TSH secretion. Also stimulates prolactin secretion." }
  },
  {
    id: "tsh", label: "TSH\n(Ant. Pituitary)", x: CX + 530, y: CY - 260,
    w: 130, h: 50, color: "#16a085", fontSize: 11,
    info: { title: "TSH – Thyroid-Stimulating Hormone", body: "Glycoprotein with α and β subunits (α shared with LH, FSH, hCG). Binds Gs-coupled receptor on thyrocytes → ↑ cAMP → stimulates every step of T3/T4 synthesis and secretion. Also has trophic effect (thyroid growth/hyperplasia)." }
  },
  {
    id: "feedback", label: "Negative\nFeedback (T3)", x: CX + 530, y: CY - 140,
    w: 130, h: 50, color: "#7d3c98", fontSize: 11,
    info: { title: "Negative Feedback", body: "Free T3 (and T4 converted to T3 by pituitary D2 deiodinase) inhibits TSH secretion by down-regulating TRH receptors on thyrotrophs. This maintains remarkably stable baseline thyroid hormone levels." }
  },

  // ── Branch 4: Transport (right)
  {
    id: "transport", label: "TRANSPORT\n& BINDING", x: CX + 380, y: CY - 40,
    w: 145, h: 55, color: "#1a6eb5", fontSize: 13,
    info: { title: "Protein Transport in Blood", body: "T4 and T3 circulate almost entirely (>99%) bound to plasma proteins. Only FREE hormone is biologically active. Binding proteins buffer free hormone levels." }
  },
  {
    id: "tbg", label: "TBG\n(Main carrier)", x: CX + 560, y: CY - 80,
    w: 120, h: 48, color: "#16a085", fontSize: 11,
    info: { title: "Thyroxine-Binding Globulin (TBG)", body: "Carries ~75% of circulating T4 and T3. Increased by: pregnancy (estrogen inhibits TBG breakdown) → ↑ total T4 but free T4 normal. Decreased by: liver failure → transient ↑ free T4." }
  },
  {
    id: "freehormone", label: "Free T3/T4\n(<1%, Active)", x: CX + 560, y: CY + 40,
    w: 120, h: 48, color: "#7d3c98", fontSize: 11,
    info: { title: "Free (Unbound) Hormone", body: "Only the free fraction enters cells and exerts biological effects. TBG acts as a large reservoir — bound hormone is released when free levels fall. Measured as fT3 and fT4 in labs; more clinically relevant than total T3/T4." }
  },

  // ── Branch 5: Actions (bottom right)
  {
    id: "actions", label: "ACTIONS", x: CX + 340, y: CY + 200,
    w: 130, h: 48, color: "#1a6eb5", fontSize: 13,
    info: { title: "Physiological Actions of T3", body: "T3 binds nuclear receptors (TRα, TRβ) → binds thyroid response elements (TREs) on DNA → transcription of new proteins. Effects span virtually every organ system." }
  },
  {
    id: "bmr", label: "↑ BMR &\nHeat Production", x: CX + 520, y: CY + 140,
    w: 130, h: 50, color: "#16a085", fontSize: 11,
    info: { title: "Basal Metabolic Rate (BMR)", body: "T3 induces Na⁺/K⁺ ATPase in most tissues → ↑ O₂ consumption, ↑ heat production, ↑ BMR. Tissues affected: liver, heart, kidney, muscle. NOT affected: brain, gonads, spleen." }
  },
  {
    id: "cardio", label: "↑ Heart Rate\n& Output", x: CX + 530, y: CY + 230,
    w: 130, h: 50, color: "#16a085", fontSize: 11,
    info: { title: "Cardiovascular Effects", body: "T3 induces β1-adrenergic receptors, myosin heavy chain (α-MHC), and Ca²⁺ ATPase in cardiomyocytes → ↑ heart rate, ↑ contractility, ↑ cardiac output, ↑ blood flow to tissues." }
  },
  {
    id: "metabolism", label: "Metabolism\n(Carb/Fat/Protein)", x: CX + 530, y: CY + 330,
    w: 130, h: 50, color: "#16a085", fontSize: 11,
    info: { title: "Metabolic Effects", body: "Carbohydrate: ↑ GI glucose absorption, ↑ glycogenolysis, ↑ gluconeogenesis.\nFat: ↑ lipolysis, ↓ plasma cholesterol (↑ hepatic LDL receptors).\nProtein: net catabolic at high doses (↑ synthesis AND degradation)." }
  },
  {
    id: "growth", label: "Growth &\nCNS Maturation", x: CX + 380, y: CY + 340,
    w: 130, h: 50, color: "#7d3c98", fontSize: 11,
    info: { title: "Growth & Nervous System", body: "Synergizes with GH and IGF-1 for bone maturation and linear growth. CNS: critical for brain development in fetal life and infancy. Hypothyroidism at birth → cretinism (irreversible intellectual disability) if untreated." }
  },

  // ── Branch 6: Clinical (bottom left)
  {
    id: "clinical", label: "CLINICAL\nDISORDERS", x: CX - 300, y: CY + 310,
    w: 145, h: 55, color: "#b7770d", fontSize: 13,
    info: { title: "Clinical Thyroid Disorders", body: "Two main categories: hypothyroidism (too little) and hyperthyroidism (too much). Both cause widespread multi-system effects due to thyroid hormones acting on nearly every tissue." }
  },
  {
    id: "hypothyroid", label: "Hypothyroidism\n(↓ T3/T4, ↑ TSH)", x: CX - 480, y: CY + 390,
    w: 150, h: 50, color: "#b7770d", fontSize: 11,
    info: { title: "Hypothyroidism", body: "Causes: Hashimoto thyroiditis (most common; autoimmune), iodine deficiency, post-thyroidectomy, radioiodine therapy.\nFeatures: ↓ BMR, cold intolerance, weight gain, bradycardia, constipation, dry skin, coarse hair, slowed reflexes, myxedema, ↑ cholesterol.\nCongenital: cretinism (intellectual disability, growth failure)." }
  },
  {
    id: "hyperthyroid", label: "Hyperthyroidism\n(↑ T3/T4, ↓ TSH)", x: CX - 200, y: CY + 400,
    w: 150, h: 50, color: "#b7770d", fontSize: 11,
    info: { title: "Hyperthyroidism", body: "Causes: Graves disease (TSH-receptor antibodies — most common), toxic multinodular goitre, toxic adenoma, thyroiditis.\nFeatures: ↑ BMR, heat intolerance, weight loss, tachycardia, palpitations, diarrhoea, warm moist skin, fine hair, tremor, anxiety.\nGraves: exophthalmos (proptosis), pretibial myxedema." }
  },
  {
    id: "drugs", label: "Drug\nTargets", x: CX - 60, y: CY + 380,
    w: 120, h: 50, color: "#b7770d", fontSize: 11,
    info: { title: "Pharmacology — Drug Targets", body: "Antithyroid drugs:\n• PTU / Methimazole — inhibit TPO (block organification & coupling)\n• Perchlorate / Thiocyanate — block NIS (iodide uptake)\n• ¹³¹I — radioablation via NIS uptake\n• Beta-blockers — control tachycardia (↓ T4→T3 conversion)\n\nReplacement:\n• Levothyroxine (T4) — standard hypothyroid treatment" }
  },
];

// ─── Edge Data ────────────────────────────────────────────────────
const edges = [
  ["center","structure"],["center","synthesis"],["center","regulation"],
  ["center","transport"],["center","actions"],["center","clinical"],
  ["structure","T4"],["structure","T3"],["structure","rT3"],
  ["synthesis","nis"],["synthesis","tpo"],["synthesis","coupling"],["synthesis","tg"],
  ["regulation","trh"],["regulation","tsh"],["regulation","feedback"],
  ["transport","tbg"],["transport","freehormone"],
  ["actions","bmr"],["actions","cardio"],["actions","metabolism"],["actions","growth"],
  ["clinical","hypothyroid"],["clinical","hyperthyroid"],["clinical","drugs"],
];

// ─── SVG Setup ───────────────────────────────────────────────────
const svg = document.getElementById("svg");
svg.setAttribute("viewBox", `0 0 ${W} ${H}`);

let scale = 1, tx = 0, ty = 0;
let isDragging = false, startX, startY;

function applyTransform() {
  g.setAttribute("transform", `translate(${tx},${ty}) scale(${scale})`);
}

const g = document.createElementNS("http://www.w3.org/2000/svg","g");
svg.appendChild(g);

// Draw edges first
const edgeColors = {
  "center-structure":"#1a6eb5","center-synthesis":"#1a6eb5",
  "center-regulation":"#1a6eb5","center-transport":"#1a6eb5",
  "center-actions":"#1a6eb5","center-clinical":"#b7770d"
};

function getNodeById(id) { return nodes.find(n => n.id === id); }

edges.forEach(([a, b]) => {
  const na = getNodeById(a), nb = getNodeById(b);
  if (!na || !nb) return;
  const path = document.createElementNS("http://www.w3.org/2000/svg","path");
  const x1 = na.x, y1 = na.y, x2 = nb.x, y2 = nb.y;
  const mx = (x1 + x2) / 2, my = (y1 + y2) / 2;
  const key = `${a}-${b}`;
  const color = edgeColors[key] || nb.color || "#555";
  path.setAttribute("d", `M${x1},${y1} Q${mx},${my} ${x2},${y2}`);
  path.setAttribute("class","link");
  path.setAttribute("stroke", color);
  g.appendChild(path);
});

// Draw nodes
const tooltip = document.getElementById("tooltip");

nodes.forEach(node => {
  const grp = document.createElementNS("http://www.w3.org/2000/svg","g");
  grp.setAttribute("class","node-group");
  grp.setAttribute("transform",`translate(${node.x - node.w/2},${node.y - node.h/2})`);

  const rect = document.createElementNS("http://www.w3.org/2000/svg","rect");
  rect.setAttribute("class","node-rect");
  rect.setAttribute("width", node.w);
  rect.setAttribute("height", node.h);
  rect.setAttribute("fill", node.color);
  rect.setAttribute("rx", node.id === "center" ? 35 : 12);
  rect.setAttribute("ry", node.id === "center" ? 35 : 12);
  grp.appendChild(rect);

  const lines = node.label.split("\n");
  const lineH = 16;
  const totalH = lines.length * lineH;
  lines.forEach((line, i) => {
    const txt = document.createElementNS("http://www.w3.org/2000/svg","text");
    txt.setAttribute("class","node-text");
    txt.setAttribute("x", node.w / 2);
    txt.setAttribute("y", node.h / 2 - totalH / 2 + i * lineH + lineH / 2);
    txt.setAttribute("font-size", node.fontSize || 12);
    txt.textContent = line;
    grp.appendChild(txt);
  });

  // Hover tooltip
  grp.addEventListener("mouseenter", (e) => {
    if (node.info) {
      tooltip.style.display = "block";
      tooltip.innerHTML = `<h4>${node.info.title}</h4>${node.info.body.replace(/\n/g,"<br>")}`;
    }
  });
  grp.addEventListener("mousemove", (e) => {
    let x = e.clientX + 16, y = e.clientY + 10;
    if (x + 340 > window.innerWidth) x = e.clientX - 340;
    if (y + 200 > window.innerHeight) y = e.clientY - 200;
    tooltip.style.left = x + "px";
    tooltip.style.top = y + "px";
  });
  grp.addEventListener("mouseleave", () => {
    tooltip.style.display = "none";
  });

  g.appendChild(grp);
});

// ─── Pan & Zoom ───────────────────────────────────────────────────
const wrap = document.getElementById("canvas-wrap");

wrap.addEventListener("mousedown", (e) => {
  isDragging = true;
  startX = e.clientX - tx;
  startY = e.clientY - ty;
  wrap.classList.add("dragging");
});
window.addEventListener("mousemove", (e) => {
  if (!isDragging) return;
  tx = e.clientX - startX;
  ty = e.clientY - startY;
  applyTransform();
});
window.addEventListener("mouseup", () => {
  isDragging = false;
  wrap.classList.remove("dragging");
});

wrap.addEventListener("wheel", (e) => {
  e.preventDefault();
  const delta = e.deltaY > 0 ? 0.9 : 1.1;
  const mouseX = e.clientX, mouseY = e.clientY;
  tx = mouseX - (mouseX - tx) * delta;
  ty = mouseY - (mouseY - ty) * delta;
  scale = Math.min(Math.max(scale * delta, 0.3), 3);
  applyTransform();
}, { passive: false });

// Touch support
let lastTouchDist = null;
wrap.addEventListener("touchstart", (e) => {
  if (e.touches.length === 1) {
    isDragging = true;
    startX = e.touches[0].clientX - tx;
    startY = e.touches[0].clientY - ty;
  }
});
wrap.addEventListener("touchmove", (e) => {
  e.preventDefault();
  if (e.touches.length === 1 && isDragging) {
    tx = e.touches[0].clientX - startX;
    ty = e.touches[0].clientY - startY;
    applyTransform();
  } else if (e.touches.length === 2) {
    const dx = e.touches[0].clientX - e.touches[1].clientX;
    const dy = e.touches[0].clientY - e.touches[1].clientY;
    const dist = Math.sqrt(dx*dx + dy*dy);
    if (lastTouchDist) {
      const delta = dist / lastTouchDist;
      scale = Math.min(Math.max(scale * delta, 0.3), 3);
      applyTransform();
    }
    lastTouchDist = dist;
  }
}, { passive: false });
wrap.addEventListener("touchend", () => { isDragging = false; lastTouchDist = null; });

document.getElementById("zoomIn").addEventListener("click", () => {
  scale = Math.min(scale * 1.2, 3);
  applyTransform();
});
document.getElementById("zoomOut").addEventListener("click", () => {
  scale = Math.max(scale * 0.8, 0.3);
  applyTransform();
});
document.getElementById("reset").addEventListener("click", () => {
  scale = 1; tx = 0; ty = 0;
  applyTransform();
});

applyTransform();
</script>
</body>
</html>
Generating Image

A detailed medical mind map on Thyroid Hormones on a dark background. Central node labeled "THYROID HORMONES" in red. Six main branches radiating outward: 1) STRUCTURE (blue) with sub-nodes T4/Thyroxine, T3/Active form, Reverse T3/Inactive; 2) SYNTHESIS (blue) with sub-nodes NIS Iodide Trap, TPO Organification, Coupling MIT+DIT, Thyroglobulin Reservoir; 3) REGULATION HPT Axis (blue) with sub-nodes TRH Hypothalamus, TSH Anterior Pituitary, Negative Feedback T3; 4) TRANSPORT & BINDING (blue) with sub-nodes TBG Main Carrier, Free T3 T4 Active; 5) ACTIONS (blue) with sub-nodes Increase BMR and Heat, Increase Heart Rate, Metabolism Carb Fat Protein, Growth and CNS Maturation; 6) CLINICAL DISORDERS (orange/gold) with sub-nodes Hypothyroidism, Hyperthyroidism, Drug Targets. Nodes are colorful rounded rectangles with white text. Branches are curved colored lines. Professional clean medical diagram style with good spacing and readability.

This is a shared conversation. Sign in to Orris to start your own chat.