How We Made This

Quarto

This website is built with Quarto, an open-source scientific and technical publishing system. Quarto supports Python, R, and JavaScript (in the form of Observable notebooks), making it possible to combine narrative text, code, and interactive elements in a single, reproducible workflow. Quarto can also render to multiple output formats, including PDFs and Word documents.

Observable Notebooks & the Post45 Data Viewer

The interactive data tables on this site are powered by Tabulator and Observable notebooks, built on top of the Post45 Data Viewer. The Post45 Data Viewer was developed by Melanie Walsh and Juan Carlos Garcia with support from the Post45 Data Collective and Mozilla’s Responsible Computing Challenge.

These tables allow users to filter, sort, search, and download data; view tooltips with additional context; and customize which columns are displayed. Here’s an example using the U.S. National Park visit data:

import {generateTabulatorTableFromCSV} from "8bb63a6cde9addff"

generateTabulatorTableFromCSV(
  "#table-container-example",
  "https://raw.githubusercontent.com/melaniewalsh/responsible-datasets-in-context/main/datasets/national-parks/US-National-Parks_RecreationVisits_1979-2024.csv",
  {
    displayedColumns: [
      "ParkName",
      "Region",
      "State",
      "Year",
      "RecreationVisits"
    ],
    columnPopups: [
      "Name of the National Park.",
      "NPS region the park belongs to.",
      "U.S. state where the park is located.",
      "Calendar year of the visit count.",
      "Total recreation visits for that year."
    ],
    numericColumns: ["Year", "RecreationVisits"],
    categoryColumns: [
      "ParkName",
      "Region",
      "State"
    ],
    sortColumns: ["ParkName", "Year"],
    sortOrders: ["asc", "desc"]
  }
);

Use the Post45 Data Viewer with Your Own Data

You can integrate the Post45 Data Viewer into any Quarto page. For more detailed documentation, see the Post45 Data Viewer Observable notebook. To get started, load the required libraries and import the viewer, then call generateTabulatorTableFromCSV() with a URL or file path to your CSV and a configuration object.

TipExample Code

1. Load the required libraries by adding these lines to your .qmd file:

<link href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator.min.css" rel="stylesheet">
<script src="https://unpkg.com/tabulator-tables@6.3.0/dist/js/tabulator.min.js"></script>
<script src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script>

2. Import the Data Viewer in an OJS code block. The string "8bb63a6cde9addff" is the unique ID of the Post45 Data Viewer Observable notebook — this is how Observable identifies and imports shared notebooks:

```{ojs}
//| echo: false
import {generateTabulatorTableFromCSV} from "8bb63a6cde9addff"
```

3. Call the function with your data URL and configuration:

```{ojs}
//| echo: false
//| output: false
generateTabulatorTableFromCSV(
  "#my-table",                          // CSS selector for the table container
  "https://your-url.com/data.csv",      // <-- plug in your CSV URL or file path here

  {
    displayedColumns: [                 // columns to show (in order)
      "column_a",
      "column_b",
      "column_c"
    ],

    columnPopups: [                     // tooltip for each displayed column (same order)
      "Description of column A.",
      "Description of column B.",
      "Description of column C."
    ],

    numericColumns: ["column_c"],       // columns to treat as numbers (enables range filters)

    categoryColumns: ["column_a"],      // columns to treat as categories (enables dropdown filters)

    sortColumns: ["column_a"],          // default sort column(s)
    sortOrders: ["asc"]                 // "asc" or "desc" for each sort column
  }
);
```

4. Add a container div where you want the table to appear:

::: {#my-table style="height: 500px"}
:::

The #my-table ID must match the first argument to generateTabulatorTableFromCSV().

Other Resources

Claude Code assisted with some aspects of this site’s development.