heart diagram on a computer screen

Heart Diagram

This interactive heart diagram was created as part of an online feature for Georgia Tech's Research Horizons magazine about new technologies being developed to fight heart disease. I worked with our motion designer who developed the animations and produced json files, which I then fit into an interactive layout. The result is a clean animated svg graphic.


  • Digital/Web content


  • UI Design
  • HTML/CSS/JQuery/JQuery UI
  • Drupal 7 PHP template implementation

Diagram Visuals

interactive heart diagram
interactive heart diagram on a phone

Feature Article

A peek at the article the diagram was featured in, designed and animated by Harris Callahan:

interactive heart diagram on a phone

Interactive Graphic

Anatomy of the Human Heart

Select a term to see a demonstration of the heart's anatomy.

The most muscular chamber of the heart pumps oxygenated blood out to the body.

The valve leading to from the left ventricle to the aorta.

The valve leading from the left atrium to the left ventricle.

Receives oxygenated blood from the lungs and pumps it into the left ventricle.

The great artery that carries oxygenated blood to the body.

Muscle that separates the left from the right ventricle.

Pumps blood to the lungs, which remove carbon dioxide from blood and oxygenate the blood.

The valve leading from the right ventricle to the pulmonary artery.

The valve leading from the right atrium to the right ventricle. Heart valves open to allow blood to flow in the right direction and snap shut to prevent backflow.

Receives low-oxygen blood from the body and pumps it into the right ventricle.