Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio
Last active September 13, 2019 11:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save timelyportfolio/83c62d72904a101d487d826af18c8d82 to your computer and use it in GitHub Desktop.
Save timelyportfolio/83c62d72904a101d487d826af18c8d82 to your computer and use it in GitHub Desktop.
DATALEGRAYA in R
license: mit

assembled with blockbuilder.org


I just had to try out DATALEGRAYA (really nice font with integrated graphics) from Figs.

with some real R data. I chose the very difficult-to-work-with ts AirPassengers data and used quarterly values for the sparkline. Values are limited to integer [0,3] so precision is limited.

Code in R

# use the really nifty datalegreya
#   from R data


library(htmltools)
library(pipeR)
head_tag <-   tags$style(
"
@font-face {
font-family: 'Datalegreya-Dot';
src: url('http://cdn.rawgit.com/figs-lab/datalegreya/master/font-files/Datalegreya-Dot.otf');
font-weight: normal;
font-style: normal;
}

body {
-webkit-font-feature-settings: 'kern' on, 'liga' on, 'calt' on;
-moz-font-feature-settings: 'kern' on, 'liga' on, 'calt' on;
-webkit-font-feature-settings: 'kern' on, 'liga' on, 'calt' on;
-ms-font-feature-settings: 'kern' on, 'liga' on, 'calt' on;
font-feature-settings: 'kern' on, 'liga' on, 'calt' on;
font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
}

body {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
"
)

# replicate example from http://figs-lab.com/en/datalegreya
tagList(
  tags$head(head_tag),
  tags$h1(
    style="font-family:'Datalegreya-Dot'; font-size:10em;",
    "b|1i|3n|2g|2o|1"
  )
) %>>%
  browsable()


# now use with R data
library(scales)
# values should be integer between 0 and 3
air_scaled <- AirPassengers %>>%
  rescale(from=c(0,max(AirPassengers)),to=c(0,3)) %>>%
  round()

# years are four character so choose quarterly
#  to fit nicely into the font
#  ts are a pain in the ass
lapply(
  seq.int(start(air_scaled)[1], end(air_scaled)[1]),
  function(yr) {
    vals <- window(air_scaled, yr, yr + 0.917)[c(3,6,9,12)]
    yr %>>%
      as.character() %>>%
      strsplit("") %>>%
      unlist() %>>%
      {
        sprintf(
          '§%s%s[%sk%s[0%s]',
          vals[1],
          paste(.,vals,sep="|",collapse=""),
          paste0(max(AirPassengers)),
          paste0(rep(" ",4-nchar(max(AirPassengers))),collapse=""),
          paste0(rep(" ",4),collapse="")
        )
      } %>>%
      tags$span()
  }
) %>>%
  {
    tagList(
      tags$head(
        head_tag,
        tags$style("span {font-family:'Datalegreya-Dot'; font-size:10em;")
      ),
      .
    )
    
  } %>>%
  browsable()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
@font-face {
font-family: 'Datalegreya-Dot';
src: url('http://cdn.rawgit.com/figs-lab/datalegreya/master/font-files/Datalegreya-Dot.otf');
font-weight: normal;
font-style: normal;
}
body {
-webkit-font-feature-settings: 'kern' on, 'liga' on, 'calt' on;
-moz-font-feature-settings: 'kern' on, 'liga' on, 'calt' on;
-webkit-font-feature-settings: 'kern' on, 'liga' on, 'calt' on;
-ms-font-feature-settings: 'kern' on, 'liga' on, 'calt' on;
font-feature-settings: 'kern' on, 'liga' on, 'calt' on;
font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
}
body {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
<style>span {font-family:'Datalegreya-Dot'; font-size:10em;</style>
</head>
<body style="background-color:white;">
<h1 style="font-family: 'Datalegreya-Dot';">
awesomeness courtesy of <a href = "http://figs-lab.com/en/datalegreya">DATALEGREYA</a>
</h1>
<h3 style="font-family: 'Datalegreya-Dot';">
created in R (see README for code)
</h3>
<span>§11|19|14|19|1[622k [0 ]</span>
<span>§11|19|15|10|1[622k [0 ]</span>
<span>§11|19|15|11|1[622k [0 ]</span>
<span>§11|19|15|12|1[622k [0 ]</span>
<span>§11|19|15|13|1[622k [0 ]</span>
<span>§11|19|15|14|1[622k [0 ]</span>
<span>§11|19|25|25|1[622k [0 ]</span>
<span>§21|29|25|26|1[622k [0 ]</span>
<span>§21|29|25|27|2[622k [0 ]</span>
<span>§21|29|25|28|2[622k [0 ]</span>
<span>§21|29|25|29|2[622k [0 ]</span>
<span>§21|29|36|20|2[622k [0 ]</span>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment