Anatomy of the Human Heart

Interactive Educational Graphic

This interactive heart diagram was created as part of an online feature for Georgia Tech's Research Horizons magazine. We produced an article about new technologies being developed to fight heart disease. I worked with our motion designer, Harriss Callahan, who designed the animations and presented the idea of making the graphic interactive. We used an After Effects extension to produce SVG animations which could be triggered using Javascript.

Project Details

Tools

Adobe After Effects
Bodymovin
CSS
JQuery
Drupal custom block

Roles

UI and layout design
Front-end development
Drupal implementation

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.

Responsive Development

interactive heart diagram on a computer screen

Drupal Implementation

After creating a functional prototype of the component, I built a custom block in Drupal to house it. The custom block can be placed anywhere the content creator chooses and will ensure that the code for this component will only load on nodes in which it is used.

The component was published as part of an article about advances in technologies used to treat cardiac patients.

Many thanks to Harriss Callahan for including me on this project and for introducing me to Bodymovin and Lottie. Harriss is also responsible the excellent content design for this article.