knitr::opts_chunk$set(echo = TRUE) options(reactable.static = TRUE)
```{css ref.label="styles", echo=FALSE}
```r
library(reactable) library(htmltools) data <- read.csv("twitter_followers.csv", stringsAsFactors = FALSE) tbl <- reactable( data, pagination = FALSE, defaultSorted = "exclusive_followers_pct", defaultColDef = colDef(headerClass = "header", align = "left"), columns = list( account = colDef( cell = function(value) { url <- paste0("https://twitter.com/", value) tags$a(href = url, target = "_blank", paste0("@", value)) }, width = 150 ), followers = colDef( defaultSortOrder = "desc", cell = function(value) { width <- paste0(value * 100 / max(data$followers), "%") value <- format(value, big.mark = ",") value <- format(value, width = 9, justify = "right") bar <- div( class = "bar-chart", style = list(marginRight = "0.375rem"), div(class = "bar", style = list(width = width, backgroundColor = "#3fc1c9")) ) div(class = "bar-cell", span(class = "number", value), bar) } ), exclusive_followers_pct = colDef( name = "Exclusive Followers", defaultSortOrder = "desc", cell = JS('function(cellInfo) { // Format as percentage const pct = (cellInfo.value * 100).toFixed(1) + "%" // Pad single-digit numbers let value = pct.padStart(5) // Show % on first row only if (cellInfo.viewIndex > 0) { value = value.replace("%", " ") } // Render bar chart return ` <div class="bar-cell"> <span class="number">${value}</span> <div class="bar-chart" style="background-color: #e1e1e1"> <div class="bar" style="width: ${pct}; background-color: #fc5185"></div> </div> </div> ` }'), html = TRUE ) ), compact = TRUE, class = "followers-tbl" ) div(class = "twitter-followers", div(class = "followers-header", h2(class = "followers-title", "Candidates whose followers are loyal only to them"), "Share of each 2020 candidate's followers who don't follow any other candidates" ), tbl )
Source: FiveThirtyEight
Raw data: twitter_followers.csv
How it was made: Building the Twitter Followers Demo
htmltools::tags$link(href = "https://fonts.googleapis.com/css?family=Karla:400,700|Fira+Mono&display=fallback", rel = "stylesheet")
```{css styles, eval=FALSE} .twitter-followers { margin: 0 auto; width: 575px; font-family: Karla, "Helvetica Neue", Helvetica, Arial, sans-serif; }
.followers-header { margin: 1.125rem 0; font-size: 1rem; }
.followers-title { font-size: 1.25rem; font-weight: 600; }
.followers-tbl { font-size: 0.875rem; line-height: 1.125rem; }
.followers-tbl a { color: inherit; text-decoration: none; }
.followers-tbl a:hover, .followers-tbl a:focus { text-decoration: underline; text-decoration-thickness: max(1px, 0.0625rem); }
.header { border-bottom: 2px solid #555; font-size: 0.8125rem; font-weight: 400; text-transform: uppercase; }
.header:hover { background-color: #eee; }
.bar-cell { display: flex; align-items: center; }
.number { font-family: "Fira Mono", Consolas, Monaco, monospace; font-size: 0.84375rem; white-space: pre; }
.bar-chart { flex-grow: 1; margin-left: 0.375rem; height: 0.875rem; }
.bar { height: 100%; } ```
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.