This document is an attempt to reproduce some of the charts shown in Observable Plot documentation notebooks.

As always, there are several ways to do things, in particular data manipulation could be done either in R before plotting, or in JavaScript via transforms and JS() calls. Each example below is one way to achieve a given result, not necessarily the best one or the most elegant.

Area mark

data(aapl)
obsplot(aapl) |>
    mark_areaY(x = Date, y = Close, fill = "#ccc") |>
    mark_lineY(x = Date, y = Close) |>
    mark_ruleY(y = 0) |>
    scale_y(grid = TRUE)
data(sftemp)

obsplot(sftemp) |>
    mark_ruleY(y = 32) |>
    mark_areaY(
        transform_windowY(
            x = date,
            y1 = low, y2 = high,
            fill = "#ccc", k = 14
        )
    ) |>
    mark_line(
        transform_windowY(
            x = date,
            y = JS("d => (d.low + d.high) / 2"),
            k = 14
        )
    ) |>
    scale_y(grid = TRUE, label = "↑ Temperature (°F)")
data(bls)

obsplot(bls) |>
    mark_areaY(x = date, y2 = unemployed, z = industry, fillOpacity = 0.1) |>
    mark_lineY(x = date, y = unemployed, z = industry, strokeWidth = 1)
obsplot(bls) |>
    mark_areaY(x = date, y = unemployed, fill = industry) |>
    mark_ruleY(y = 0)
normY <- transform_normalizeY(basis = "median", x = date, y = unemployed)
obsplot(bls, height = 600) |>
    mark_areaY(normY, fillOpacity = 0.2) |>
    mark_lineY(normY, strokeWidth = 1) |>
    facet(y = industry, marginRight = 140) |>
    scale_y(axis = NULL) |>
    scale_fy(axis = "right", label = NULL)

Bar mark

data(civilizations)

obsplot(civilizations, height = nrow(civilizations) * 12) |>
    mark_barX(x1 = start, x2 = end, y = civilization) |>
    mark_text(
        x = start, y = civilization, text = civilization,
        textAnchor = "end", dx = -6
    ) |>
    opts(marginLeft = 140) |>
    scale_x(axis = "top", grid = TRUE) |>
    scale_y(axis = NULL, domain = civilizations$civilization[order(civilizations$start)])
data(popchange)
popchange$diff <- (popchange$`2019` - popchange$`2010`) / popchange$`2010` * 100
popchange$up <- popchange$diff >= 0

obsplot(popchange, height = 780) |>
    mark_barX(y = State, x = diff, fill = up) |>
    mark_ruleX(x = 0) |>
    opts(marginLeft = 110, grid = TRUE) |>
    scale_x(
        axis = "top", round = TRUE,
        label = "← decrease · Change in population, 2010–2019 (%) · increase →",
        labelAnchor = "center", tickFormat = "+"
    ) |>
    scale_y(label = NULL, domain = popchange$State[order(popchange$diff)], reverse = TRUE) |>
    scale_color(range = c("#e15759", "#4e79a7"))
data(alphabet)

obsplot(alphabet, height = 60) |>
    mark_ruleX(c(0,1)) |>
    mark_barX(
        transform_stackX(order = letter, x = frequency, fill = "#ccc", insetLeft = 1)
    ) |>
    mark_textX(
        transform_stackX(order = letter, x = frequency, text = "letter", insetLeft = 1)
    ) |>
    scale_x(label = "Frequency (%)", transform = JS("d => d * 100"))
data(stateage)

# Precompute state names order
library(dplyr)
states <- stateage |>
    group_by(name) |>
    summarize(total = sum(population)) |>
    arrange(desc(total)) |>
    slice(1:6) |>
    pull(name)

obsplot(stateage) |>
    mark_barY(x = age, y = population, fill = age, title = age) |>
    mark_ruleY(y = 0) |>
    facet(x = name) |>
    scale_x(axis = NULL, domain = unique(stateage$age)) |>
    scale_fx(domain = states, label = NULL, tickSize = 6) |>
    scale_y(grid = TRUE, tickFormat = "s") |>
    scale_color(domain = unique(stateage$age), scheme = "spectral")

Cell mark

obsplot(simpsons, height = 600) |>
    mark_cell(x = season, y = number_in_season, fill = imdb_rating) |>
    mark_text(x = season, y = number_in_season, text = imdb_rating, title = title) |>
    scale_x(axis = "top", label = "Season") |>
    scale_y(label = "Episode") |>
    scale_color(scheme = "PiYg") |>
    opts(padding = 0.05, grid = TRUE)
data(dji)
# precompute variables
dji <- dji |>
    mutate(
        variation = (Close - lag(Close)) / lag(Close),
        title = round(variation * 100, 1)
    )

obsplot(dji, height = 1300) |>
    mark_cell(
        x = JS("d => d3.utcWeek.count(d3.utcYear(d.Date), d.Date)"),
        y = JS("d => d.Date.getUTCDay()"),
        fill = variation,
        title = title,
        inset = 0.5
    ) |>
    facet(y = JS("d => d.Date.getUTCFullYear()")) |>
    scale_x(axis = NULL, padding = 0) |>
    scale_y(
        padding = 0, tickSize = 0,
        tickFormat = JS('Plot.formatWeekday("en", "narrow")')
    ) |>
    scale_fy(reverse = TRUE, label = NULL) |>
    scale_color(type = "diverging", scheme = "PiYg")
data(seattle)

obsplot(seattle, height = 300) |>
    mark_cell(
        transform_group(
            list(fill = "max"),
            x = JS("d => d.date.getUTCDate()"),
            y = JS("d => d.date.getUTCMonth()"),
            fill = temp_max,
            inset = 0.5
        )
    ) |>
    scale_y(
        tickFormat = JS('Plot.formatMonth("en", "short")')
    ) |>
    opts(padding = 0)