Problems Following an R Markdown Tutorial

Viewed 46

I am following the tutorial on this website here : https://glin.github.io/reactable/articles/building-twitter-followers.html - I would like to build a "Reactive Table" as seen in the example.

I was able to follow most of the steps in the tutorial - for example, the code below works perfectly:

library(reactable)
library(htmltools)

data <- read.csv("https://glin.github.io/reactable/articles/twitter-followers/twitter_followers.csv",
                 stringsAsFactors = FALSE)

# Render a bar chart with a label on the left
bar_chart <- function(label, width = "100%", height = "0.875rem", fill = "#00bfc4", background = NULL) {
  bar <- div(style = list(background = fill, width = width, height = height))
  chart <- div(style = list(flexGrow = 1, marginLeft = "0.375rem", background = background), bar)
  div(style = list(display = "flex", alignItems = "center"), label, chart)
}

reactable(
  data,
  defaultSorted = "exclusive_followers_pct",
  columns = list(
    account = colDef(
      name = "Account",
      format = colFormat(prefix = "@")
    ),
    followers = colDef(
      name = "Followers",
      defaultSortOrder = "desc",
      cell = function(value) {
        width <- paste0(value * 100 / max(data$followers), "%")
        value <- format(value, big.mark = ",")
        # Fix each label using the width of the widest number (incl. thousands separators)
        value <- format(value, width = 9, justify = "right")
        bar_chart(value, width = width, fill = "#3fc1c9")
      },
      align = "left",
      # Use the operating system's default monospace font, and
      # preserve white space to prevent it from being collapsed by default
      style = list(fontFamily = "monospace", whiteSpace = "pre")
    ),
    exclusive_followers_pct = colDef(
      name = "Exclusive Followers",
      defaultSortOrder = "desc",
      cell = function(value) {
        value <- paste0(format(value * 100, nsmall = 1), "%")
        # Fix width here to align single and double-digit percentages
        value <- format(value, width = 5, justify = "right")
        bar_chart(value, width = value, fill = "#fc5185", background = "#e1e1e1")
      },
      align = "left",
      style = list(fontFamily = "monospace", whiteSpace = "pre")
    )
  )
)

enter image description here

Now, I would like to follow the "Finishing Touches" section of this tutorial.

I ran this code in the R console : https://shrib.com/#NineBandedArmadillo-JqkBNm and then I created an R markdown document and ran "knitted" (i.e. "knit to html") this code in the R markdown editor using "css tags": https://shrib.com/#Olivia382nNeg

But I don't think I correctly followed the instructions because the resulting reactive table did not load:

enter image description here

  • Can someone please show me how to correctly follow the steps for the "Finishing Touches" section of this tutorial?

Thank you!

1 Answers

I'm not sure about this, but when building your markdown, did you convert the code chunk from R to CSS?

```{css, echo=FALSE}
```
Related