Bayesian Statistics: Mixture Models (Stylist Chunks)

Theme Song

---

---

Source : Width of R code chunk output in RMarkdown files knitr-ed to html

/* https://stackoverflow.com/a/66029010/3806250 */
h1 { color: #002C54; }
h2 { color: #2F496E; }
h3 { color: #375E97; }

/* https://bookdown.org/yihui/rmarkdown-cookbook/chunk-styling.html */
.gradient1 {
  background: linear-gradient(155deg, #F9BA32 0%, #FFEB94 100%);
}

.gradient2 {
  color: #FFD64D;
  background: linear-gradient(155deg, #002C54 0%, #4CB5F5 100%);
  /*background-image: linear-gradient(to right,golden,golden, yellow, yellow);*/
  /*-webkit-background-clip: text;*/
  /*display: inline-block;*/
  /*padding: 14px;*/
  /*-webkit-text-fill-color: transparent;*/
  /*font-family: 'Stay Out Regular';*/
}

.shine {
    background: #FFD64D -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, yellow)) 0 0 no-repeat;
    -webkit-background-size: 150px;
    color: $text-color;
    -webkit-background-clip: text;
    -webkit-animation-name: shine;
    -webkit-animation-duration: $duration;
    -webkit-animation-iteration-count: infinite;
    text-shadow: 0 0px 0px golden-rod;
}

## https://stackoverflow.com/a/36846793/3806250
options(width = 999)
knitr::opts_chunk$set(class.source = 'gradient1', class.output = 'gradient2', class.error = 'bg-danger')

1 Styling Setting

# install.packages("remotes")
require('BBmisc')
#remotes::install_github("rstudio/sass")
lib('sass')

## sass 
## TRUE

/* https://stackoverflow.com/a/66029010/3806250 */
h1 { color: #002C54; }
h2 { color: #2F496E; }
h3 { color: #375E97; }

/* https://bookdown.org/yihui/rmarkdown-cookbook/chunk-styling.html */
.gradient1 {
  background: linear-gradient(155deg, #EDAE01 0%, #FFEB94 100%);
}

.gradient2 {
  color: #FFD64D;
  background: linear-gradient(155deg, #002C54 0%, #4CB5F5 100%);
  /* background-image: linear-gradient(to right,golden,golden, yellow, yellow); */
  /*-webkit-background-clip: text;*/
  /*display: inline-block;*/
  /*padding: 14px;*/
  /*-webkit-text-fill-color: transparent;*/
  /*font-family: 'Stay Out Regular';*/
}

Above css shows Gradient effect

• CSS3 : Shining Gradient Text Effect with Shining Gradient Effect Background#1994
• sass R Package
• CSS with superpowers

/* ----------------------------------------------------------------- */
/* https://gist.github.com/himynameisdave/c7a7ed14500d29e58149#file-broken-gradient-animation-less */
.hover-animate-background1 {
  /* color: #FFD64D; */
  background: linear-gradient(155deg, #EDAE01 0%, #FFEB94 100%);
  transition: all 0.45s;
  &:hover{
    background: linear-gradient(155deg, #EDAE01 20%, #FFEB94 80%);
    }
  }


/* //  For brevity, vendor prefixes have been removed. */
/* //  This does not work as expected; instead of a smooth transition */
/* //  what you get is a hard swap from one gradient to the next */
.hover-animate-background2 {
  color: #FFD64D;
  background: linear-gradient(155deg, #002C54 0%, #4CB5F5 100%);
  transition: all 0.45s;
  &:hover{
    background: linear-gradient(155deg, #002C54 20%, #4CB5F5 80%);
    }
  }

Above code shows Hovered gradient effect.

/* refer from https://codepen.io/fazlurr/pen/qbWMRv */
/* $duration: 5s; */
/* $text-color: rgba(255, 255, 255, 0.3); */
/* $bgr-color: #333; */
/* html { */
/*  background-color: $bgr-color; */
/*  text-align: center */
/* } */

/* body { */
/*  padding-top: 3em; */
/* } */

.shine {
    background: #222 
  -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) 0 0 no-repeat;
  -webkit-background-size: 150px;
    color: $text-color;
    -webkit-background-clip: text;
    -webkit-animation-name: shine;
    -webkit-animation-duration: $duration;
    -webkit-animation-iteration-count: infinite;
    text-shadow: 0 0px 0px rgba(255, 255, 255, 0.5);
  transition: all 0.45s;
  &:hover{
    background: linear-gradient(155deg, #002C54 20%, #4CB5F5 80%);
      }
  }

/* .gradient-animation( @start, @end, @transTime ){ */
/*   background-size: 100%; */
/*   background-image: linear-gradient(@start, @end); */
/*   position: relative; */
/*   z-index: 100; */
/*   &:before { */
/*     background-image: linear-gradient(@end, @start); */
/*     content: ''; */
/*     display: block; */
/*     height: 100%; */
/*     position: absolute; */
/*     top: 0; left: 0; */
/*     opacity: 0; */
/*     width: 100%; */
/*     z-index: -100; */
/*     transition: opacity @transTime; */
/*     } */
/*   &:hover { */
/*     &:before { */
/*       opacity: 1; */
/*     } */
/*   } */
/* } */

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

  //prepend span tag to H1
  $("h1").prepend("<span></span>");
    
});
</script>

knitr::opts_chunk$set(class.source = 'hover-animate-background1', class.output = 'hover-animate-background2')

2 Pretty Output (hover)

Below input and output chunk will be hovered.

# Generate n observations from a mixture of two Gaussian 
# distributions
n     = 50           # Size of the sample to be generated
w     = c(0.6, 0.4)  # Weights
mu    = c(0, 5)      # Means
sigma = c(1, 2)      # Standard deviations
cc    = sample(1:2, n, replace=TRUE, prob=w)
x     = rnorm(n, mu[cc], sigma[cc])
x

##  [1] -0.623031805 -0.057747365 -0.088416690 -0.001073536  0.396032277  6.779009647  0.284965330 -0.683469182  1.470441589 -0.283265856  0.349096483  0.935170456  4.963877106  0.220845000  2.503116558 -0.410914795  0.898191173 -0.415064147  4.345305545  8.181164835 -0.116777046 -0.992729343  3.341864069  2.720876085  1.140930433  5.950845645  3.072556059  3.016521011 -0.314718757  1.399103629  4.306863888  3.827501814  9.096278950  1.274771384  0.092719916  6.478535486  6.200303455 -0.674726989  2.364964411  5.252187976  6.567952036 -2.100402713  1.823070289  2.970091405  3.442766116  4.832198042  0.063175696  3.658757434  4.841512665  0.340136742

data.frame(matrix(x, ncol = 5))

##              X1         X2         X3          X4         X5
## 1  -0.623031805  0.3490965 -0.1167770  4.30686389  6.5679520
## 2  -0.057747365  0.9351705 -0.9927293  3.82750181 -2.1004027
## 3  -0.088416690  4.9638771  3.3418641  9.09627895  1.8230703
## 4  -0.001073536  0.2208450  2.7208761  1.27477138  2.9700914
## 5   0.396032277  2.5031166  1.1409304  0.09271992  3.4427661
## 6   6.779009647 -0.4109148  5.9508456  6.47853549  4.8321980
## 7   0.284965330  0.8981912  3.0725561  6.20030346  0.0631757
## 8  -0.683469182 -0.4150641  3.0165210 -0.67472699  3.6587574
## 9   1.470441589  4.3453055 -0.3147188  2.36496441  4.8415127
## 10 -0.283265856  8.1811648  1.3991036  5.25218798  0.3401367

3 Other Effects

There has more effects :

• Animate.css
• Shining text as below :

<div class="shine">Shine Bright Like a Diamond</div>
<div class="chrome">Shine Bright Like a Diamond</div>

$duration: 5s;
$text-color: rgba(255, 255, 255, 0.3);
$bgr-color: #333;
html {
    background-color: $bgr-color;
    text-align: center
}

body {
    padding-top: 3em;
}

.shine, .chrome {
    font-size: 3em;
    margin: 0 auto;
    margin-bottom: 1em;
    font-weight: bold;
}

.shine {
    background: #222 -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) 0 0 no-repeat;
    -webkit-background-size: 150px;
    color: $text-color;
    -webkit-background-clip: text;
    -webkit-animation-name: shine;
    -webkit-animation-duration: $duration;
    -webkit-animation-iteration-count: infinite;
    text-shadow: 0 0px 0px rgba(255, 255, 255, 0.5);
}

.chrome {
    background: #222 -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) 0 0 no-repeat;
    background-image: -webkit-linear-gradient(-40deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%);
    -webkit-background-size: 200px;
    color: $text-color;
    -webkit-background-clip: text;
    -webkit-animation-name: shine;
    -webkit-animation-duration: $duration;
    -webkit-animation-iteration-count: infinite;
    text-shadow: 0 0px 0px rgba(255, 255, 255, 0.5);
}

@-webkit-keyframes shine {
    0%, 10% {
        background-position: -1000px;
    }
    20% {
        background-position: top left;
    }
    90% {
        background-position: top right;
    }
    100% {
        background-position: 1000px;
    }
}

4 Appendix

4.1 Blooper

4.2 Documenting File Creation

It’s useful to record some information about how your file was created.

• File creation date: 2021-05-12
• File latest updated date: 2021-05-13
• R version 4.0.5 (2021-03-31)
• rmarkdown package version: 2.8
• File version: 1.0.0
• Author Profile: ®γσ, Eng Lian Hu
• GitHub: Source Code
• Additional session information:

suppressMessages(require('dplyr', quietly = TRUE))
suppressMessages(require('magrittr', quietly = TRUE))
suppressMessages(require('formattable', quietly = TRUE))
suppressMessages(require('knitr', quietly = TRUE))
suppressMessages(require('kableExtra', quietly = TRUE))

sys1 <- devtools::session_info()$platform %>% 
  unlist %>% data.frame(Category = names(.), session_info = .)
rownames(sys1) <- NULL

sys2 <- data.frame(Sys.info()) %>% 
  dplyr::mutate(Category = rownames(.)) %>% .[2:1]
names(sys2)[2] <- c('Sys.info')
rownames(sys2) <- NULL

if (nrow(sys1) == 9 & nrow(sys2) == 8) {
  sys2 %<>% rbind(., data.frame(
  Category = 'Current time', 
  Sys.info = paste(as.character(lubridate::now('Asia/Tokyo')), 'JST🗾')))
} else {
  sys1 %<>% rbind(., data.frame(
  Category = 'Current time', 
  session_info = paste(as.character(lubridate::now('Asia/Tokyo')), 'JST🗾')))
}

sys <- cbind(sys1, sys2) %>% 
  kbl(caption = 'Additional session information:') %>% 
  kable_styling(bootstrap_options = c('striped', 'hover', 'condensed', 'responsive')) %>% 
  row_spec(0, background = 'DimGrey', color = 'yellow') %>% 
  column_spec(1, background = 'CornflowerBlue', color = 'red') %>% 
  column_spec(2, background = 'grey', color = 'black') %>% 
  column_spec(3, background = 'CornflowerBlue', color = 'blue') %>% 
  column_spec(4, background = 'grey', color = 'white') %>% 
  row_spec(9, bold = T, color = 'yellow', background = '#D7261E')

rm(sys1, sys2)
sys

Additional session information:

Category	session_info	Category	Sys.info
version	R version 4.0.5 (2021-03-31)	sysname	Linux
os	Ubuntu 20.04.2 LTS	release	5.8.0-52-generic
system	x86_64, linux-gnu	version	#59~20.04.1-Ubuntu SMP Fri Apr 30 16:10:51 UTC 2021
ui	X11	nodename	Scibrokes-Trading
language	en	machine	x86_64
collate	C	login	englianhu
ctype	en_US.UTF-8	user	englianhu
tz	Asia/Tokyo	effective_user	englianhu
date	2021-05-13	Current time	2021-05-13 06:12:14 JST🗾

4.3 Reference

4.4 Reference :

• CSS3 : Shining Gradient Text Effect with Shining Gradient Effect Background #1994
• sass R Package
• CSS with superpowers
• Shining Text Effect CSS3
• Bayesian Statistics: Mixture Models (Assessment Week2 A Codes)
• tableau : 100 color palettes
• 15.10 Style HTML pages with Sass/SCSS
• Gradient text with animation
• Animating CSS Gradients, using only CSS
• himynameisdave/broken-gradient-animation.less
• Hello JS in R Markdown
• CSS GRADIENT ANIMATOR