Visualization "American Presidents - Lifetimes & Service"

American Presidents: lifetimes and time in office as circular glyphs

What is this about?

An interactive recreation of the well-known Roman Emperors circular lifetime chart by ⁠@dataisinteresting's WRE-Emperors, applied to U.S. presidents. Each glyph combines lifespan, time in office, and manner of death in one compact mark, so career length and life length can be compared across the full presidential set.

How to read this?

Each president is one glyph.

A thin white arc shows lifespan (full circle = 100 years), starting at birth (12 o'clock) and running clockwise. A thick red arc shows time served in office (Cleveland and Trump show two segments for non-consecutive terms). An icon at the arc's end marks manner of death, or a living marker for presidents still alive.

Sort, filter by manner of death, switch theme, and export SVG/PNG from the page chrome.

Why did I make it?

I wanted the same circular lifetime language as the Roman Emperors chart, but as a browser tool that is easy to update and reusable for other historical periods. U.S. presidents are a clean first dataset: a fixed roster, clear office dates, and a familiar cast for readers testing the encoding.

What's under the hood?

JSON under data/ is the source of truth:

• meta.json - "as of" date for living presidents' open arcs
• presidents.json - one object per unique president

No bundler: serve index.html over HTTP so ES modules and fetch work. See the repo's CONTRIBUTING.md for corrections.

• Code (HTML, CSS, JS): MIT
• Dataset under data/: CC BY-SA 4.0

Open the interactive web tool. See the source code now on ⁠GitHub.

Related work

The encoding follows ⁠@dataisinteresting's WRE-Emperors. Related earlier work on this site: Rulers of the Kazakh Khanate.

Visualization "American Presidents - Lifetimes & Service" (2026), Vitaliy Yevtushenko (Witold's Data Consulting). https://witold1.github.io/portfolio/blog/viz-american-presidents-lifetimes/.

@misc{witold_blog_viz-american-presidents-lifetimes,
  author = {Vitaliy Yevtushenko},
  title = {{Visualization "American Presidents - Lifetimes & Service"}},
  year = {2026},
  url = {https://witold1.github.io/portfolio/blog/viz-american-presidents-lifetimes/},
}