closeread

A quarto extension that enables scrollytelling to

  • study text
  • study images
  • study code

for a stronger, more focused narrative.

closeread

A quarto extension that enables scrollytelling to

  • study text
  • study images
  • study code

for a stronger, more focused narrative.

Some Jargon

< a paragraph, image, code, etc. >

Some Jargon

:::{#myid .myclass myattr="val"}
< a paragraph, image, code, etc. >
:::


This is a Fenced Div

Some Jargon

Bada bing

Some Jargon

Bada [bing]{#myid .myclass myattr="val"}


This is a Bracketed Span

---
format: html
---

# A Poem (and a Painting) About the Suffering That Hides in Plain Sight

I’ve been reading this short, wry poem about suffering for more than 20 years.

How nice that it tells you in the first two words what it’s about.

No matter how familiar a poem is, rereading it always gives me a sense of first encounter, as though I’ve gone back to sleep and re-entered the dream through a different door.

About suffering they were never wrong,
The old Masters: how well they understood
Its human position: how it takes place
While someone else is eating or opening a window
    or just walking dully along;

---
format: closeread-html
---

# A Poem (and a Painting) About the Suffering That Hides in Plain Sight

I’ve been reading this short, wry poem about suffering for more than 20 years.

How nice that it tells you in the first two words what it’s about.

No matter how familiar a poem is, rereading it always gives me a sense of first encounter, as though I’ve gone back to sleep and re-entered the dream through a different door.

About suffering they were never wrong,
The old Masters: how well they understood
Its human position: how it takes place
While someone else is eating or opening a window
    or just walking dully along;

---
format:
  closeread-html:
    css: nytimes.css
---

# A Poem (and a Painting) About the Suffering That Hides in Plain Sight

I’ve been reading this short, wry poem about suffering for more than 20 years.

How nice that it tells you in the first two words what it’s about.

No matter how familiar a poem is, rereading it always gives me a sense of first encounter, as though I’ve gone back to sleep and re-entered the dream through a different door.

About suffering they were never wrong,
The old Masters: how well they understood
Its human position: how it takes place
While someone else is eating or opening a window
    or just walking dully along;

  

---
format:
  closeread-html:
    css: nytimes.css
---

# A Poem (and a Painting) About the Suffering That Hides in Plain Sight

I’ve been reading this short, wry poem about suffering for more than 20 years.

How nice that it tells you in the first two words what it’s about.

No matter how familiar a poem is, rereading it always gives me a sense of first encounter, as though I’ve gone back to sleep and re-entered the dream through a different door.

| About suffering they were never wrong,
| The old Masters: how well they understood
| Its human position: how it takes place
| While someone else is eating or opening a window
|     or just walking dully along;

---
format:
  closeread-html:
    css: nytimes.css
---

:::{.cr-section}
# A Poem (and a Painting) About the Suffering That Hides in Plain Sight

I’ve been reading this short, wry poem about suffering for more than 20 years.

How nice that it tells you in the first two words what it’s about.

No matter how familiar a poem is, rereading it always gives me a sense of first encounter, as though I’ve gone back to sleep and re-entered the dream through a different door.

| About suffering they were never wrong,
| The old Masters: how well they understood
| Its human position; how it takes place
| While someone else is eating or opening a window 
|     or just walking dully along;
:::

  

---
format:
  closeread-html:
    css: nytimes.css
---

:::{.cr-section}
# A Poem (and a Painting) About the Suffering That Hides in Plain Sight

I’ve been reading this short, wry poem about suffering for more than 20 years.

How nice that it tells you in the first two words what it’s about.

No matter how familiar a poem is, rereading it always gives me a sense of first encounter, as though I’ve gone back to sleep and re-entered the dream through a different door.

:::{#cr-poem}
| About suffering they were never wrong,
| The old Masters: how well they understood
| Its human position; how it takes place
| While someone else is eating or opening a window 
|     or just walking dully along;
:::
:::

---
format:
  closeread-html:
    css: nytimes.css
---

:::{.cr-section}
# A Poem (and a Painting) About the Suffering That Hides in Plain Sight

:::{focus-on="poem"}
I’ve been reading this short, wry poem about suffering for more than 20 years.
:::

How nice that it tells you in the first two words what it’s about.

No matter how familiar a poem is, rereading it always gives me a sense of first encounter, as though I’ve gone back to sleep and re-entered the dream through a different door.

:::{#cr-poem}
| About suffering they were never wrong,
| The old Masters: how well they understood
| Its human position; how it takes place
| While someone else is eating or opening a window 
|     or just walking dully along;
:::
:::

---
format:
  closeread-html:
    css: nytimes.css
---

:::{.cr-section}
# A Poem (and a Painting) About the Suffering That Hides in Plain Sight

:::{focus-on="poem"}
I’ve been reading this short, wry poem about suffering for more than 20 years.
:::

:::{focus-on="poem" highlight="cr-suffering"}
How nice that it tells you in the first two words what it’s about.
:::

No matter how familiar a poem is, rereading it always gives me a sense of first encounter, as though I’ve gone back to sleep and re-entered the dream through a different door.

:::{#cr-poem}
| [About suffering]{#cr-suffering} they were never wrong,
| The old Masters: how well they understood
| Its human position; how it takes place
| While someone else is eating or opening a window 
|     or just walking dully along;
:::
:::

How to write a closeread story

  1. Create a closeread section

    :::{.cr-section}
  2. Flag content as “stickies”

    :::{#cr-mysticky}
  3. Identify blocks to serve as triggers

    :::{focus-on="cr-mysticky"}

closeread

A quarto extension that enables scrollytelling to

  • study text
  • study images
  • study code

for a stronger, more focused narrative.

closeread

A quarto extension that enables scrollytelling to

  • study text
  • study images
  • study code

for a stronger, more focused narrative.




---
format:
  closeread-html:
    css: cr-tufte.css
---

The first is the classic of Charles Joseph Minard (1781-1870), the French engineer, which shows the terrible fate of Napoleon's army in Russia. Described by E. J. Marey as seeming to defy the pen of the historian by its brutal eloquence, 12 this combination of data map and time-series, drawn in 1869, portrays a sequence of devastating losses suffered in Napoleon's Russian campaign of 1812.

![](minard-map.png)

Beginning at left on the Polish-Russian border near the Niemen River, the thick tan flow-line shows the size of the Grand Army (422,000) as it invaded Russia in June 1812.

The width of this band indicates the size of the army at each place on the map.

In September, the army reached Moscow, which was by then sacked and deserted, with 100,000 men.

The path of Napoleon's retreat from Moscow is depicted by the darker, lower band, which is linked to a temperature scale and dates at the bottom of the chart. It was a bitterly cold winter, and many froze on the march out of Russia.

As the graphic shows, the crossing of the Berezina River was a disaster, and the army finally struggled back into Poland with only 10,000 men remaining.

Also shown are the movements of auxiliary troops, as they sought to protect the rear and the flank of the advancing army.

Minard's graphic tells a rich, coherent story with its multivariate data, far more enlightening than just a single number bouncing along over time. Six variables are plotted: the size of the army, its location on a two-dimensional surface, direction of the army's movement, and temperature on various dates during the retreat from Moscow.

It may well be the best statistical graphic ever drawn.

---
format:
  closeread-html:
    css: cr-tufte.css
---

:::{.cr-section}

:::{focus-on="cr-map"}
The first is the classic of Charles Joseph Minard (1781-1870), the French engineer, which shows the terrible fate of Napoleon's army in Russia. Described by E. J. Marey as seeming to defy the pen of the historian by its brutal eloquence, 12 this combination of data map and time-series, drawn in 1869, portrays a sequence of devastating losses suffered in Napoleon's Russian campaign of 1812.
:::

:::{#cr-map}
![](minard-map.png)
:::

Beginning at left on the Polish-Russian border near the Niemen River, the thick tan flow-line shows the size of the Grand Army (422,000) as it invaded Russia in June 1812.

The width of this band indicates the size of the army at each place on the map.

In September, the army reached Moscow, which was by then sacked and deserted, with 100,000 men.

The path of Napoleon's retreat from Moscow is depicted by the darker, lower band, which is linked to a temperature scale and dates at the bottom of the chart. It was a bitterly cold winter, and many froze on the march out of Russia.

As the graphic shows, the crossing of the Berezina River was a disaster, and the army finally struggled back into Poland with only 10,000 men remaining.

Also shown are the movements of auxiliary troops, as they sought to protect the rear and the flank of the advancing army.

Minard's graphic tells a rich, coherent story with its multivariate data, far more enlightening than just a single number bouncing along over time. Six variables are plotted: the size of the army, its location on a two-dimensional surface, direction of the army's movement, and temperature on various dates during the retreat from Moscow.

It may well be the best statistical graphic ever drawn.
:::

---
format:
  closeread-html:
    css: cr-tufte.css
---

:::{.cr-section}

:::{focus-on="cr-map"}
The first is the classic of Charles Joseph Minard (1781-1870), the French engineer, which shows the terrible fate of Napoleon's army in Russia. Described by E. J. Marey as seeming to defy the pen of the historian by its brutal eloquence, 12 this combination of data map and time-series, drawn in 1869, portrays a sequence of devastating losses suffered in Napoleon's Russian campaign of 1812.
:::

:::{#cr-map}
![](minard-map.png)
:::

:::{focus-on="cr-map" pan-to="70%,-10%" scale-by="2.7"}
Beginning at left on the Polish-Russian border near the Niemen River, the thick tan flow-line shows the size of the Grand Army (422,000) as it invaded Russia in June 1812.
:::

The width of this band indicates the size of the army at each place on the map.

In September, the army reached Moscow, which was by then sacked and deserted, with 100,000 men.

The path of Napoleon's retreat from Moscow is depicted by the darker, lower band, which is linked to a temperature scale and dates at the bottom of the chart. It was a bitterly cold winter, and many froze on the march out of Russia.

As the graphic shows, the crossing of the Berezina River was a disaster, and the army finally struggled back into Poland with only 10,000 men remaining.

Also shown are the movements of auxiliary troops, as they sought to protect the rear and the flank of the advancing army.

Minard's graphic tells a rich, coherent story with its multivariate data, far more enlightening than just a single number bouncing along over time. Six variables are plotted: the size of the army, its location on a two-dimensional surface, direction of the army's movement, and temperature on various dates during the retreat from Moscow.

It may well be the best statistical graphic ever drawn.
:::

---
format:
  closeread-html:
    css: cr-tufte.css
---

:::{.cr-section}

:::{focus-on="cr-map"}
The first is the classic of Charles Joseph Minard (1781-1870), the French engineer, which shows the terrible fate of Napoleon's army in Russia. Described by E. J. Marey as seeming to defy the pen of the historian by its brutal eloquence, 12 this combination of data map and time-series, drawn in 1869, portrays a sequence of devastating losses suffered in Napoleon's Russian campaign of 1812.
:::

:::{#cr-map}
![](minard-map.png)
:::

:::{focus-on="cr-map" pan-to="70%,-10%" scale-by="2.7"}
Beginning at left on the Polish-Russian border near the Niemen River, the thick tan flow-line shows the size of the Grand Army (422,000) as it invaded Russia in June 1812.
:::

The width of this band indicates the size of the army at each place on the map.

:::{focus-on="cr-map" pan-to="-55%,10%" scale-by="1.5"}
In September, the army reached Moscow, which was by then sacked and deserted, with 100,000 men.
:::

The path of Napoleon's retreat from Moscow is depicted by the darker, lower band, which is linked to a temperature scale and dates at the bottom of the chart. It was a bitterly cold winter, and many froze on the march out of Russia.

As the graphic shows, the crossing of the Berezina River was a disaster, and the army finally struggled back into Poland with only 10,000 men remaining.

Also shown are the movements of auxiliary troops, as they sought to protect the rear and the flank of the advancing army.

Minard's graphic tells a rich, coherent story with its multivariate data, far more enlightening than just a single number bouncing along over time. Six variables are plotted: the size of the army, its location on a two-dimensional surface, direction of the army's movement, and temperature on various dates during the retreat from Moscow.

It may well be the best statistical graphic ever drawn.
:::

How to closeread images

  1. Focus on your sticky image

    :::{focus-on="cr-a"}
  2. Pan to coordinates by adding an attribute

    :::{focus-on="cr-a" pan-to="10%,5%"}
  3. Scale the image by adding an attribute

    :::{focus-on="cr-a" pan-to="10%,5%" scale-by="2"}

closeread

A quarto extension that enables scrollytelling to

  • study text
  • study images
  • study code

for a stronger, more focused narrative.

closeread

A quarto extension that enables scrollytelling to

  • study text
  • study images
  • study code

for a stronger, more focused narrative.

---
format: closeread-html
---

:::{.cr-section}

:::{focus-on="cr-dplyr"}
Here is a `dplyr` pipeline that processes a data frame containing information on Antarctic penguins.
:::

In the first two lines we load the `dplyr` package and the `palmerpenguins` package, which contains the data frame.

The main block of code is referred as a pipeline or chain. Each line starts with a function and ends with a pipe, `|>`.

:::{#cr-dplyr}
```{r}
#| echo: true
#| message: false

library(dplyr)
library(palmerpenguins)

penguins |>
  filter(year == 2008) |>
  group_by(species) |>
  summarize(avg_bill_length = mean(bill_length_mm)) |>
  arrange(avg_bill_length)
```
:::
:::

---
format: closeread-html
---

:::{.cr-section}

:::{focus-on="cr-dplyr"}
Here is a `dplyr` pipeline that processes a data frame containing information on Antarctic penguins.
:::

:::{focus-on="cr-dplyr" highlight="1,2"}
In the first two lines we load the `dplyr` package and the `palmerpenguins` package, which contains the data frame.
:::

The main block of code is referred as a pipeline or chain. Each line starts with a function and ends with a pipe, `|>`.

:::{#cr-dplyr}
```{r}
#| echo: true
#| message: false

library(dplyr)
library(palmerpenguins)

penguins |>
  filter(year == 2008) |>
  group_by(species) |>
  summarize(avg_bill_length = mean(bill_length_mm)) |>
  arrange(avg_bill_length)
```
:::
:::

---
format: closeread-html
---

:::{.cr-section}

:::{focus-on="cr-dplyr"}
Here is a `dplyr` pipeline that processes a data frame containing information on Antarctic penguins.
:::

:::{focus-on="cr-dplyr" highlight="1,2"}
In the first two lines we load the `dplyr` package and the `palmerpenguins` package, which contains the data frame.
:::

:::{focus-on="cr-dplyr" highlight="4-8"}
The main block of code is referred as a pipeline or chain. Each line starts with a function and ends with a pipe, `|>`.
:::

:::{#cr-dplyr}
```{r}
#| echo: true
#| message: false

library(dplyr)
library(palmerpenguins)

penguins |>
  filter(year == 2008) |>
  group_by(species) |>
  summarize(avg_bill_length = mean(bill_length_mm)) |>
  arrange(avg_bill_length)
```
:::
:::

---
format: closeread-html
---

::::{.cr-section layout="overlay-center"}

This is where I live, in Berkeley, California. @cr-globe

My collaborator James lives very, very, far away.

:::{#cr-globe}
```{ojs}
world = FileAttachment("naturalearth-land-110m.geojson").json()

cities = [{ name: "Berkeley",  lat: 37.8715, lon: -122.2730 },
          { name: "Melbourne",  lat: -37.8136,  lon: 144.9631 }]
```

```{ojs}
Plot.plot({
  marks: [
    Plot.graticule(),
    Plot.geo(world, {
      fill: "#222222"
    }),
    Plot.sphere(),
    Plot.dot(cities, {
      x: "lon",
      y: "lat",
      fill: "#eb343d",
      stroke: "white",
      strokeWidth: 5,
      paintOrder: "stroke",
      size: 6
    }),
    Plot.text(cities, {
      x: d => d.lon + 2,
      y: d => d.lat + 2,
      text: "name",
      fill: "#eb343d",
      stroke: "white",
      strokeWidth: 5,
      paintOrder: "stroke",
      fontSize: 18,
      textAnchor: "start"
    }),
  ],
  projection: {
    type: "orthographic",
    rotate: [122, -10]
  }
})
```
:::

::::

---
format: closeread-html
---

::::{.cr-section layout="overlay-center"}

This is where I live, in Berkeley, California. @cr-globe

My collaborator James lives @cr-globe

very, @cr-globe

very, @cr-globe

far away. @cr-globe

:::{#cr-globe}
```{ojs}
world = FileAttachment("naturalearth-land-110m.geojson").json()

cities = [{ name: "Berkeley",  lat: 37.8715, lon: -122.2730 },
          { name: "Melbourne",  lat: -37.8136,  lon: 144.9631 }]
```

```{ojs}
Plot.plot({
  marks: [
    Plot.graticule(),
    Plot.geo(world, {
      fill: "#222222"
    }),
    Plot.sphere(),
    Plot.dot(cities, {
      x: "lon",
      y: "lat",
      fill: "#eb343d",
      stroke: "white",
      strokeWidth: 5,
      paintOrder: "stroke",
      size: 6
    }),
    Plot.text(cities, {
      x: d => d.lon + 2,
      y: d => d.lat + 2,
      text: "name",
      fill: "#eb343d",
      stroke: "white",
      strokeWidth: 5,
      paintOrder: "stroke",
      fontSize: 18,
      textAnchor: "start"
    }),
  ],
  projection: {
    type: "orthographic",
    rotate: [122, -10]
  }
})
```
:::

::::

---
format: closeread-html
---

::::{.cr-section layout="overlay-center"}

This is where I live, in Berkeley, California. @cr-globe

:::{.progress-block}
My collaborator James lives @cr-globe

very, @cr-globe

very, @cr-globe

far away. @cr-globe
:::

:::{#cr-globe}
```{ojs}
world = FileAttachment("naturalearth-land-110m.geojson").json()

cities = [{ name: "Berkeley",  lat: 37.8715, lon: -122.2730 },
          { name: "Melbourne",  lat: -37.8136,  lon: 144.9631 }]
```

```{ojs}
Plot.plot({
  marks: [
    Plot.graticule(),
    Plot.geo(world, {
      fill: "#222222"
    }),
    Plot.sphere(),
    Plot.dot(cities, {
      x: "lon",
      y: "lat",
      fill: "#eb343d",
      stroke: "white",
      strokeWidth: 5,
      paintOrder: "stroke",
      size: 6
    }),
    Plot.text(cities, {
      x: d => d.lon + 2,
      y: d => d.lat + 2,
      text: "name",
      fill: "#eb343d",
      stroke: "white",
      strokeWidth: 5,
      paintOrder: "stroke",
      fontSize: 18,
      textAnchor: "start"
    }),
  ],
  projection: {
    type: "orthographic",
    rotate: [122, -10]
  }
})
```
:::

::::

---
format: closeread-html
---

::::{.cr-section layout="overlay-center"}

This is where I live, in Berkeley, California. @cr-globe

:::{.progress-block}
My collaborator James lives @cr-globe

very, @cr-globe

very, @cr-globe

far away. @cr-globe
:::

:::{#cr-globe}
```{ojs}
world = FileAttachment("naturalearth-land-110m.geojson").json()

cities = [{ name: "Berkeley",  lat: 37.8715, lon: -122.2730 },
          { name: "Melbourne",  lat: -37.8136,  lon: 144.9631 }]
          
angleScale = d3.scaleLinear()
  .domain([0, 1])
  .range([180, -160])
  .clamp(true)
    
angle = angleScale(crProgressBlock)
```

```{ojs}
Plot.plot({
  marks: [
    Plot.graticule(),
    Plot.geo(world, {
      fill: "#222222"
    }),
    Plot.sphere(),
    Plot.dot(cities, {
      x: "lon",
      y: "lat",
      fill: "#eb343d",
      stroke: "white",
      strokeWidth: 5,
      paintOrder: "stroke",
      size: 6
    }),
    Plot.text(cities, {
      x: d => d.lon + 2,
      y: d => d.lat + 2,
      text: "name",
      fill: "#eb343d",
      stroke: "white",
      strokeWidth: 5,
      paintOrder: "stroke",
      fontSize: 18,
      textAnchor: "start"
    }),
  ],
  projection: {
    type: "orthographic",
    rotate: [angle, -10]
  }
})
```
:::

::::

How to closeread code

  1. Highlight lines of code with highlight="1,3" or highlight="1-3"

  2. Create interactive visualizations by using closeread OJS varaibles (Observable Javascript)

    • crActiveSticky
    • crTriggerIndex
    • crTriggerProgress
    • crDirection
  3. Span narrative blocks by wrapping with .progress-block div then use crProgressBlock.

Other features:

Layouts

  • sidebar-left
  • sidebar-right
  • overlay-left
  • overlay-center
  • overlay-right

Trigger Shortcut

  • @cr-mysticky

Ways to use closeread

  • Integrate a closeread section into a data journalism piece.
  • Write a tutorial of a particularly tricky concept or piece of code.
  • Have your students write closeread stories to share their projects.
  • Communicate the central insight of an analysis to company decision-makers.

closeread

A quarto extension that enables scrollytelling to

  • study text
  • study images
  • study code

for a stronger, more focused narrative.