Why HTML?

A World Beyond Static PDFs and Powerpoints

Author

Thomas Reinke

Example Data

Consider an example data set from the U.S. Drought Monitor. It contains 325,728 rows across 1044 weeks from July 2001 to July 2021. Each row records state land area under drought severity levels from D0 (dry) to D4 (exceptional drought).

The metric of interest is D2+, the share of state area in drought level D2 to D4. The peak drought week occurred on August 7, 2012, with 38.5% of national land area affected.

Two routes exist to deliver a report and presentation from data:

Interactive Documents

Quarto(.qmd) combines Markdown with code (R, Python, Julia, etc). A single source file renders to multiple formats:

  1. Interactive (HTML & revealjs): Readers explore data, filter regions, inspect values, and fold code blocks.
  2. Static (PDF & PowerPoint): Readers require fixed pages for print, archives, or offline slides.

Quarto generates both types from one source file:

Target Interactive Web Static Canvas
Report html pdf
Slides revealjs pptx

Exhibit Differences: HTML vs Static

Maps: Interactive vs Static

HTML maps animate changes over time and display hover values for 50 states. Static maps print one date and omit Alaska, Hawaii, and Puerto Rico due to map boundaries.

Figure 1: Share of state area in severe drought (D2+), week of August 7, 2012
Figure 2: Share of state area in severe drought (D2+), quarterly average, 2001 to 2021.

Time Series: Hover and Zoom

HTML time series include hover tooltips and time sliders. Static time series plot the national series on fixed axes.

Figure 3: Share of US land area in severe drought (D2+), by week.
Figure 4: Share of US land area in severe drought (D2+), by week. Hover for a value; drag the slider to zoom.

Tables: Search and Sort

HTML tables display all 52 states and territories with column sorting and text search. Static outputs will truncate the table, or use many pages/slides, or need to be summarized.

Table 1: Top 10 states by average share of area in severe drought, 2001 to 2021.
State Average D2+ Peak D2+ Week of peak
NV 37.6% 100% Jul 2007
AZ 37.1% 100% Jun 2002
NM 33.9% 100% Dec 2003
UT 30.9% 100% Mar 2003
CA 30.4% 100% May 2014
WY 29.2% 100% Sep 2002
CO 26.6% 100% Jul 2012
OR 22.7% 100% Jul 2015
TX 22.1% 99% Sep 2011
ID 21.4% 100% Jul 2001
Table 2: Average and peak share of area in severe drought, 2001 to 2021.

Technical Trade-offs

Capability html pdf revealjs pptx
Interactive Figures Yes No Yes No
Code Folding Yes No Yes No
Tabsets Yes No Yes No
Searchable Tables Yes No Yes No
Canvas Type Scroll Fixed Pages Slide Frames Slide Frames
Non-author Editing No No No Yes
External Toolchain None TeX Engine None None

File Size Scaling

File sizes vary by format and features. Per the Pandoc User’s Manual, single-file HTML embeds images and scripts into the document. This process adds a 33% size overhead to images. A document with static charts and standard tables shows a small size difference: HTML near 1 MB compares to PDF between 100 KB and 200 KB (a 5:1 to 10:1 ratio).

Interactive features change file size. Single-file HTML embeds interactive code libraries and data tables into the document. The file size ratio grows to 50:1 or more compared to PDF files.

Conclusion

HTML is the default format for documents. HTML keeps interactive widgets, full tables, and code folding. Conversion flows from interactive HTML to static formats (PDF or PowerPoint) by browser print or slide export. Conversion does not run in reverse. Static formats trade interactive features for small file sizes.

Back to top