The elements gallery

Charts have their own long scrolling gallery. Here you can inspect everything around them: type, photographs, tables, metrics, callouts, audio, video, embeds and scrollytelling. The examples are live below. The block tour source and local files let you reuse the complete bundle.

Typography in each style

Each sample is a real report rendered in a builtin style. Open it to read the complete hierarchy, body text, numbers and elements in that treatment. The report keeps its own fonts inside the preview.

Reading text, code and mathematics

An explanation can use strong emphasis, italics, a source link, literal code and footnotes.¹ Use headings to express the argument, a short list for parallel points and a quotation when the speaker matters.

That’s one small step for man, one giant leap for mankind.

— Neil Armstrong, Apollo 11, 21 July 1969 UTC; NASA Historical Sounds.

An equation can name an estimate, $\hat{p}$, and keep the assumptions beside it. The standard-error example at the end of this gallery shows a complete formula.

Credited header pictures and image blocks

The report gallery uses credited Unsplash header photographs in every style. The same credit mapping works in an image block. This photograph is a hotlink; the box, alt text and credit stay when the network is unavailable.

Photo by Sarah Mason on Unsplash

Every rich block

The following report uses Nightingale’s historical observations, her original public-domain diagram and NASA Apollo 11 audio and video. The source keeps captions and a transcript beside the players. External embeds remain dependent on their destination.

A report can place the observations beside their interpretation, an original document and a recording. Here the local media travels with the exported HTML; the external embed keeps its own availability.

Make the evidence inspectable

Source: Florence Nightingale’s Crimean War mortality record, via HistData. The displayed rates sum preventable disease, wounds and other causes in each of the first three months. They are annualized rates, not monthly death counts. The April metric is authored from the same observations.

The original document

The Areas of the blue, red, & black wedges are each measured from the centre as the common vertex.

— Florence Nightingale, the diagram’s legend (1858), original image and credits.

A recording gives a primary source a voice

Video · gallery/blocks/media/apollo-step.mp4

Transcript

Silent archival excerpt: a television view of Neil Armstrong beside the Apollo 11 lunar module ladder on the Moon. The image is grainy and high contrast. This 12-second excerpt begins 37 seconds into NASA’s a11.v1092338.mov; its soundtrack is omitted. NASA Apollo Lunar Surface Journal lists the video as public domain, with QuickTime digitization credited to Gerald Megason. Source: https://www.nasa.gov/wp-content/uploads/static/history/alsj/a11/video11.html.

The NASA audio collection supplies the recording; the Apollo Lunar Surface Journal video library supplies the film and its public-domain notice. The silent film excerpt starts 37 seconds into a11.v1092338.mov; its original soundtrack is omitted. Captions describe the silent scene; the audio player has its own transcript.

An external embed

Guide attention across the original diagram

1. 

   Two periods, one unit

   Begin with both circles. Each compares causes of mortality through an April-to-March year.

2. 

   The first winter

   Focus on the larger right-hand diagram. Its blue area records deaths from preventable disease; the printed legend explains that the wedges encode area.

A formula needs its assumptions

For an independent Bernoulli sample, the estimated standard error of a sample proportion is

$$\mathrm{SE}\left(\hat{p}\right)=\sqrt{\frac{\hat{p}(1-\hat{p})}{n}}$$

Here $n$ is the sample size and $\hat{p}$ the observed proportion. It is an estimate under a sampling model, not a formula for Nightingale’s annualized rates.