t.Rmd

---
title: "Untitled"
author: " ®γσ ξηg"
date: '2022-04-11'
output: html_document
---

![](诸子百家考工记/江夏堂（甲）.png)

# 设定

## SCSS 设置

<style>
pre {
  overflow-x: auto;
}
pre code {
  word-wrap: normal;
  white-space: pre;
}
.table-hover > tbody > tr:hover { 
  background-color: #8D918D;
}
</style>

```{r load-sass, class.source='bg-success', class.output='bg-primary'}
# install.packages('remotes', dependencies = TRUE, INSTALL_opts = '--no-lock')
library('BBmisc', 'rmsfuns')
#remotes::install_github("rstudio/sass")
lib('sass')

## https://support.rstudio.com/hc/en-us/articles/200532197
## https://community.rstudio.com/t/r-does-not-display-korean-chinese/30889/3?u=englianhu
#Sys.setlocale("LC_CTYPE", "en_US.UTF-8")
#Sys.setlocale("LC_CTYPE", "zh_CN.UTF-8")
#Sys.setlocale(category = "LC_CTYPE", "Chinese (Simplified)_China.936")
#Sys.setlocale(locale = "Chinese")
#Sys.setlocale(locale = "Japanese")
#Sys.setlocale(locale = "English")

# rmarkdown::render('/home/englianhu/Documents/owner/ryo-cn.Rmd',  encoding = 'UTF-8')
#Sys.setlocale("LC_CTYPE", "UTF-8")
#Sys.setlocale(locale = "UTF-8")
#Sys.setlocale(category = "LC_ALL", locale = "chs")
#Sys.setlocale(category = "LC_ALL", locale = "UTF-8")
#Sys.setlocale(category = "LC_ALL", locale = "Chinese")
#Sys.setlocale(category = "LC_ALL", locale = "zh_CN.UTF-8")
Sys.setlocale("LC_ALL", "en_US.UTF-8")
```

```{scss set-scss, class.source='bg-success', class.output='bg-primary'}
/* https://stackoverflow.com/a/66029010/3806250 */
h1 { color: #002C54; }
h2 { color: #2F496E; }
h3 { color: #375E97; }
h4 { color: #556DAC; }
h5 { color: #92AAC7; }

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

.hover02 {
  color: #FFD64D;
  background: linear-gradient(155deg, #002C54 0%, #4CB5F5 100%);
  transition: all 0.45s;
  &:hover{
    background: linear-gradient(155deg, #002C54 20%, #4CB5F5 80%);
    }
  }

.hover03 {
  color: #FFD64D;
  background: linear-gradient(155deg, #A10115 0%, #FF3C5C 100%);
  transition: all 0.45s;
  &:hover{
    background: linear-gradient(155deg, #A10115 20%, #FF3C5C 80%);
    }
  }
```

```{r gb-opts, class.source='hover01', class.output='hover02'}
## Set the timezone but not change the datetime
Sys.setenv(TZ = 'Asia/Shanghai')

## Setting to omit all warnings
## https://stackoverflow.com/a/36846793/3806250
## Set width
## options(knitr.table.format = 'html') will set all kableExtra tables to be 'html', otherwise need to set the parameter on every single table.
options(warn = -1, width = 999, knitr.table.format = 'html')#, digits.secs = 6)

## https://stackoverflow.com/questions/39417003/long-vectors-not-supported-yet-abnor-in-rmd-but-not-in-r-script
## https://yihui.org/knitr/options
knitr::opts_chunk$set(
  class.source = 'hover01', class.output = 'hover02', class.error = 'hover03', 
  message = FALSE, warning = FALSE, error = TRUE, 
  autodep = TRUE, aniopts = 'loop', 
  progress = TRUE, verbose = TRUE, 
  cache = FALSE, cache.lazy = FALSE, result = 'asis')
```

<br><br>

## 设置

```{r libs, eval=FALSE}
## Setup Options, Loading Required Libraries and Preparing Environment
## Loading the packages and setting adjustment
source('函数/libs.R')
```

```{r set, include=FALSE}
## Setup Options, Loading Required Libraries and Preparing Environment

## Loading the package 'BBmisc'
if(suppressMessages(!require('BBmisc'))){
  install.packages('BBmisc', dependencies = TRUE, INSTALL_opts = '--no-lock')
  suppressMessages(library('BBmisc'))
}
if (suppressMessages(!require('rmsfuns'))) {
  install.packages('rmsfuns', dependencies = TRUE, INSTALL_opts = '--no-lock')
  suppressMessages(library('rmsfuns'))
}

if(!require('REmap')) devtools::install_github('lchiffon/REmap')

## Loading multiple packages at once
pkgs <- c('readr', 'plyr', 'dplyr', 'magrittr', 'tidyverse', 'devtools', 'zoo', 'lubridate', 'stringr', 'rvest', 'markdown', 'googleVis', 'knitr', 'rmarkdown', 'htmltools', 'knitr', 'kableExtra', 'formattable', 'echarts4r', 'radarchart', 'MASS', 'htmlwidgets', 'REmap', 'ggmap', 'vembedr', 'maps', 'ggplot2', 'leaflet', 'maptools', 'data.table', 'encode')

suppressAll(lib(pkgs))
load_pkg(pkgs)
rm(pkgs)

## Set the googleVis options first to change the behaviour of plot.gvis, so that 
##  only the chart component of the HTML file is written into the output file.
op <- options(gvis.plot.tag = 'chart')

## <audio src='文艺坊曲库/bigmoney.mp3' autoplay controls loop></audio>
```


## 第2章：日本の学

### A. 日本の興国論

`r encode::encode('\U0001F409')`

明治維新は、まずは西欧から「学ぶ」ことに特化したのである。

```{r, echo=FALSE}
# Don't delete this chunk if you are using the mosaic package
# This loads the mosaic and dplyr packages

## to omit all warnings
options(warn=-1)

## Loading the packages
if(!'devtools' %in% installed.packages()){
  install.packages('devtools')}
if(!'BBmisc' %in% installed.packages()){
  install.packages('BBmisc')}
if(!'REmap' %in% installed.packages()){
  install_github('lchiffon/REmap')}

suppressPackageStartupMessages(library('BBmisc'))
pkgs <- c('devtools','htmltools','REmap','ggmap','lubridate', 'REmap', 'shiny', 'shinydashboard', 'shinydashboardPlus')

suppressAll(lib(pkgs)); rm(pkgs)

## Set the timezone but not change the datetime
Sys.setenv(TZ = 'Asia/Shanghai')

## Setting to omit all warnings
## https://stackoverflow.com/a/36846793/3806250
## Set width
## options(knitr.table.format = 'html') will set all kableExtra tables to be 'html', otherwise need to set the parameter on every single table.
options(warn = -1, width = 999, knitr.table.format = 'html')#, digits.secs = 6)

## https://stackoverflow.com/questions/39417003/long-vectors-not-supported-yet-abnor-in-rmd-but-not-in-r-script
## https://yihui.org/knitr/options
knitr::opts_chunk$set(
  class.source = 'hover01', class.output = 'hover02', class.error = 'hover03', 
  message = FALSE, warning = FALSE, error = TRUE, 
  autodep = TRUE, aniopts = 'loop', 
  progress = TRUE, verbose = TRUE, 
  cache = FALSE, cache.lazy = FALSE, result = 'asis')
```

```{r, echo=FALSE}
## Reinitialized the REmap
remap.init()

## Set a data frame format cities and randomly set country code
data = data.frame(country=mapNames('world'), value=5*sample(178)+200)

vec = c('Tokyo','Shanghai','New York','Sydney','London','Bangkok',
        'Taipei','Moscow','Washington','Lyon','Milan','Rome','Macao',
        'Singapore','Hong Kong','Kuala Lumpur','Madrid','Geneva','Paris',
        'Melbourne','Boston','Washington','Liverpool','Brighton','Bali',
        'San Francisco','Jakarta','Ho Chi Minh','Brasilia','Barcelona',
        'Rio de Janeiro','Buenos Aires','Bern','Basel','Zurich','Manila',
        'Toronto','Vancouver','Budapest','New Delhi','Thimphu','Mumbai',
        'Cairo','Greater Johannesburg','Durban','Alexandria','Zaria','Dubai',
        'Istanbul','Mexico City','Sapporo','Osaka','Ulaanbaatar','Vienna','Beijing')

## Get world city geocode by ggmap
#geodata = suppressAll(as.data.frame(cbind(ggmap::geocode(vec),vec)))
## Get world city geocode from simplemaps.com
## https://simplemaps.com/data/world-cities
geodata <- data.table::fread('文艺数据库/worldcities.csv') |> 
  dplyr::filter(capital %in% c('primary', 'admin')) |> 
  dplyr::select(lng, lat, country, city) |> 
  dplyr::rename(lon = lng) |> 
  dplyr::mutate(lon = round(lon, 3))

countries <- geodata$country |> 
  unique()

## randomly set country codes
data <- data.frame(
  country = countries, 
  value = 5 * sample(length(countries)) + 200)

## cities
#vec <- geodata$city

## lon & lat of cities
geodata <- geodata |> 
  data.frame() |> 
  dplyr::select(lon, lat, city) |> 
  dplyr::rename(vec = city)

## Design a line data frame
#markLinedata <- data.frame(
#  origin = rep('Beijing', (length(vec) - 1)), 
#  destination = geodata$vec[!geodata$vec %in% 'Beijing'])

## Design a line data.frame
markLinedata = data.frame(origin=rep('Beijing', 54),destination = vec[!vec %in% 'Beijing'])
```

```{r, echo=FALSE}
## Plot a shining World map
remapC(data, maptype='world',color=c('black','black'),
  #get_theme(theme = "Dark", lineColor = "Random",
  #backgroundColor = "#1b1b1b", titleColor = "#fff",
  #borderColor = "rgba(100,149,237,1)", regionColor = "#1b1b1b"),
  #theme=get_theme(backgroundColor='black'),
  markPointData=vec, markLineData=markLinedata, geoData=geodata)

## Plot the REmap shining
p <- remapC(data, maptype='world',color=c('black','black'),
  theme=get_theme(backgroundColor='black'),
  markPointData=vec, markLineData=markLinedata, geoData=geodata)
knitrREmap(p,local=F)
```

## REmap

- [ shinydashboard中如何展示REmap？DT::dataTableOutput一起用显示空白？ #29 ](https://github.com/Lchiffon/REmap/issues/29#issuecomment-1094248363)
- [三、R语言可视化--ggplot2和REmap包绘制地图](https://blog.csdn.net/u011596455/article/details/79573898)
- [Plotting with `{maps}` package](https://cran.r-project.org/web/packages/ggfortify/vignettes/plot_map.html)

```{r}
require('BBmisc')
pkgs <- c('REmap', 'maps', 'mapdata', 'mapproj', 'ggmap')
lib(pkgs)
mapdata = map_data('world')


data('world.cities')
world <- world.cities |> 
    dplyr::filter(name %in% c('Kuala Selangor', 'Tanjong Karang', 'Klang') | pop >= 200000) |> 
    dplyr::select(long, lat, name, pop)

data <- world |>  
  dplyr::select(name, pop)

geodata <- world |> 
    dplyr::select(long, lat, name)

vec <- geodata$name


## Design a line data.frame
markLinedata = data.frame(origin = rep('Zhengzhou', (length(vec)-1)), destination = vec[!vec == 'Zhengzhou'])

```

```{r plot-map, echo=FALSE}
## Plot the REmap shining 
plt <- remapC(data, maptype = 'world', color = c('black', 'black'),
       theme = get_theme(backgroundColor = 'black'),
       markPointData = vec, markLineData = markLinedata, geoData = geodata)
knitrREmap(plt, local = FALSE)
```


# 雷达图

```{scss}
// vim: et:sts=2:sw=2

@import url("https://fonts.googleapis.com/css?family=Cabin:400,700,400italic");

@chart-blue: hsl(207, 60%, 60%);

body, input, button, textarea, select {
  font: 16px Cabin;
  color: #bdbebf;
  background: #4a4844;
}

figure {
  text-align: center;
}

[peak-chart] { .peak-chart; }

figcaption {
  line-height: 36px;
  font-style: italic;

  button {
    background: none;
    border: 1px solid lightgray;
    cursor: pointer;
    font-size: 90%;
    margin: 0;
    padding: 1px 0.5em 0;
    line-height: 1.3;
    border-radius: 0.5em;
    vertical-align: text-top;

    &:hover {
      background: rgba(0,0,0,0.04);
    }
  }
}

.peak-chart(
    @r: 120px,

    @clr1: hsl(192, 60%, 60%),
    @clr2: @chart-blue,
    @clr3: hsl(234, 32%, 60%),
    @clr4: hsl(345, 58%, 60%),
    @clr5: hsl(185, 27%, 60%),
    @clr6: hsl(298, 29%, 60%),
    @clr7: hsl(220,  6%, 90%),
    @clr8: hsl(220,  6%, 90%),
    @clr9: hsl(220,  6%, 90%)
  ) {

  position: relative;
  display: inline-block;
  width: (@r * 2);
  height: (@r * 2);
  border-radius: @r;
  margin-top: @r;

  -webkit-transform: rotateX(45deg);
     -moz-transform: rotateX(45deg);
      -ms-transform: rotateX(45deg);
          transform: rotateX(45deg);
  
  &, * {
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
  }

  > [face] {
    position: absolute;
    bottom: 50%;
    left: 50%;
    width: @r;
    height: @r;

    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
            transform-origin: 0 100%;
    
    .transition;

    .fill(@color) {
      background-image:
        -webkit-linear-gradient(bottom right, fade(white, 0), fade(white, 25%) 50%, transparent 50%),
        -webkit-linear-gradient(bottom right, @color, @color 50%, transparent 50%);
      background-image:
        linear-gradient(to top left, fade(white, 0), fade(white, 25%) 50%, transparent 50%),
        linear-gradient(to top left, @color, @color 50%, transparent 50%);
    }

    .bkfill(@color) {
      .fill((darken(@color, 10%)));
    }
    
     &:nth-child(1) { .bkfill(@clr1); }
     &:nth-child(2) {   .fill(@clr1); }
     &:nth-child(3) { .bkfill(@clr2); }
     &:nth-child(4) {   .fill(@clr2); }
     &:nth-child(5) { .bkfill(@clr3); }
     &:nth-child(6) {   .fill(@clr3); }
     &:nth-child(7) { .bkfill(@clr4); }
     &:nth-child(8) {   .fill(@clr4); }
     &:nth-child(9) { .bkfill(@clr5); }
    &:nth-child(10) {   .fill(@clr5); }
    &:nth-child(11) { .bkfill(@clr6); }
    &:nth-child(12) {   .fill(@clr6); }
    &:nth-child(13) { .bkfill(@clr7); }
    &:nth-child(14) {   .fill(@clr7); }
    &:nth-child(15) { .bkfill(@clr8); }
    &:nth-child(16) {   .fill(@clr8); }
    &:nth-child(17) { .bkfill(@clr9); }
    &:nth-child(18) {   .fill(@clr9); }
  }

  > label {
    position: absolute;
    font-weight: bold;
    font-size: 90%;
    
    .transition;

    &:before {
      content: '';
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 3px;

      @grst: (lighten(@chart-blue, 30%));
      .gradient(~'@{grst}, @{chart-blue}', ~'to bottom left', ~'top right');
    }

    &[point=bottomright] {
      padding-right: 6px;
      padding-bottom: 9px;
      &:before {
        right: -3px;
        bottom: 3px;
      }
    }

    &[point=bottomleft] {
      padding-left: 6px;
      padding-bottom: 9px;
      &:before {
        left: -3px;
        bottom: 3px;
      }
    }

    &[point=topleft] {
      padding-left: 4px;
      padding-top: 4px;
      &:before {
        left: -3px;
        top: -3px;
      }
    }

    &[point=topright] {
      padding-right: 4px;
      padding-top: 4px;
      &:before {
        right: -3px;
        top: -3px;
      }
    }
  }
}

// -------
// Helpers
// -------

.gradient(@stops, @angle: to bottom, @oldAngle: top) {
  background-image: -webkit-linear-gradient(@oldAngle, @stops);
  background-image: linear-gradient(@angle, @stops);
}

.transition(@props: all, @dur: 0.25s, @easing: ease-in) {
  -webkit-transition: @props @dur @easing;
     -moz-transition: @props @dur @easing;
          transition: @props @dur @easing;
}
```

```{js}
// vim: et:sts=2:sw=2

var angular = window.angular
  , console = window.console;

window.chartCtrl = ['$scope', function($scope) {
  $scope.data = new Array(9);
  
  $scope.sample = function() {
    if (!$scope.paused) {
      for (var i=0, l=$scope.data.length; i < l; i++) {
        $scope.data[i] = Math.random() * 95 + 5;
      }
    }
  };
  
  $scope.paused = false;
  
  $scope.sample();
  $scope.sampler = setInterval(function() {
    if (!$scope.paused) {
      $scope.$apply($scope.sample);
    }
  }, 2000);
}];

angular.module('myApp', []).

directive('peakChart', ['$window', function($win) {
  var PI   = Math.PI
    , sin  = Math.sin
    , cos  = Math.cos
    , tan  = Math.tan
    , atan = Math.atan
    , acos = Math.acos
    , sqrt = Math.sqrt
    , pow  = Math.pow
    , abs  = Math.abs
    , rSkRo = /^(?:sk|ro)/;
  
  return {
    link: function(scope, elm, attrs) {
      var faces  = elm[0].querySelectorAll('[face]')
        , labels = elm[0].getElementsByTagName('label')
        , r      = elm[0].offsetWidth / 2
        , charth = 1.5 * r; // max height of peaks: revisit

      scope.$watch(attrs.data, function(data) {
        var sum = 0;
        angular.forEach(data, function(d) { sum += d; });
        
        // iterate slices
        for (var i=0, face; (face = faces[2*i]); i++) {
          var bkFace   = faces[2*i + 1]
           //
           // split the peaks evenly around the graph
           //
            , slice    = 2 * PI / (faces.length/2)
            , npos     = i * slice - PI
           //
           // give the slice height based on data - assume data values are percentages
           // also, tone down the peaks in front (HACK)
           //
            , val      = (i >= 4 ? data[i] * 0.6 : data[i])
            , h        = val * charth / 100
           //
           // face angle - each face covers half the slice
           //
            , fang     = slice/2
           // 
           // we want the faces to meet at a point "h" pixels above the
           // midpoint of the slice's arc
           //
            , chord    = 2 * r * sin(fang/2)
           //
           // chord's angle with radius
           //  
            , chang    = (PI - fang) / 2
           //
           // altitude from radius to arc midpoint
           //
            , alt2mp   = chord * sin(chang)

            , slope    = atan(h / alt2mp)
            , slopeLen = sqrt(pow(h,2) + pow(alt2mp,2))
           //
           // the radial triangles are half squares so h = r
           //
            , scaleY   = slopeLen / r
            , skew     = atan(chord * cos(chang) / slopeLen)
            ;
          
          setTransform(face,
            'translateZ', 2,
            'rotateZ',    npos,
            'rotateX',    slope - Math.PI,
            'skewX',      skew,
            'scaleY',     scaleY
          );
          
          setTransform(bkFace,
            'translateZ', 2,
            'rotateZ',    npos + slice,
            'rotateX',    -slope,
            'skewX',      skew,
            'scaleY',     scaleY
          );

          var lbl = labels[i];
          lbl.textContent = Math.round(val);

          var rlbl   = r
            , nlbl   = -npos - slice/2
            , lblx   = rlbl * cos(nlbl)
            , lbly   = rlbl * sin(nlbl)
            , lblxat = lblx > 0 ? 'left'   : 'right'
            , lblyat = lbly > 0 ? 'bottom' : 'top';

          lbl.style[lblxat] = r + abs(lblx) + 'px';
          lbl.style[lblyat] = r + abs(lbly) + 15 + 'px';
          lbl.setAttribute('point', lblyat + lblxat); // e.g., [point=topleft]

          if (i < 5) {
            setTransform(lbl,
              'rotateX',    deg(-45)
            , 'translateY', -(h / sqrt(2))
            , 'translateZ', h / sqrt(2)
            );
          }
        }
        
      }, /* deep */ true);
    }
  };
  
  function rad(x) {
    return (Math.round(x * 1000) / 1000) + 'rad';
  }
  
  
  function setTransform(node) {
    var ns = node.style, trans = '';
    for (var i=1, l=arguments.length; i < l; i += 2) {
      var nm = arguments[i], val = arguments[i+1];
      trans += nm + '(' + (
          rSkRo.test(nm) ? rad(val)
        : nm.slice(0, 2) === 'tr' ? val + 'px'
        : val) + ') ';
    }
    ns.webkitTransform =
      ns.mozTransform =
      ns.msTransform =
      ns.transform = trans;
  }

  function deg(x) {
      return { valueOf: function() { return x * PI / 180; } };
  }
  
}]);
```


<main ng-app="myApp">
  <figure ng-controller="chartCtrl">
    <div peak-chart data="data">
      <span face></span>
      <span face></span>
      <span face></span>
      <span face></span>
      <span face></span>
      <span face></span>
      <span face></span>
      <span face></span>
      <span face></span>
      <span face></span>
      <span face></span>
      <span face></span>
      <span face></span>
      <span face></span>
      <span face></span>
      <span face></span>
      <span face></span>
      <span face></span>
      
      <label></label>
      <label></label>
      <label></label>
      <label></label>
      <label></label>
      <label></label>
      <label></label>
      <label></label>
      <label></label>
    </div>
    <figcaption>
      <button ng-click="paused=!paused">
        {{ paused && '\u25b8' || '\u2759\u2759' }}
      </button>
    </figcaption>
  </figure>
</main> 



<ruby>건설<rt>geonseol</rt>중<rt>jung</rt></ruby>