Twitter Followers

Source: vignettes/twitter-followers/twitter-followers.Rmd

Source: FiveThirtyEight

Raw data: twitter_followers.csv

How it was made: Building the Twitter Followers Demo

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 = "6px"),
          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
)
tags$link(href = "https://fonts.googleapis.com/css?family=Karla:400,700|Fira+Mono&display=fallback",
          rel = "stylesheet")