apexcharter/docs/articles/articles/advanced-configuration.html

831 lines
217 KiB
HTML
Raw Normal View History

2019-09-06 13:03:56 +02:00
<!DOCTYPE html>
<!-- Generated by pkgdown: do not edit by hand --><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced configuration examples • apexcharter</title>
2020-02-25 15:57:21 +01:00
<!-- jquery --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script><!-- Bootstrap --><link href="../../css/theme.css" rel="stylesheet">
<!-- Font --><link href="../../css/montserrat.css" rel="stylesheet">
<style>body {font-family: 'Montserrat', sans-serif;}</style>
<!-- Particles --><script src="../../js/particles.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha256-U5ZEeKfGNOja007MMD3YBI0A3OSZOQbeG6z2f2Y0hu8=" crossorigin="anonymous"></script><style>
html,
body {
margin: 0;
padding: 0;
}
.contents {
opacity: 1;
background-color: #FFF;
z-index: 1;
}
#sidebar {
opacity: 1;
background-color: #FFF;
z-index: 1;
}
footer {
z-index: 1;
}
#particles {
position: fixed;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
}
.background {
position: absolute;
display: block;
top: 0;
left: 0;
z-index: 0;
}
</style>
<!-- Font Awesome icons --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/all.min.css" integrity="sha256-nAmazAk6vS34Xqo0BSrTb+abbtFlgsFK7NKSi6o7Y78=" crossorigin="anonymous">
2019-11-28 11:40:30 +01:00
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.1/css/v4-shims.min.css" integrity="sha256-6qHlizsOWFskGlwVOKuns+D1nB6ssZrHQrNj1wGplHc=" crossorigin="anonymous">
2020-02-15 15:17:46 +01:00
<!-- clipboard.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js" integrity="sha256-FiZwavyI2V6+EXO1U+xzLG3IKldpiTFf3153ea9zikQ=" crossorigin="anonymous"></script><!-- headroom.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.9.4/headroom.min.js" integrity="sha256-DJFC1kqIhelURkuza0AvYal5RxMtpzLjFhsnVIeuk+U=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.9.4/jQuery.headroom.min.js" integrity="sha256-ZX/yNShbjqsohH1k95liqY9Gd8uOiE1S4vZc+9KQ1K4=" crossorigin="anonymous"></script><!-- pkgdown --><link href="../../pkgdown.css" rel="stylesheet">
<script src="../../pkgdown.js"></script><meta property="og:title" content="Advanced configuration examples">
2019-09-06 13:03:56 +02:00
<meta property="og:description" content="">
<meta name="twitter:card" content="summary">
<!-- mathjax --><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js" integrity="sha256-nvJJv9wWKEm88qvoQl9ekL2J+k/RWIsaSScxxlsrv8k=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/config/TeX-AMS-MML_HTMLorMML.js" integrity="sha256-84DKXVJXs0/F8OTMzX4UR909+jtl4G7SPypPavF+GfA=" crossorigin="anonymous"></script><!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
2020-02-25 15:57:21 +01:00
<body id="body">
2019-09-06 13:03:56 +02:00
<div class="container template-article">
<header><div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
2020-02-25 15:57:21 +01:00
<span class="navbar-brand hidden-xs hidden-sm" style="padding: 10px 15px !important;">
<img src="https://github.com/dreamRs.png" class="hidden-xs hidden-sm" style="height: 50px;display: inline;vertical-align: middle;"><a class="navbar-link" href="../../index.html">apexcharter</a>
2020-03-20 10:17:30 +01:00
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.3.990</span>
2020-02-25 15:57:21 +01:00
</span>
<span class="navbar-brand hidden-md hidden-lg">
2020-02-15 15:17:46 +01:00
<a class="navbar-link" href="../../index.html">apexcharter</a>
2020-03-20 10:17:30 +01:00
<span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="Released version">0.1.3.990</span>
2019-09-06 13:03:56 +02:00
</span>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
2020-02-15 15:17:46 +01:00
<a href="../../index.html">
<span class="fas fa fas fa-home fa-lg"></span>
2019-09-06 13:03:56 +02:00
</a>
</li>
<li>
2020-02-15 15:17:46 +01:00
<a href="../../articles/apexcharter.html">Get started</a>
2019-09-06 13:03:56 +02:00
</li>
<li>
2020-02-15 15:17:46 +01:00
<a href="../../reference/index.html">Reference</a>
2019-09-06 13:03:56 +02:00
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Articles
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
2020-02-15 15:17:46 +01:00
<a href="../../articles/articles/advanced-configuration.html">Advanced configuration examples</a>
2019-09-06 13:03:56 +02:00
</li>
<li>
2020-02-15 15:17:46 +01:00
<a href="../../articles/labs.html">Labs: title, subtitle &amp; axis</a>
2019-09-06 13:03:56 +02:00
</li>
<li>
2020-02-15 15:17:46 +01:00
<a href="../../articles/lines.html">Options &amp; styles for lines</a>
</li>
2020-03-20 10:17:30 +01:00
<li>
<a href="../../articles/shiny-integration.html">Shiny integration</a>
</li>
2020-02-15 15:17:46 +01:00
<li>
<a href="../../articles/sync-charts.html">Syncing charts</a>
2019-09-06 13:03:56 +02:00
</li>
</ul>
</li>
<li>
2020-02-15 15:17:46 +01:00
<a href="../../news/index.html">Changelog</a>
2019-09-06 13:03:56 +02:00
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="https://github.com/dreamRs/apexcharter">
2020-02-15 15:17:46 +01:00
<span class="fab fa fab fa-github fa-lg"></span>
2019-09-06 13:03:56 +02:00
</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container -->
</div>
<!--/.navbar -->
2019-11-28 11:40:30 +01:00
2020-03-20 10:17:30 +01:00
</header><script src="advanced-configuration_files/htmlwidgets-1.5.1/htmlwidgets.js"></script><script src="advanced-configuration_files/apexcharts-3.17.0/apexcharts.min.js"></script><script src="advanced-configuration_files/d3-format-1.4.2/d3-format.min.js"></script><script src="advanced-configuration_files/apexcharter-binding-0.1.3.990/apexcharter.js"></script><div class="row">
2019-09-06 13:03:56 +02:00
<div class="col-md-9 contents">
<div class="page-header toc-ignore">
<h1>Advanced configuration examples</h1>
2020-02-15 15:17:46 +01:00
<small class="dont-index">Source: <a href="https://github.com/dreamRs/apexcharter/blob/master/vignettes/articles/advanced-configuration.Rmd"><code>vignettes/articles/advanced-configuration.Rmd</code></a></small>
2019-09-06 13:03:56 +02:00
<div class="hidden name"><code>advanced-configuration.Rmd</code></div>
</div>
2019-11-28 11:40:30 +01:00
<div class="sourceCode" id="cb1"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb1-1" title="1"><span class="kw"><a href="https://rdrr.io/r/base/library.html">library</a></span>(apexcharter)</a>
<a class="sourceLine" id="cb1-2" title="2"><span class="kw"><a href="https://rdrr.io/r/base/library.html">library</a></span>(dplyr)</a></code></pre></div>
2019-09-06 13:03:56 +02:00
<p>Here some advanced configuration examples to use the full potential of <a href="https://apexcharts.com/">ApexCharts</a>.</p>
<div id="bar-chart" class="section level1">
<h1 class="hasAnchor">
<a href="#bar-chart" class="anchor"></a>Bar chart</h1>
<p>This example is taken from <a href="https://github.com/hrbrmstr/hrbrthemes">{hrbrthemes}</a> readme, it use <code>mpg</code> dataset from <a href="https://github.com/tidyverse/ggplot2">{ggplot2}</a>.</p>
2019-11-28 11:40:30 +01:00
<p>Transform data and initialize the chart :</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb2-1" title="1"><span class="kw"><a href="https://rdrr.io/r/utils/data.html">data</a></span>(<span class="st">"mpg"</span>, <span class="dt">package =</span> <span class="st">"ggplot2"</span>)</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb2-2" title="2"></a>
<a class="sourceLine" id="cb2-3" title="3">bars &lt;-<span class="st"> </span><span class="kw">count</span>(mpg, class) <span class="op">%&gt;%</span><span class="st"> </span></a>
2019-11-28 11:40:30 +01:00
<a class="sourceLine" id="cb2-4" title="4"><span class="st"> </span><span class="kw">mutate</span>(<span class="dt">pct =</span> n<span class="op">/</span><span class="kw"><a href="https://rdrr.io/r/base/sum.html">sum</a></span>(n)) <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb2-5" title="5"><span class="st"> </span><span class="kw"><a href="../../reference/apex.html">apex</a></span>(<span class="dt">mapping =</span> <span class="kw"><a href="../../reference/apexcharter-exports.html">aes</a></span>(class, pct), <span class="dt">type =</span> <span class="st">"column"</span>)</a></code></pre></div>
2019-09-06 13:03:56 +02:00
<p>Change color used :</p>
<div class="sourceCode" id="cb3"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb3-1" title="1">bars &lt;-<span class="st"> </span>bars <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb3-2" title="2"><span class="st"> </span><span class="kw"><a href="../../reference/ax_colors.html">ax_colors</a></span>(<span class="st">"#617a89"</span>)</a></code></pre></div>
2019-09-06 13:03:56 +02:00
<p>Modify the y-axis and add a percent symbol after the labels :</p>
<div class="sourceCode" id="cb4"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb4-1" title="1">bars &lt;-<span class="st"> </span>bars <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb4-2" title="2"><span class="st"> </span><span class="kw"><a href="../../reference/ax_yaxis.html">ax_yaxis</a></span>(</a>
2019-11-28 11:40:30 +01:00
<a class="sourceLine" id="cb4-3" title="3"> <span class="dt">title =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">text =</span> <span class="st">"Weight (tons)"</span>),</a>
<a class="sourceLine" id="cb4-4" title="4"> <span class="dt">labels =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
2020-03-20 10:17:30 +01:00
<a class="sourceLine" id="cb4-5" title="5"> <span class="dt">formatter =</span> <span class="kw"><a href="../../reference/format_num.html">format_num</a></span>(<span class="st">".0%"</span>)</a>
<a class="sourceLine" id="cb4-6" title="6"> ), </a>
<a class="sourceLine" id="cb4-7" title="7"> <span class="dt">tickAmount =</span> <span class="dv">6</span>,</a>
<a class="sourceLine" id="cb4-8" title="8"> <span class="dt">max =</span> <span class="fl">0.3</span></a>
<a class="sourceLine" id="cb4-9" title="9"> )</a></code></pre></div>
2019-09-06 13:03:56 +02:00
<p>Add a title to the x-axis :</p>
<div class="sourceCode" id="cb5"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb5-1" title="1">bars &lt;-<span class="st"> </span>bars <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb5-2" title="2"><span class="st"> </span><span class="kw"><a href="../../reference/ax_xaxis.html">ax_xaxis</a></span>(</a>
2019-11-28 11:40:30 +01:00
<a class="sourceLine" id="cb5-3" title="3"> <span class="dt">title =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">text =</span> <span class="st">"Fuel efficiency (mpg)"</span>)</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb5-4" title="4"> )</a></code></pre></div>
<p>Modify the tooltip to display “Percentage” instead of the variable name “pct” :</p>
<div class="sourceCode" id="cb6"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb6-1" title="1">bars &lt;-<span class="st"> </span>bars <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb6-2" title="2"><span class="st"> </span><span class="kw"><a href="../../reference/ax_tooltip.html">ax_tooltip</a></span>(</a>
2019-11-28 11:40:30 +01:00
<a class="sourceLine" id="cb6-3" title="3"> <span class="dt">y =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
<a class="sourceLine" id="cb6-4" title="4"> <span class="dt">title =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb6-5" title="5"> <span class="dt">formatter =</span> <span class="kw"><a href="../../reference/apexcharter-exports.html">JS</a></span>(<span class="st">"function() {return 'Percentage';}"</span>)</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb6-6" title="6"> )</a>
<a class="sourceLine" id="cb6-7" title="7"> )</a>
<a class="sourceLine" id="cb6-8" title="8"> )</a></code></pre></div>
<p>Add title and subtitle and format them :</p>
<div class="sourceCode" id="cb7"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb7-1" title="1">bars &lt;-<span class="st"> </span>bars <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb7-2" title="2"><span class="st"> </span><span class="kw"><a href="../../reference/ax_labs.html">ax_labs</a></span>(</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb7-3" title="3"> <span class="dt">title =</span> <span class="st">"Seminal ggplot2 column chart example with percents"</span>,</a>
<a class="sourceLine" id="cb7-4" title="4"> <span class="dt">subtitle =</span> <span class="st">"Example taken from {hrbrthemes} readme"</span></a>
<a class="sourceLine" id="cb7-5" title="5"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb7-6" title="6"><span class="st"> </span><span class="kw"><a href="../../reference/ax_title.html">ax_title</a></span>(</a>
2019-11-28 11:40:30 +01:00
<a class="sourceLine" id="cb7-7" title="7"> <span class="dt">style =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">fontSize =</span> <span class="st">"22px"</span>)</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb7-8" title="8"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb7-9" title="9"><span class="st"> </span><span class="kw"><a href="../../reference/ax_subtitle.html">ax_subtitle</a></span>(</a>
2019-11-28 11:40:30 +01:00
<a class="sourceLine" id="cb7-10" title="10"> <span class="dt">style =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">fontSize =</span> <span class="st">"16px"</span>, <span class="dt">color =</span> <span class="st">"#BDBDBD"</span>)</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb7-11" title="11"> )</a></code></pre></div>
<p>Final result looks like :</p>
<div class="sourceCode" id="cb8"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb8-1" title="1">bars</a></code></pre></div>
2020-03-20 10:17:30 +01:00
<div id="htmlwidget-160d254a95f58cbc775a" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-160d254a95f58cbc775a">{"x":{"ax_opts":{"chart":{"type":"bar"},"series":[{"name":"pct","data":[{"x":"2seater","y":0.0213675213675214},{"x":"compact","y":0.200854700854701},{"x":"midsize","y":0.175213675213675},{"x":"minivan","y":0.047008547008547},{"x":"pickup","y":0.141025641025641},{"x":"subcompact","y":0.14957264957265},{"x":"suv","y":0.264957264957265}]}],"dataLabels":{"enabled":false},"plotOptions":{"bar":{"horizontal":false}},"colors":["#617a89"],"yaxis":{"tickAmount":6,"max":0.3,"labels":{"formatter":"function(value) {var locale = d3.formatLocale(JSON.parse('{ \"decimal\": \".\", \"thousands\": \",\", \"grouping\": [3], \"currency\": [\"$\", \"\"]}')); return '' + locale.format('.0%')(value) + '';}"},"title":{"text":"Weight (tons)"}},"xaxis":{"title":{"text":"Fuel efficiency (mpg)"}},"tooltip":{"y":{"title":{"formatter":"function() {return 'Percentage';}"}}},"title":{"text":"Seminal ggplot2 column chart example with percents","style":{"fontSize":"22px"}},"subtitle":{"text":"Example taken from {hrbrthemes} readme","style":{"fontSize":"16px","color":"#BDBDBD"}}},"auto_update":{"series_animate":true,"update_options":false,"options_animate":true,"options_redrawPaths":false}},"evals":["ax_opts.yaxis.labels.formatter","ax_opts.tooltip.y.title.formatter"],"jsHooks":[]}</script><details><p><summary><span title="View full code">View full code</span></summary></p>
2019-11-28 11:40:30 +01:00
<div class="sourceCode" id="cb9"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb9-1" title="1"><span class="kw"><a href="https://rdrr.io/r/utils/data.html">data</a></span>(<span class="st">"mpg"</span>, <span class="dt">package =</span> <span class="st">"ggplot2"</span>)</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb9-2" title="2"></a>
<a class="sourceLine" id="cb9-3" title="3"><span class="kw">count</span>(mpg, class) <span class="op">%&gt;%</span><span class="st"> </span></a>
2019-11-28 11:40:30 +01:00
<a class="sourceLine" id="cb9-4" title="4"><span class="st"> </span><span class="kw">mutate</span>(<span class="dt">pct =</span> n<span class="op">/</span><span class="kw"><a href="https://rdrr.io/r/base/sum.html">sum</a></span>(n)) <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb9-5" title="5"><span class="st"> </span><span class="kw"><a href="../../reference/apex.html">apex</a></span>(<span class="dt">mapping =</span> <span class="kw"><a href="../../reference/apexcharter-exports.html">aes</a></span>(class, pct), <span class="dt">type =</span> <span class="st">"column"</span>) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb9-6" title="6"><span class="st"> </span><span class="kw"><a href="../../reference/ax_colors.html">ax_colors</a></span>(<span class="st">"#617a89"</span>)<span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb9-7" title="7"><span class="st"> </span><span class="kw"><a href="../../reference/ax_yaxis.html">ax_yaxis</a></span>(</a>
2019-11-28 11:40:30 +01:00
<a class="sourceLine" id="cb9-8" title="8"> <span class="dt">title =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">text =</span> <span class="st">"Weight (tons)"</span>),</a>
<a class="sourceLine" id="cb9-9" title="9"> <span class="dt">labels =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
2020-03-20 10:17:30 +01:00
<a class="sourceLine" id="cb9-10" title="10"> <span class="dt">formatter =</span> <span class="kw"><a href="../../reference/format_num.html">format_num</a></span>(<span class="st">".0%"</span>)</a>
<a class="sourceLine" id="cb9-11" title="11"> ), </a>
<a class="sourceLine" id="cb9-12" title="12"> <span class="dt">tickAmount =</span> <span class="dv">6</span>,</a>
<a class="sourceLine" id="cb9-13" title="13"> <span class="dt">max =</span> <span class="fl">0.3</span></a>
<a class="sourceLine" id="cb9-14" title="14"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb9-15" title="15"><span class="st"> </span><span class="kw"><a href="../../reference/ax_xaxis.html">ax_xaxis</a></span>(</a>
<a class="sourceLine" id="cb9-16" title="16"> <span class="dt">title =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">text =</span> <span class="st">"Fuel efficiency (mpg)"</span>)</a>
<a class="sourceLine" id="cb9-17" title="17"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb9-18" title="18"><span class="st"> </span><span class="kw"><a href="../../reference/ax_tooltip.html">ax_tooltip</a></span>(</a>
<a class="sourceLine" id="cb9-19" title="19"> <span class="dt">y =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
<a class="sourceLine" id="cb9-20" title="20"> <span class="dt">title =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
<a class="sourceLine" id="cb9-21" title="21"> <span class="dt">formatter =</span> <span class="kw"><a href="../../reference/apexcharter-exports.html">JS</a></span>(<span class="st">"function() {return 'Percentage';}"</span>)</a>
<a class="sourceLine" id="cb9-22" title="22"> )</a>
<a class="sourceLine" id="cb9-23" title="23"> )</a>
<a class="sourceLine" id="cb9-24" title="24"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb9-25" title="25"><span class="st"> </span><span class="kw"><a href="../../reference/ax_labs.html">ax_labs</a></span>(</a>
<a class="sourceLine" id="cb9-26" title="26"> <span class="dt">title =</span> <span class="st">"Seminal ggplot2 column chart example with percents"</span>,</a>
<a class="sourceLine" id="cb9-27" title="27"> <span class="dt">subtitle =</span> <span class="st">"Example taken from {hrbrthemes} readme"</span></a>
<a class="sourceLine" id="cb9-28" title="28"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb9-29" title="29"><span class="st"> </span><span class="kw"><a href="../../reference/ax_title.html">ax_title</a></span>(</a>
<a class="sourceLine" id="cb9-30" title="30"> <span class="dt">style =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">fontSize =</span> <span class="st">"22px"</span>)</a>
<a class="sourceLine" id="cb9-31" title="31"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb9-32" title="32"><span class="st"> </span><span class="kw"><a href="../../reference/ax_subtitle.html">ax_subtitle</a></span>(</a>
<a class="sourceLine" id="cb9-33" title="33"> <span class="dt">style =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">fontSize =</span> <span class="st">"16px"</span>, <span class="dt">color =</span> <span class="st">"#BDBDBD"</span>)</a>
<a class="sourceLine" id="cb9-34" title="34"> )</a></code></pre></div>
2019-09-06 13:03:56 +02:00
</details><p><br><br></p>
</div>
<div id="lines" class="section level1">
<h1 class="hasAnchor">
<a href="#lines" class="anchor"></a>Lines</h1>
2019-11-28 11:40:30 +01:00
<p>Dataset used is from the UNHCR (The UN Refugee Agency) and contains data about UNHCRs populations of concern summarised by continent of origin.</p>
<p>Transform data and initialize the chart :</p>
<div class="sourceCode" id="cb10"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb10-1" title="1"><span class="kw"><a href="https://rdrr.io/r/utils/data.html">data</a></span>(<span class="st">"unhcr_ts"</span>)</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb10-2" title="2"></a>
<a class="sourceLine" id="cb10-3" title="3">lines &lt;-<span class="st"> </span>unhcr_ts <span class="op">%&gt;%</span><span class="st"> </span></a>
2019-11-28 11:40:30 +01:00
<a class="sourceLine" id="cb10-4" title="4"><span class="st"> </span><span class="kw"><a href="https://rdrr.io/r/stats/filter.html">filter</a></span>(population_type <span class="op">==</span><span class="st"> "Refugees (incl. refugee-like situations)"</span>) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb10-5" title="5"><span class="st"> </span><span class="kw">mutate</span>(<span class="dt">date =</span> <span class="kw"><a href="https://rdrr.io/r/base/as.Date.html">as.Date</a></span>(<span class="kw"><a href="https://rdrr.io/r/base/paste.html">paste0</a></span>(year, <span class="st">"-01-01"</span>))) <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb10-6" title="6"><span class="st"> </span><span class="kw"><a href="../../reference/apex.html">apex</a></span>(<span class="kw"><a href="../../reference/apexcharter-exports.html">aes</a></span>(date, n, <span class="dt">group =</span> continent_origin), <span class="dt">type =</span> <span class="st">"line"</span>)</a>
<a class="sourceLine" id="cb10-7" title="7"><span class="co">#&gt; Warning in make_series(mapdata, mapping, type, serie_name): apex: all groups</span></a>
2020-03-20 10:17:30 +01:00
<a class="sourceLine" id="cb10-8" title="8"><span class="co">#&gt; must have same length! You can use `tidyr::complete` for this.</span></a></code></pre></div>
2019-09-06 13:03:56 +02:00
<p>Put the legend at the bottom :</p>
<div class="sourceCode" id="cb11"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb11-1" title="1">lines &lt;-<span class="st"> </span>lines <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb11-2" title="2"><span class="st"> </span><span class="kw"><a href="../../reference/ax_legend.html">ax_legend</a></span>(<span class="dt">position =</span> <span class="st">"bottom"</span>)</a></code></pre></div>
2019-09-06 13:03:56 +02:00
<p>Change the width of the lines :</p>
<div class="sourceCode" id="cb12"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb12-1" title="1">lines &lt;-<span class="st"> </span>lines <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb12-2" title="2"><span class="st"> </span><span class="kw"><a href="../../reference/ax_stroke.html">ax_stroke</a></span>(<span class="dt">width =</span> <span class="dv">2</span>)</a></code></pre></div>
2019-09-06 13:03:56 +02:00
<p>Change the colors (Viridis palette) :</p>
<div class="sourceCode" id="cb13"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb13-1" title="1">lines &lt;-<span class="st"> </span>lines <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb13-2" title="2"><span class="st"> </span><span class="kw"><a href="../../reference/ax_colors.html">ax_colors</a></span>(<span class="st">"#440154"</span>, <span class="st">"#414487"</span>, <span class="st">"#2A788E"</span>,</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb13-3" title="3"> <span class="st">"#22A884"</span>, <span class="st">"#7AD151"</span>, <span class="st">"#FDE725"</span>)</a></code></pre></div>
<p>Data are in million, in the y-axis we divide by <code>1e6</code> to limit the number of digits :</p>
<div class="sourceCode" id="cb14"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb14-1" title="1">lines &lt;-<span class="st"> </span>lines <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb14-2" title="2"><span class="st"> </span><span class="kw"><a href="../../reference/ax_yaxis.html">ax_yaxis</a></span>(</a>
2019-11-28 11:40:30 +01:00
<a class="sourceLine" id="cb14-3" title="3"> <span class="dt">labels =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb14-4" title="4"> <span class="dt">formatter =</span> <span class="kw"><a href="../../reference/apexcharter-exports.html">JS</a></span>(<span class="st">"function(val) {return (val/1e6).toFixed(0);}"</span>)</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb14-5" title="5"> ),</a>
2019-11-28 11:40:30 +01:00
<a class="sourceLine" id="cb14-6" title="6"> <span class="dt">title =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">text =</span> <span class="st">"Number of refugees (in million)"</span>)</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb14-7" title="7"> )</a></code></pre></div>
<p>Only display the years in the x-axis labels :</p>
<div class="sourceCode" id="cb15"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb15-1" title="1">lines &lt;-<span class="st"> </span>lines <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb15-2" title="2"><span class="st"> </span><span class="kw"><a href="../../reference/ax_xaxis.html">ax_xaxis</a></span>(<span class="dt">labels =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">format =</span> <span class="st">"yyyy"</span>))</a></code></pre></div>
2019-09-06 13:03:56 +02:00
<p>Same in tooltip, and a thousand separator in the value displayed :</p>
<div class="sourceCode" id="cb16"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb16-1" title="1">lines &lt;-<span class="st"> </span>lines <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb16-2" title="2"><span class="st"> </span><span class="kw"><a href="../../reference/ax_tooltip.html">ax_tooltip</a></span>(</a>
2019-11-28 11:40:30 +01:00
<a class="sourceLine" id="cb16-3" title="3"> <span class="dt">x =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">format =</span> <span class="st">"yyyy"</span>),</a>
<a class="sourceLine" id="cb16-4" title="4"> <span class="dt">y =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb16-5" title="5"> <span class="dt">formatter =</span> <span class="kw"><a href="../../reference/apexcharter-exports.html">JS</a></span>(</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb16-6" title="6"> <span class="co"># thousand separator in javascript</span></a>
<a class="sourceLine" id="cb16-7" title="7"> <span class="st">"function(value) {return value.toString().replace(/</span><span class="ch">\\</span><span class="st">B(?=(</span><span class="ch">\\</span><span class="st">d{3})+(?!</span><span class="ch">\\</span><span class="st">d))/g, </span><span class="ch">\"</span><span class="st">,</span><span class="ch">\"</span><span class="st">);}"</span></a>
<a class="sourceLine" id="cb16-8" title="8"> )</a>
<a class="sourceLine" id="cb16-9" title="9"> )</a>
<a class="sourceLine" id="cb16-10" title="10"> )</a></code></pre></div>
<p>Add an annotation to the chart to identify the <a href="https://en.wikipedia.org/wiki/Great_Lakes_refugee_crisis">Great Lakes refugee crisis</a> in 1994 :</p>
<div class="sourceCode" id="cb17"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb17-1" title="1">lines &lt;-<span class="st"> </span>lines <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb17-2" title="2"><span class="st"> </span><span class="kw"><a href="../../reference/ax_annotations.html">ax_annotations</a></span>(</a>
2019-11-28 11:40:30 +01:00
<a class="sourceLine" id="cb17-3" title="3"> <span class="dt">points =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
<a class="sourceLine" id="cb17-4" title="4"> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb17-5" title="5"> <span class="dt">x =</span> <span class="kw"><a href="../../reference/apexcharter-exports.html">JS</a></span>(<span class="st">"new Date('1994').getTime()"</span>),</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb17-6" title="6"> <span class="dt">y =</span> <span class="dv">6935296</span>,</a>
2019-11-28 11:40:30 +01:00
<a class="sourceLine" id="cb17-7" title="7"> <span class="dt">label =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">text =</span> <span class="st">"Great Lakes refugee crisis"</span>, <span class="dt">offsetY =</span> <span class="dv">0</span>),</a>
<a class="sourceLine" id="cb17-8" title="8"> <span class="dt">marker =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">size =</span> <span class="dv">6</span>)</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb17-9" title="9"> )</a>
<a class="sourceLine" id="cb17-10" title="10"> )</a>
<a class="sourceLine" id="cb17-11" title="11"> )</a></code></pre></div>
<p>Add title and subtitle and format them :</p>
<div class="sourceCode" id="cb18"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb18-1" title="1">lines &lt;-<span class="st"> </span>lines <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb18-2" title="2"><span class="st"> </span><span class="kw"><a href="../../reference/ax_labs.html">ax_labs</a></span>(</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb18-3" title="3"> <span class="dt">title =</span> <span class="st">"Continent of origin for refugees population"</span>,</a>
<a class="sourceLine" id="cb18-4" title="4"> <span class="dt">subtitle =</span> <span class="st">"Data from the UN Refugee Agency"</span></a>
<a class="sourceLine" id="cb18-5" title="5"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb18-6" title="6"><span class="st"> </span><span class="kw"><a href="../../reference/ax_title.html">ax_title</a></span>(</a>
2019-11-28 11:40:30 +01:00
<a class="sourceLine" id="cb18-7" title="7"> <span class="dt">style =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">fontSize =</span> <span class="st">"22px"</span>)</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb18-8" title="8"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb18-9" title="9"><span class="st"> </span><span class="kw"><a href="../../reference/ax_subtitle.html">ax_subtitle</a></span>(</a>
2019-11-28 11:40:30 +01:00
<a class="sourceLine" id="cb18-10" title="10"> <span class="dt">style =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">fontSize =</span> <span class="st">"16px"</span>, <span class="dt">color =</span> <span class="st">"#BDBDBD"</span>)</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb18-11" title="11"> )</a></code></pre></div>
<p>Final result looks like :</p>
<div class="sourceCode" id="cb19"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb19-1" title="1">lines</a></code></pre></div>
2020-03-20 10:17:30 +01:00
<div id="htmlwidget-a8eae696ec72c0ed2c81" style="width:100%;height:350px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-a8eae696ec72c0ed2c81">{"x":{"ax_opts":{"chart":{"type":"line"},"series":[{"name":"Africa","data":[["new Date('1960-01-01').getTime()",150000],["new Date('1961-01-01').getTime()",302000],["new Date('1962-01-01').getTime()",322000],["new Date('1963-01-01').getTime()",353000],["new Date('1964-01-01').getTime()",490300],["new Date('1965-01-01').getTime()",579460],["new Date('1966-01-01').getTime()",736320],["new Date('1967-01-01').getTime()",833690],["new Date('1968-01-01').getTime()",963850],["new Date('1969-01-01').getTime()",937540],["new Date('1970-01-01').getTime()",974770],["new Date('1971-01-01').getTime()",976240],["new Date('1972-01-01').getTime()",1071850],["new Date('1973-01-01').getTime()",986220],["new Date('1974-01-01').getTime()",1070220],["new Date('1975-01-01').getTime()",1501340],["new Date('1976-01-01').getTime()",1697590],["new Date('1977-01-01').getTime()",2064965],["new Date('1978-01-01').getTime()",2377380],["new Date('1979-01-01').getTime()",3128940],["new Date('1980-01-01').getTime()",4222403],["new Date('1981-01-01').getTime()",3043515],["new Date('1982-01-01').getTime()",2952215],["new Date('1983-01-01').getTime()",2881859],["new Date('1984-01-01').getTime()",3470578],["new Date('1985-01-01').getTime()",3797764],["new Date('1986-01-01').getTime()",3595154],["new Date('1987-01-01').getTime()",3978264],["new Date('1988-01-01').getTime()",4593524],["new Date('1989-01-01').getTime()",4824904],["new Date('1990-01-01').getTime()",5912693],["new Date('1991-01-01').getTime()",5335460],["new Date('1992-01-01').getTime()",5577181],["new Date('1993-01-01').getTime()",6492397],["new Date('1994-01-01').getTime()",6935296],["new Date('1995-01-01').getTime()",5811513],["new Date('1996-01-01').getTime()",4543635],["new Date('1997-01-01').getTime()",3722238],["new Date('1998-01-01').getTime()",3593405],["new Date('1999-01-01').getTime()",3798915],["new Date('2000-01-01').getTime()",3951187],["new Date('2001-01-01').getTime()",3646853],["new Date('2002-01-01').getTime()",3715548],["new Date('2003-01-01').getTime()",3501590],["new Date('2004-01-01').getTime()",3409723],["new Date('2005-01-01').getTime()",3213525],["new Date('2006-01-01').getTime()",3156132],["new Date('2007-01-01').getTime()",2891309],["new Date('2008-01-01').getTime()",2769104],["new Date('2009-01-01').getTime()",2805162],["new Date('2010-01-01').getTime()",2947809],["new Date('2011-01-01').getTime()",3511640],["new Date('2012-01-01').getTime()",3677797],["new Date('2013-01-01').getTime()",3842504],["new Date('2014-01-01').getTime()",4623635],["new Date('2015-01-01').getTime()",5382290],["new Date('2016-01-01').getTime()",6165089],["new Date('2017-01-01').getTime()",7373420]]},{"name":"Asia","data":[["new Date('1964-01-01').getTime()",1261170],["new Date('1965-01-01').getTime()",1397000],["new Date('1966-01-01').getTime()",1395810],["new Date('1967-01-01').getTime()",151180],["new Date('1968-01-01').getTime()",158830],["new Date('1969-01-01').getTime()",155240],["new Date('1970-01-01').getTime()",150760],["new Date('1971-01-01').getTime()",195180],["new Date('1972-01-01').getTime()",205130],["new Date('1973-01-01').getTime()",101840],["new Date('1974-01-01').getTime()",68000],["new Date('1975-01-01').getTime()",84650],["new Date('1976-01-01').getTime()",95420],["new Date('1977-01-01').getTime()",264670],["new Date('1978-01-01').getTime()",676850],["new Date('1979-01-01').getTime()",1222020],["new Date('1980-01-01').getTime()",2524154],["new Date('1981-01-01').getTime()",4584803],["new Date('1982-01-01').getTime()",5249822],["new Date('1983-01-01').getTime()",5476427],["new Date('1984-01-01').getTime()",5166666],["new Date('1985-01-01').getTime()",5819892],["new Date('1986-01-01').getTime()",6326541],["new Date('1987-01-01').getTime()",6574797],["new Date('1988-01-01').getTime()",7066582],["new Date('1989-01-01').getTime()",7084483],["new Date('1990-01-01').getTime()",8494046],["new Date('1991-01-01').getTime()",8793297],["new Date('1992-01-01').getTime()",7956380],["new Date('1993-01-01').getTime
2019-11-28 11:40:30 +01:00
<div class="sourceCode" id="cb20"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb20-1" title="1"><span class="kw"><a href="https://rdrr.io/r/utils/data.html">data</a></span>(<span class="st">"unhcr_ts"</span>)</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb20-2" title="2"></a>
<a class="sourceLine" id="cb20-3" title="3">unhcr_ts <span class="op">%&gt;%</span><span class="st"> </span></a>
2019-11-28 11:40:30 +01:00
<a class="sourceLine" id="cb20-4" title="4"><span class="st"> </span><span class="kw"><a href="https://rdrr.io/r/stats/filter.html">filter</a></span>(population_type <span class="op">==</span><span class="st"> "Refugees (incl. refugee-like situations)"</span>) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb20-5" title="5"><span class="st"> </span><span class="kw">mutate</span>(<span class="dt">date =</span> <span class="kw"><a href="https://rdrr.io/r/base/as.Date.html">as.Date</a></span>(<span class="kw"><a href="https://rdrr.io/r/base/paste.html">paste0</a></span>(year, <span class="st">"-01-01"</span>))) <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb20-6" title="6"><span class="st"> </span><span class="kw"><a href="../../reference/apex.html">apex</a></span>(<span class="kw"><a href="../../reference/apexcharter-exports.html">aes</a></span>(date, n, <span class="dt">group =</span> continent_origin), <span class="dt">type =</span> <span class="st">"line"</span>) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb20-7" title="7"><span class="st"> </span><span class="kw"><a href="../../reference/ax_legend.html">ax_legend</a></span>(<span class="dt">position =</span> <span class="st">"bottom"</span>) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb20-8" title="8"><span class="st"> </span><span class="kw"><a href="../../reference/ax_stroke.html">ax_stroke</a></span>(<span class="dt">width =</span> <span class="dv">2</span>) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb20-9" title="9"><span class="st"> </span><span class="kw"><a href="../../reference/ax_colors.html">ax_colors</a></span>(<span class="st">"#440154"</span>, <span class="st">"#414487"</span>, <span class="st">"#2A788E"</span>,</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb20-10" title="10"> <span class="st">"#22A884"</span>, <span class="st">"#7AD151"</span>, <span class="st">"#FDE725"</span>) <span class="op">%&gt;%</span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb20-11" title="11"><span class="st"> </span><span class="kw"><a href="../../reference/ax_yaxis.html">ax_yaxis</a></span>(</a>
2019-11-28 11:40:30 +01:00
<a class="sourceLine" id="cb20-12" title="12"> <span class="dt">labels =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
<a class="sourceLine" id="cb20-13" title="13"> <span class="dt">formatter =</span> htmlwidgets<span class="op">::</span><span class="kw"><a href="https://rdrr.io/pkg/htmlwidgets/man/JS.html">JS</a></span>(<span class="st">"function(val) {return (val/1e6).toFixed(0);}"</span>)</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb20-14" title="14"> ),</a>
2019-11-28 11:40:30 +01:00
<a class="sourceLine" id="cb20-15" title="15"> <span class="dt">title =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">text =</span> <span class="st">"Number of refugees (in million)"</span>)</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb20-16" title="16"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb20-17" title="17"><span class="st"> </span><span class="kw"><a href="../../reference/ax_xaxis.html">ax_xaxis</a></span>(<span class="dt">labels =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">format =</span> <span class="st">"yyyy"</span>)) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb20-18" title="18"><span class="st"> </span><span class="kw"><a href="../../reference/ax_tooltip.html">ax_tooltip</a></span>(</a>
2019-11-28 11:40:30 +01:00
<a class="sourceLine" id="cb20-19" title="19"> <span class="dt">x =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">format =</span> <span class="st">"yyyy"</span>),</a>
<a class="sourceLine" id="cb20-20" title="20"> <span class="dt">y =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb20-21" title="21"> <span class="dt">formatter =</span> <span class="kw"><a href="../../reference/apexcharter-exports.html">JS</a></span>(</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb20-22" title="22"> <span class="co"># thousand separator in javascript</span></a>
<a class="sourceLine" id="cb20-23" title="23"> <span class="st">"function(value) {return value.toString().replace(/</span><span class="ch">\\</span><span class="st">B(?=(</span><span class="ch">\\</span><span class="st">d{3})+(?!</span><span class="ch">\\</span><span class="st">d))/g, </span><span class="ch">\"</span><span class="st">,</span><span class="ch">\"</span><span class="st">);}"</span></a>
<a class="sourceLine" id="cb20-24" title="24"> )</a>
<a class="sourceLine" id="cb20-25" title="25"> )</a>
<a class="sourceLine" id="cb20-26" title="26"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb20-27" title="27"><span class="st"> </span><span class="kw"><a href="../../reference/ax_annotations.html">ax_annotations</a></span>(</a>
2019-11-28 11:40:30 +01:00
<a class="sourceLine" id="cb20-28" title="28"> <span class="dt">points =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
<a class="sourceLine" id="cb20-29" title="29"> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb20-30" title="30"> <span class="dt">x =</span> <span class="kw"><a href="../../reference/apexcharter-exports.html">JS</a></span>(<span class="st">"new Date('1994').getTime()"</span>),</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb20-31" title="31"> <span class="dt">y =</span> <span class="dv">6935296</span>,</a>
2019-11-28 11:40:30 +01:00
<a class="sourceLine" id="cb20-32" title="32"> <span class="dt">label =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">text =</span> <span class="st">"Great Lakes refugee crisis"</span>, <span class="dt">offsetY =</span> <span class="dv">0</span>),</a>
<a class="sourceLine" id="cb20-33" title="33"> <span class="dt">marker =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">size =</span> <span class="dv">6</span>)</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb20-34" title="34"> )</a>
<a class="sourceLine" id="cb20-35" title="35"> )</a>
<a class="sourceLine" id="cb20-36" title="36"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb20-37" title="37"><span class="st"> </span><span class="kw"><a href="../../reference/ax_labs.html">ax_labs</a></span>(</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb20-38" title="38"> <span class="dt">title =</span> <span class="st">"Continent of origin for refugees population"</span>,</a>
<a class="sourceLine" id="cb20-39" title="39"> <span class="dt">subtitle =</span> <span class="st">"Data from the UN Refugee Agency"</span></a>
<a class="sourceLine" id="cb20-40" title="40"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb20-41" title="41"><span class="st"> </span><span class="kw"><a href="../../reference/ax_title.html">ax_title</a></span>(</a>
2019-11-28 11:40:30 +01:00
<a class="sourceLine" id="cb20-42" title="42"> <span class="dt">style =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">fontSize =</span> <span class="st">"22px"</span>)</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb20-43" title="43"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb20-44" title="44"><span class="st"> </span><span class="kw"><a href="../../reference/ax_subtitle.html">ax_subtitle</a></span>(</a>
2019-11-28 11:40:30 +01:00
<a class="sourceLine" id="cb20-45" title="45"> <span class="dt">style =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">fontSize =</span> <span class="st">"16px"</span>, <span class="dt">color =</span> <span class="st">"#BDBDBD"</span>)</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb20-46" title="46"> )</a></code></pre></div>
</details><p><br><br></p>
</div>
<div id="scatter-plot" class="section level1">
<h1 class="hasAnchor">
<a href="#scatter-plot" class="anchor"></a>Scatter plot</h1>
<p>Dataset used is from <a href="https://github.com/jennybc/gapminder">{gapminder}</a>.</p>
2019-11-28 11:40:30 +01:00
<p>Transform data and initialize the chart :</p>
<div class="sourceCode" id="cb21"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb21-1" title="1"><span class="kw"><a href="https://rdrr.io/r/utils/data.html">data</a></span>(<span class="st">"gapminder"</span>, <span class="dt">package =</span> <span class="st">"gapminder"</span>)</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb21-2" title="2"></a>
<a class="sourceLine" id="cb21-3" title="3">scatter &lt;-<span class="st"> </span>gapminder <span class="op">%&gt;%</span><span class="st"> </span></a>
2019-11-28 11:40:30 +01:00
<a class="sourceLine" id="cb21-4" title="4"><span class="st"> </span><span class="kw"><a href="https://rdrr.io/r/stats/filter.html">filter</a></span>(year <span class="op">==</span><span class="st"> </span><span class="dv">2007</span>) <span class="op">%&gt;%</span><span class="st"> </span></a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb21-5" title="5"><span class="st"> </span><span class="kw">mutate</span>(</a>
2019-11-28 11:40:30 +01:00
<a class="sourceLine" id="cb21-6" title="6"> <span class="dt">gdpPercap =</span> <span class="kw"><a href="https://rdrr.io/r/base/Log.html">log</a></span>(gdpPercap),</a>
<a class="sourceLine" id="cb21-7" title="7"> <span class="dt">pop =</span> <span class="kw"><a href="https://rdrr.io/r/base/MathFun.html">sqrt</a></span>(pop <span class="op">/</span><span class="st"> </span>pi) <span class="op">/</span><span class="st"> </span><span class="dv">1500</span></a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb21-8" title="8"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb21-9" title="9"><span class="st"> </span><span class="kw"><a href="../../reference/apex.html">apex</a></span>(</a>
<a class="sourceLine" id="cb21-10" title="10"> <span class="dt">mapping =</span> <span class="kw"><a href="../../reference/apexcharter-exports.html">aes</a></span>(gdpPercap, </a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb21-11" title="11"> lifeExp, </a>
<a class="sourceLine" id="cb21-12" title="12"> <span class="dt">z =</span> pop, </a>
<a class="sourceLine" id="cb21-13" title="13"> <span class="dt">group =</span> continent, </a>
<a class="sourceLine" id="cb21-14" title="14"> <span class="dt">label =</span> country), </a>
<a class="sourceLine" id="cb21-15" title="15"> <span class="dt">type =</span> <span class="st">"scatter"</span>, </a>
<a class="sourceLine" id="cb21-16" title="16"> <span class="dt">height =</span> <span class="st">"500px"</span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb21-17" title="17"> )</a>
<a class="sourceLine" id="cb21-18" title="18"><span class="co">#&gt; Warning in make_series(mapdata, mapping, type, serie_name): apex: all groups</span></a>
2020-03-20 10:17:30 +01:00
<a class="sourceLine" id="cb21-19" title="19"><span class="co">#&gt; must have same length! You can use `tidyr::complete` for this.</span></a></code></pre></div>
2019-09-06 13:03:56 +02:00
<p>Enable zoom on both axis :</p>
<div class="sourceCode" id="cb22"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb22-1" title="1">scatter &lt;-<span class="st"> </span>scatter <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb22-2" title="2"><span class="st"> </span><span class="kw"><a href="../../reference/ax_chart.html">ax_chart</a></span>(<span class="dt">zoom =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb22-3" title="3"> <span class="dt">enabled =</span> <span class="ot">TRUE</span>, <span class="dt">type =</span> <span class="st">"xy"</span></a>
<a class="sourceLine" id="cb22-4" title="4"> ))</a></code></pre></div>
<p>Show y-axis border and ticks, no decimals in labels :</p>
<div class="sourceCode" id="cb23"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb23-1" title="1">scatter &lt;-<span class="st"> </span>scatter <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb23-2" title="2"><span class="st"> </span><span class="kw"><a href="../../reference/ax_yaxis.html">ax_yaxis</a></span>(</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb23-3" title="3"> <span class="dt">decimalsInFloat =</span> <span class="dv">0</span>, </a>
2019-11-28 11:40:30 +01:00
<a class="sourceLine" id="cb23-4" title="4"> <span class="dt">axisBorder =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">show =</span> <span class="ot">TRUE</span>),</a>
<a class="sourceLine" id="cb23-5" title="5"> <span class="dt">axisTicks =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">show =</span> <span class="ot">TRUE</span>),</a>
<a class="sourceLine" id="cb23-6" title="6"> <span class="dt">title =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">text =</span> <span class="st">"life expectancy at birth (in years)"</span>)</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb23-7" title="7"> )</a></code></pre></div>
2019-11-28 11:40:30 +01:00
<p>Configuration for x-axis, hide the tooltip displayed on the axis itself (not the main tooltip), display two decimals in the labels (useful when zooming, since values are logarithm theres a lot of decimals) :</p>
2019-09-06 13:03:56 +02:00
<div class="sourceCode" id="cb24"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb24-1" title="1">scatter &lt;-<span class="st"> </span>scatter <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb24-2" title="2"><span class="st"> </span><span class="kw"><a href="../../reference/ax_xaxis.html">ax_xaxis</a></span>(</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb24-3" title="3"> <span class="dt">tickAmount =</span> <span class="dv">8</span>,</a>
2019-11-28 11:40:30 +01:00
<a class="sourceLine" id="cb24-4" title="4"> <span class="dt">labels =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb24-5" title="5"> <span class="dt">formatter =</span> <span class="kw"><a href="../../reference/apexcharter-exports.html">JS</a></span>(<span class="st">"function(val) {return val.toFixed(2);}"</span>)</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb24-6" title="6"> ), </a>
2019-11-28 11:40:30 +01:00
<a class="sourceLine" id="cb24-7" title="7"> <span class="dt">tooltip =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">enabled =</span> <span class="ot">FALSE</span>),</a>
<a class="sourceLine" id="cb24-8" title="8"> <span class="dt">title =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">text =</span> <span class="st">"GDP per capita (log-scale)"</span>)</a>
2019-09-06 13:03:56 +02:00
<a class="sourceLine" id="cb24-9" title="9"> )</a></code></pre></div>
<p>Display vertical grid lines (on the x-axis, those on the y-axis are enabled by default) :</p>
<div class="sourceCode" id="cb25"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb25-1" title="1">scatter &lt;-<span class="st"> </span>scatter <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb25-2" title="2"><span class="st"> </span><span class="kw"><a href="../../reference/ax_grid.html">ax_grid</a></span>(<span class="dt">xaxis =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">lines =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">show =</span> <span class="ot">TRUE</span>)))</a></code></pre></div>
2019-09-06 13:03:56 +02:00
<p>Legend on the right and slightly offset downwards :</p>
<div class="sourceCode" id="cb26"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb26-1" title="1">scatter &lt;-<span class="st"> </span>scatter <span class="op">%&gt;%</span><span class="st"> </span></a>
2020-02-15 15:17:46 +01:00
<a class="sourceLine" id="cb26-2" title="2"><span class="st"> </span><span class="kw"><a href="../../reference/ax_legend.html">ax_legend</a></span>(<span class="dt">position =</span> <span class="st">"right"</span>, <span class="dt">offsetY =</span> <span class="dv">70</span>)</a></code></pre></div>
2019-11-28 11:40:30 +01:00
<p>Add a custom tooltip with an HTML string, data used in aesthetic can be accessed in JavaScript with <code>w.config.series[seriesIndex].data[dataPointIndex].x</code> (x is the variable <code>gdpPercap</code>), or <code>w.config.series[seriesIndex].data[dataPointIndex].label</code> (the country), its possible to use custom aesthetics to include more data in the chart configuration script.</p>
2020-03-20 10:17:30 +01:00
<div class="sourceCode" id="cb27"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb27-1" title="1">scatter &lt;-<span class="st"> </span>scatter <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb27-2" title="2"><span class="st"> </span><span class="kw"><a href="../../reference/ax_tooltip.html">ax_tooltip</a></span>(<span class="dt">custom =</span> <span class="kw"><a href="../../reference/apexcharter-exports.html">JS</a></span>(<span class="kw"><a href="https://rdrr.io/r/base/paste.html">paste</a></span>(</a>
<a class="sourceLine" id="cb27-3" title="3"> <span class="st">"function({ series, seriesIndex, dataPointIndex, w }) {"</span>,</a>
<a class="sourceLine" id="cb27-4" title="4"> <span class="st">"console.log(w); return ("</span>,</a>
<a class="sourceLine" id="cb27-5" title="5"> <span class="st">"'&lt;div&gt;' +"</span>,</a>
<a class="sourceLine" id="cb27-6" title="6"> </a>
<a class="sourceLine" id="cb27-7" title="7"> <span class="st">"'&lt;div class = </span><span class="ch">\"</span><span class="st">apexcharts-tooltip-title</span><span class="ch">\"</span><span class="st">&gt;' +"</span>,</a>
<a class="sourceLine" id="cb27-8" title="8"> <span class="st">"w.config.series[seriesIndex].data[dataPointIndex].label"</span>,</a>
<a class="sourceLine" id="cb27-9" title="9"> <span class="st">"+ '&lt;/div&gt;' +"</span>,</a>
<a class="sourceLine" id="cb27-10" title="10"> <span class="st">"'&lt;div style = </span><span class="ch">\"</span><span class="st">padding: 5px;</span><span class="ch">\"</span><span class="st">&gt;' +"</span>,</a>
<a class="sourceLine" id="cb27-11" title="11"> <span class="st">"'&lt;div class = </span><span class="ch">\"</span><span class="st">apexcharts-tooltip-y-group</span><span class="ch">\"</span><span class="st">&gt;' +"</span>,</a>
<a class="sourceLine" id="cb27-12" title="12"> </a>
<a class="sourceLine" id="cb27-13" title="13"> <span class="st">"'&lt;span class = </span><span class="ch">\"</span><span class="st">apexcharts-tooltip-text-label</span><span class="ch">\"</span><span class="st">&gt;' +"</span>,</a>
<a class="sourceLine" id="cb27-14" title="14"> <span class="st">"'Population: ' +"</span>, </a>
<a class="sourceLine" id="cb27-15" title="15"> <span class="st">"'&lt;/span&gt;' +"</span>,</a>
<a class="sourceLine" id="cb27-16" title="16"> <span class="st">"'&lt;span class = </span><span class="ch">\"</span><span class="st">apexcharts-tooltip-text-value</span><span class="ch">\"</span><span class="st">&gt;' +"</span>,</a>
<a class="sourceLine" id="cb27-17" title="17"> <span class="st">"Math.round(Math.pow(w.config.series[seriesIndex].data[dataPointIndex].z * 1500, 2) * Math.PI).</span></a>
<a class="sourceLine" id="cb27-18" title="18"><span class="st"> toString().replace(/</span><span class="ch">\\</span><span class="st">B(?=(</span><span class="ch">\\</span><span class="st">d{3})+(?!</span><span class="ch">\\</span><span class="st">d))/g, </span><span class="ch">\"</span><span class="st">,</span><span class="ch">\"</span><span class="st">) +"</span>,</a>
<a class="sourceLine" id="cb27-19" title="19"> <span class="st">"'&lt;/span&gt;' +"</span>,</a>
<a class="sourceLine" id="cb27-20" title="20"> </a>
<a class="sourceLine" id="cb27-21" title="21"> <span class="st">"'&lt;/br&gt;' +"</span>,</a>
<a class="sourceLine" id="cb27-22" title="22"> </a>
<a class="sourceLine" id="cb27-23" title="23"> <span class="st">"'&lt;span class = </span><span class="ch">\"</span><span class="st">apexcharts-tooltip-text-label</span><span class="ch">\"</span><span class="st">&gt;' +"</span>,</a>
<a class="sourceLine" id="cb27-24" title="24"> <span class="st">"'GDP per capita: ' +"</span>, </a>
<a class="sourceLine" id="cb27-25" title="25"> <span class="st">"'&lt;/span&gt;' +"</span>,</a>
<a class="sourceLine" id="cb27-26" title="26"> <span class="st">"'&lt;span class = </span><span class="ch">\"</span><span class="st">apexcharts-tooltip-text-value</span><span class="ch">\"</span><span class="st">&gt;' +"</span>,</a>
<a class="sourceLine" id="cb27-27" title="27"> <span class="st">"Math.round(Math.exp(w.config.series[seriesIndex].data[dataPointIndex].x)) +"</span>,</a>
<a class="sourceLine" id="cb27-28" title="28"> <span class="st">"'&lt;/span&gt;' +"</span>,</a>
<a class="sourceLine" id="cb27-29" title="29"> </a>
<a class="sourceLine" id="cb27-30" title="30"> <span class="st">"'&lt;/br&gt;' +"</span>,</a>
<a class="sourceLine" id="cb27-31" title="31"> </a>
<a class="sourceLine" id="cb27-32" title="32"> <span class="st">"'&lt;span class = </span><span class="ch">\"</span><span class="st">apexcharts-tooltip-text-label</span><span class="ch">\"</span><span class="st">&gt;' +"</span>,</a>
<a class="sourceLine" id="cb27-33" title="33"> <span class="st">"'Life expectancy: ' +"</span>, </a>
<a class="sourceLine" id="cb27-34" title="34"> <span class="st">"'&lt;/span&gt;' +"</span>,</a>
<a class="sourceLine" id="cb27-35" title="35"> <span class="st">"'&lt;span class = </span><span class="ch">\"</span><span class="st">apexcharts-tooltip-text-value</span><span class="ch">\"</span><span class="st">&gt;' +"</span>,</a>
<a class="sourceLine" id="cb27-36" title="36"> <span class="st">"w.config.series[seriesIndex].data[dataPointIndex].y +"</span>,</a>
<a class="sourceLine" id="cb27-37" title="37"> <span class="st">"'&lt;/span&gt;' +"</span>,</a>
<a class="sourceLine" id="cb27-38" title="38"> </a>
<a class="sourceLine" id="cb27-39" title="39"> </a>
<a class="sourceLine" id="cb27-40" title="40"> <span class="st">"'&lt;/div&gt;' +"</span>,</a>
<a class="sourceLine" id="cb27-41" title="41"> <span class="st">"'&lt;/div&gt;' +"</span>,</a>
<a class="sourceLine" id="cb27-42" title="42"> </a>
<a class="sourceLine" id="cb27-43" title="43"> <span class="st">"'&lt;/div&gt;'"</span>,</a>
<a class="sourceLine" id="cb27-44" title="44"> <span class="st">");"</span>,</a>
<a class="sourceLine" id="cb27-45" title="45"> <span class="st">"}"</span>, <span class="dt">sep =</span> <span class="st">"</span><span class="ch">\n</span><span class="st">"</span></a>
<a class="sourceLine" id="cb27-46" title="46"> )))</a></code></pre></div>
2019-09-06 13:03:56 +02:00
<p>Add title and subtitle and format them :</p>
2020-03-20 10:17:30 +01:00
<div class="sourceCode" id="cb28"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb28-1" title="1">scatter &lt;-<span class="st"> </span>scatter <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb28-2" title="2"><span class="st"> </span><span class="kw"><a href="../../reference/ax_labs.html">ax_labs</a></span>(</a>
<a class="sourceLine" id="cb28-3" title="3"> <span class="dt">title =</span> <span class="st">"Life expectancy, GDP and population"</span>,</a>
<a class="sourceLine" id="cb28-4" title="4"> <span class="dt">subtitle =</span> <span class="st">"gapminder dataset from {gapminder}"</span></a>
<a class="sourceLine" id="cb28-5" title="5"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb28-6" title="6"><span class="st"> </span><span class="kw"><a href="../../reference/ax_title.html">ax_title</a></span>(</a>
<a class="sourceLine" id="cb28-7" title="7"> <span class="dt">style =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">fontSize =</span> <span class="st">"22px"</span>)</a>
<a class="sourceLine" id="cb28-8" title="8"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb28-9" title="9"><span class="st"> </span><span class="kw"><a href="../../reference/ax_subtitle.html">ax_subtitle</a></span>(</a>
<a class="sourceLine" id="cb28-10" title="10"> <span class="dt">style =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">fontSize =</span> <span class="st">"16px"</span>, <span class="dt">color =</span> <span class="st">"#BDBDBD"</span>)</a>
<a class="sourceLine" id="cb28-11" title="11"> )</a></code></pre></div>
2019-09-06 13:03:56 +02:00
<p>Final result looks like :</p>
2020-03-20 10:17:30 +01:00
<div class="sourceCode" id="cb29"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb29-1" title="1">scatter</a></code></pre></div>
<div id="htmlwidget-4035d91b7253f9ca616b" style="width:100%;height:500px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-4035d91b7253f9ca616b">{"x":{"ax_opts":{"chart":{"type":"bubble","zoom":{"enabled":true,"type":"xy"}},"series":[{"name":"Asia","data":[{"x":6.8820069561858,"y":43.828,"z":2.12402947882241,"label":"Afghanistan"},{"x":10.3021310576603,"y":75.635,"z":0.316611076512148,"label":"Bahrain"},{"x":7.23796062819251,"y":64.062,"z":4.61346790090975,"label":"Bangladesh"},{"x":7.44645596946729,"y":59.723,"z":1.41394799708641,"label":"Cambodia"},{"x":8.50898254693882,"y":72.961,"z":13.6585319887973,"label":"China"},{"x":10.5897354544633,"y":82.208,"z":0.993743572834219,"label":"Hong Kong, China"},{"x":7.80474510373349,"y":64.698,"z":12.5335129373569,"label":"India"},{"x":8.17206604681841,"y":70.65,"z":5.62364927493123,"label":"Indonesia"},{"x":9.35925288424117,"y":70.964,"z":3.1345925102357,"label":"Iran"},{"x":8.40538122225756,"y":59.545,"z":1.97241044205932,"label":"Iraq"},{"x":10.1473461422239,"y":80.745,"z":0.953514076346544,"label":"Israel"},{"x":10.3626851330503,"y":82.603,"z":4.24653142952633,"label":"Japan"},{"x":8.41614805576445,"y":72.535,"z":0.92539269139071,"label":"Jordan"},{"x":7.37341541389891,"y":67.297,"z":1.81563205188668,"label":"Korea, Dem. Rep."},{"x":10.0582725909726,"y":78.623,"z":2.63408778414488,"label":"Korea, Rep."},{"x":10.764413339038,"y":77.588,"z":0.595368867964044,"label":"Kuwait"},{"x":9.25541494473439,"y":71.993,"z":0.744813639293601,"label":"Lebanon"},{"x":9.42960888903361,"y":74.241,"z":1.8738979838941,"label":"Malaysia"},{"x":8.0377926761257,"y":66.803,"z":0.637656486500986,"label":"Mongolia"},{"x":6.8501261661455,"y":62.069,"z":2.5994110801156,"label":"Myanmar"},{"x":6.99517970049047,"y":63.785,"z":2.02206994992841,"label":"Nepal"},{"x":10.013067831606,"y":75.64,"z":0.673349966560488,"label":"Oman"},{"x":7.86555164236352,"y":65.483,"z":4.89355634512389,"label":"Pakistan"},{"x":8.06792697312615,"y":71.688,"z":3.58954041372049,"label":"Philippines"},{"x":9.98298389282434,"y":72.777,"z":1.97604355151449,"label":"Saudi Arabia"},{"x":10.7609446252124,"y":79.972,"z":0.802570253507449,"label":"Singapore"},{"x":8.2865454053824,"y":72.396,"z":1.69791963384164,"label":"Sri Lanka"},{"x":8.33915399358039,"y":74.143,"z":1.65302079293755,"label":"Syria"},{"x":10.2652890227549,"y":78.4,"z":1.81066063886205,"label":"Taiwan"},{"x":8.91709570051749,"y":70.616,"z":3.03401714654057,"label":"Thailand"},{"x":7.80039917688879,"y":74.249,"z":3.47306146307208,"label":"Vietnam"},{"x":8.01478199948213,"y":73.422,"z":0.753974594788234,"label":"West Bank and Gaza"},{"x":7.73226834301825,"y":62.698,"z":1.77265869200583,"label":"Yemen, Rep."}]},{"name":"Europe","data":[{"x":8.68896420747711,"y":76.423,"z":0.713701483295867,"label":"Albania"},{"x":10.4947817449763,"y":79.829,"z":1.0770478156025,"label":"Austria"},{"x":10.4250336584334,"y":79.441,"z":1.21251772500331,"label":"Belgium"},{"x":8.91547238295869,"y":74.852,"z":0.802498771827673,"label":"Bosnia and Herzegovina"},{"x":9.27620234384137,"y":73.005,"z":1.01782733670414,"label":"Bulgaria"},{"x":9.59009256636376,"y":75.748,"z":0.797291423454926,"label":"Croatia"},{"x":10.0359756484283,"y":76.486,"z":1.20294275072851,"label":"Czech Republic"},{"x":10.4710266888215,"y":78.332,"z":0.879534385617832,"label":"Denmark"},{"x":10.4105185176833,"y":79.313,"z":0.860866128805,"label":"Finland"},{"x":10.3244984200597,"y":80.657,"z":2.93966092902038,"label":"France"},{"x":10.3788012589592,"y":79.406,"z":3.41428708408202,"label":"Germany"},{"x":10.2233371046795,"y":79.483,"z":1.23070313260359,"label":"Greece"},{"x":9.79862382679109,"y":73.338,"z":1.18680291433442,"label":"Hungary"},{"x":10.4962835715914,"y":81.757,"z":0.206674862466907,"label":"Iceland"},{"x":10.6133934271775,"y":78.885,"z":0.762441311979532,"label":"Ireland"},{"x":10.2601026841861,"y":80.546,"z":2.86813902290321,"label":"Italy"},{"x":9.13279994301534,"y":74.543,"z":0.311239984739139,"label":"Montenegro"},{"x":10.5131969627974,"y":79.762,"z":1.53109836218254,"label":"Netherlands"},{"x":10.8068387317159,"y":80.196,"z":0.80914621624058,"label":"Norway"},{"x":9.641468332733
<div class="sourceCode" id="cb30"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb30-1" title="1"><span class="kw"><a href="https://rdrr.io/r/utils/data.html">data</a></span>(<span class="st">"gapminder"</span>, <span class="dt">package =</span> <span class="st">"gapminder"</span>)</a>
<a class="sourceLine" id="cb30-2" title="2"></a>
<a class="sourceLine" id="cb30-3" title="3">gapminder <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb30-4" title="4"><span class="st"> </span><span class="kw"><a href="https://rdrr.io/r/stats/filter.html">filter</a></span>(year <span class="op">==</span><span class="st"> </span><span class="dv">2007</span>) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb30-5" title="5"><span class="st"> </span><span class="kw">mutate</span>(</a>
<a class="sourceLine" id="cb30-6" title="6"> <span class="dt">gdpPercap =</span> <span class="kw"><a href="https://rdrr.io/r/base/Log.html">log</a></span>(gdpPercap),</a>
<a class="sourceLine" id="cb30-7" title="7"> <span class="dt">pop =</span> <span class="kw"><a href="https://rdrr.io/r/base/MathFun.html">sqrt</a></span>(pop <span class="op">/</span><span class="st"> </span>pi) <span class="op">/</span><span class="st"> </span><span class="dv">1500</span></a>
<a class="sourceLine" id="cb30-8" title="8"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb30-9" title="9"><span class="st"> </span><span class="kw"><a href="../../reference/apex.html">apex</a></span>(<span class="dt">mapping =</span> <span class="kw"><a href="../../reference/apexcharter-exports.html">aes</a></span>(gdpPercap, lifeExp, <span class="dt">z =</span> pop, <span class="dt">group =</span> continent, <span class="dt">label =</span> country), <span class="dt">type =</span> <span class="st">"scatter"</span>) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb30-10" title="10"><span class="st"> </span><span class="kw"><a href="../../reference/ax_chart.html">ax_chart</a></span>(<span class="dt">zoom =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
<a class="sourceLine" id="cb30-11" title="11"> <span class="dt">enabled =</span> <span class="ot">TRUE</span>, <span class="dt">type =</span> <span class="st">"xy"</span></a>
<a class="sourceLine" id="cb30-12" title="12"> )) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb30-13" title="13"><span class="st"> </span><span class="kw"><a href="../../reference/ax_yaxis.html">ax_yaxis</a></span>(</a>
<a class="sourceLine" id="cb30-14" title="14"> <span class="dt">decimalsInFloat =</span> <span class="dv">0</span>, </a>
<a class="sourceLine" id="cb30-15" title="15"> <span class="dt">axisBorder =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">show =</span> <span class="ot">TRUE</span>),</a>
<a class="sourceLine" id="cb30-16" title="16"> <span class="dt">axisTicks =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">show =</span> <span class="ot">TRUE</span>),</a>
<a class="sourceLine" id="cb30-17" title="17"> <span class="dt">title =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">text =</span> <span class="st">"life expectancy at birth (in years)"</span>)</a>
<a class="sourceLine" id="cb30-18" title="18"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb30-19" title="19"><span class="st"> </span><span class="kw"><a href="../../reference/ax_xaxis.html">ax_xaxis</a></span>(</a>
<a class="sourceLine" id="cb30-20" title="20"> <span class="dt">tickAmount =</span> <span class="dv">8</span>, </a>
<a class="sourceLine" id="cb30-21" title="21"> <span class="dt">labels =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
<a class="sourceLine" id="cb30-22" title="22"> <span class="dt">formatter =</span> <span class="kw"><a href="../../reference/apexcharter-exports.html">JS</a></span>(<span class="st">"function(val) {return val.toFixed(2);}"</span>)</a>
<a class="sourceLine" id="cb30-23" title="23"> ),</a>
<a class="sourceLine" id="cb30-24" title="24"> <span class="dt">tooltip =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">enabled =</span> <span class="ot">FALSE</span>),</a>
<a class="sourceLine" id="cb30-25" title="25"> <span class="dt">title =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">text =</span> <span class="st">"GDP per capita (log-scale)"</span>)</a>
<a class="sourceLine" id="cb30-26" title="26"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb30-27" title="27"><span class="st"> </span><span class="kw"><a href="../../reference/ax_grid.html">ax_grid</a></span>(<span class="dt">xaxis =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">lines =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">show =</span> <span class="ot">TRUE</span>))) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb30-28" title="28"><span class="st"> </span><span class="kw"><a href="../../reference/ax_legend.html">ax_legend</a></span>(<span class="dt">position =</span> <span class="st">"right"</span>, <span class="dt">offsetY =</span> <span class="dv">70</span>) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb30-29" title="29"><span class="st"> </span><span class="kw"><a href="../../reference/ax_tooltip.html">ax_tooltip</a></span>(<span class="dt">custom =</span> <span class="kw"><a href="../../reference/apexcharter-exports.html">JS</a></span>(<span class="kw"><a href="https://rdrr.io/r/base/paste.html">paste</a></span>(</a>
<a class="sourceLine" id="cb30-30" title="30"> <span class="st">"function({ series, seriesIndex, dataPointIndex, w }) {"</span>,</a>
<a class="sourceLine" id="cb30-31" title="31"> <span class="st">"console.log(w); return ("</span>,</a>
<a class="sourceLine" id="cb30-32" title="32"> <span class="st">"'&lt;div&gt;' +"</span>,</a>
<a class="sourceLine" id="cb30-33" title="33"> </a>
<a class="sourceLine" id="cb30-34" title="34"> <span class="st">"'&lt;div class = </span><span class="ch">\"</span><span class="st">apexcharts-tooltip-title</span><span class="ch">\"</span><span class="st">&gt;' +"</span>,</a>
<a class="sourceLine" id="cb30-35" title="35"> <span class="st">"w.config.series[seriesIndex].data[dataPointIndex].label"</span>,</a>
<a class="sourceLine" id="cb30-36" title="36"> <span class="st">"+ '&lt;/div&gt;' +"</span>,</a>
<a class="sourceLine" id="cb30-37" title="37"> <span class="st">"'&lt;div style = </span><span class="ch">\"</span><span class="st">padding: 5px;</span><span class="ch">\"</span><span class="st">&gt;' +"</span>,</a>
<a class="sourceLine" id="cb30-38" title="38"> <span class="st">"'&lt;div class = </span><span class="ch">\"</span><span class="st">apexcharts-tooltip-y-group</span><span class="ch">\"</span><span class="st">&gt;' +"</span>,</a>
<a class="sourceLine" id="cb30-39" title="39"> </a>
<a class="sourceLine" id="cb30-40" title="40"> <span class="st">"'&lt;span class = </span><span class="ch">\"</span><span class="st">apexcharts-tooltip-text-label</span><span class="ch">\"</span><span class="st">&gt;' +"</span>,</a>
<a class="sourceLine" id="cb30-41" title="41"> <span class="st">"'Population: ' +"</span>, </a>
<a class="sourceLine" id="cb30-42" title="42"> <span class="st">"'&lt;/span&gt;' +"</span>,</a>
<a class="sourceLine" id="cb30-43" title="43"> <span class="st">"'&lt;span class = </span><span class="ch">\"</span><span class="st">apexcharts-tooltip-text-value</span><span class="ch">\"</span><span class="st">&gt;' +"</span>,</a>
<a class="sourceLine" id="cb30-44" title="44"> <span class="st">"Math.round(Math.pow(w.config.series[seriesIndex].data[dataPointIndex].z * 1500, 2) * Math.PI).</span></a>
<a class="sourceLine" id="cb30-45" title="45"><span class="st"> toString().replace(/</span><span class="ch">\\</span><span class="st">B(?=(</span><span class="ch">\\</span><span class="st">d{3})+(?!</span><span class="ch">\\</span><span class="st">d))/g, </span><span class="ch">\"</span><span class="st">,</span><span class="ch">\"</span><span class="st">) +"</span>,</a>
<a class="sourceLine" id="cb30-46" title="46"> <span class="st">"'&lt;/span&gt;' +"</span>,</a>
<a class="sourceLine" id="cb30-47" title="47"> </a>
<a class="sourceLine" id="cb30-48" title="48"> <span class="st">"'&lt;/br&gt;' +"</span>,</a>
<a class="sourceLine" id="cb30-49" title="49"> </a>
<a class="sourceLine" id="cb30-50" title="50"> <span class="st">"'&lt;span class = </span><span class="ch">\"</span><span class="st">apexcharts-tooltip-text-label</span><span class="ch">\"</span><span class="st">&gt;' +"</span>,</a>
<a class="sourceLine" id="cb30-51" title="51"> <span class="st">"'GDP per capita: ' +"</span>, </a>
<a class="sourceLine" id="cb30-52" title="52"> <span class="st">"'&lt;/span&gt;' +"</span>,</a>
<a class="sourceLine" id="cb30-53" title="53"> <span class="st">"'&lt;span class = </span><span class="ch">\"</span><span class="st">apexcharts-tooltip-text-value</span><span class="ch">\"</span><span class="st">&gt;' +"</span>,</a>
<a class="sourceLine" id="cb30-54" title="54"> <span class="st">"Math.round(Math.exp(w.config.series[seriesIndex].data[dataPointIndex].x)) +"</span>,</a>
<a class="sourceLine" id="cb30-55" title="55"> <span class="st">"'&lt;/span&gt;' +"</span>,</a>
<a class="sourceLine" id="cb30-56" title="56"> </a>
<a class="sourceLine" id="cb30-57" title="57"> <span class="st">"'&lt;/br&gt;' +"</span>,</a>
<a class="sourceLine" id="cb30-58" title="58"> </a>
<a class="sourceLine" id="cb30-59" title="59"> <span class="st">"'&lt;span class = </span><span class="ch">\"</span><span class="st">apexcharts-tooltip-text-label</span><span class="ch">\"</span><span class="st">&gt;' +"</span>,</a>
<a class="sourceLine" id="cb30-60" title="60"> <span class="st">"'Life expectancy: ' +"</span>, </a>
<a class="sourceLine" id="cb30-61" title="61"> <span class="st">"'&lt;/span&gt;' +"</span>,</a>
<a class="sourceLine" id="cb30-62" title="62"> <span class="st">"'&lt;span class = </span><span class="ch">\"</span><span class="st">apexcharts-tooltip-text-value</span><span class="ch">\"</span><span class="st">&gt;' +"</span>,</a>
<a class="sourceLine" id="cb30-63" title="63"> <span class="st">"w.config.series[seriesIndex].data[dataPointIndex].y +"</span>,</a>
<a class="sourceLine" id="cb30-64" title="64"> <span class="st">"'&lt;/span&gt;' +"</span>,</a>
<a class="sourceLine" id="cb30-65" title="65"> </a>
<a class="sourceLine" id="cb30-66" title="66"> </a>
<a class="sourceLine" id="cb30-67" title="67"> <span class="st">"'&lt;/div&gt;' +"</span>,</a>
<a class="sourceLine" id="cb30-68" title="68"> <span class="st">"'&lt;/div&gt;' +"</span>,</a>
<a class="sourceLine" id="cb30-69" title="69"> </a>
<a class="sourceLine" id="cb30-70" title="70"> <span class="st">"'&lt;/div&gt;'"</span>,</a>
<a class="sourceLine" id="cb30-71" title="71"> <span class="st">");"</span>,</a>
<a class="sourceLine" id="cb30-72" title="72"> <span class="st">"}"</span>, <span class="dt">sep =</span> <span class="st">"</span><span class="ch">\n</span><span class="st">"</span></a>
<a class="sourceLine" id="cb30-73" title="73"> ))) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb30-74" title="74"><span class="st"> </span><span class="kw"><a href="../../reference/ax_labs.html">ax_labs</a></span>(</a>
<a class="sourceLine" id="cb30-75" title="75"> <span class="dt">title =</span> <span class="st">"Life expectancy, GDP and population"</span>,</a>
<a class="sourceLine" id="cb30-76" title="76"> <span class="dt">subtitle =</span> <span class="st">"gapminder dataset from {gapminder}"</span></a>
<a class="sourceLine" id="cb30-77" title="77"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb30-78" title="78"><span class="st"> </span><span class="kw"><a href="../../reference/ax_title.html">ax_title</a></span>(</a>
<a class="sourceLine" id="cb30-79" title="79"> <span class="dt">style =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">fontSize =</span> <span class="st">"22px"</span>)</a>
<a class="sourceLine" id="cb30-80" title="80"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb30-81" title="81"><span class="st"> </span><span class="kw"><a href="../../reference/ax_subtitle.html">ax_subtitle</a></span>(</a>
<a class="sourceLine" id="cb30-82" title="82"> <span class="dt">style =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">fontSize =</span> <span class="st">"16px"</span>, <span class="dt">color =</span> <span class="st">"#BDBDBD"</span>)</a>
<a class="sourceLine" id="cb30-83" title="83"> )</a></code></pre></div>
2019-09-06 13:03:56 +02:00
</details><p><br><br></p>
</div>
<div id="heatmap" class="section level1">
<h1 class="hasAnchor">
<a href="#heatmap" class="anchor"></a>Heatmap</h1>
2019-11-28 11:40:30 +01:00
<p>This is an adaption of this fancy <a href="http://jkunst.com/highcharter/showcase.html">{highcharter} example</a>, based from this <a href="http://graphics.wsj.com/infectious-diseases-and-vaccines/">WSJ visualization</a>.</p>
2020-03-20 10:17:30 +01:00
<div class="sourceCode" id="cb31"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb31-1" title="1"><span class="kw"><a href="https://rdrr.io/r/utils/data.html">data</a></span>(<span class="st">"vaccines"</span>, <span class="dt">package =</span> <span class="st">"highcharter"</span>)</a>
<a class="sourceLine" id="cb31-2" title="2"></a>
<a class="sourceLine" id="cb31-3" title="3">heatmap &lt;-<span class="st"> </span><span class="kw"><a href="../../reference/apex.html">apex</a></span>(</a>
<a class="sourceLine" id="cb31-4" title="4"> vaccines, </a>
<a class="sourceLine" id="cb31-5" title="5"> <span class="kw"><a href="../../reference/apexcharter-exports.html">aes</a></span>(year, state, <span class="dt">fill =</span> count), </a>
<a class="sourceLine" id="cb31-6" title="6"> <span class="dt">type =</span> <span class="st">"heatmap"</span>, </a>
<a class="sourceLine" id="cb31-7" title="7"> <span class="dt">height =</span> <span class="st">"800px"</span></a>
<a class="sourceLine" id="cb31-8" title="8">)</a></code></pre></div>
2019-09-06 13:03:56 +02:00
<p>Remove the animations (little slow otherwise) :</p>
2020-03-20 10:17:30 +01:00
<div class="sourceCode" id="cb32"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb32-1" title="1">heatmap &lt;-<span class="st"> </span>heatmap <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb32-2" title="2"><span class="st"> </span><span class="kw"><a href="../../reference/ax_chart.html">ax_chart</a></span>(<span class="dt">animations =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">enabled =</span> <span class="ot">FALSE</span>))</a></code></pre></div>
2019-09-06 13:03:56 +02:00
<p>Remove values displayed in the heatmap :</p>
2020-03-20 10:17:30 +01:00
<div class="sourceCode" id="cb33"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb33-1" title="1">heatmap &lt;-<span class="st"> </span>heatmap <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb33-2" title="2"><span class="st"> </span><span class="kw"><a href="../../reference/ax_dataLabels.html">ax_dataLabels</a></span>(<span class="dt">enabled =</span> <span class="ot">FALSE</span>)</a></code></pre></div>
2019-09-06 13:03:56 +02:00
<p>Remove space between squared of the heatmap :</p>
2020-03-20 10:17:30 +01:00
<div class="sourceCode" id="cb34"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb34-1" title="1">heatmap &lt;-<span class="st"> </span>heatmap <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb34-2" title="2"><span class="st"> </span><span class="kw"><a href="../../reference/ax_stroke.html">ax_stroke</a></span>(<span class="dt">width =</span> <span class="dv">0</span>)</a></code></pre></div>
2019-09-06 13:03:56 +02:00
<p>Thats not possible to make a continuous scale in the legend (like with highcharter), so we use breakpoints :</p>
2020-03-20 10:17:30 +01:00
<div class="sourceCode" id="cb35"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb35-1" title="1">heatmap &lt;-<span class="st"> </span>heatmap <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb35-2" title="2"><span class="st"> </span><span class="kw"><a href="../../reference/ax_plotOptions.html">ax_plotOptions</a></span>(</a>
<a class="sourceLine" id="cb35-3" title="3"> <span class="dt">heatmap =</span> <span class="kw"><a href="../../reference/heatmap_opts.html">heatmap_opts</a></span>(</a>
<a class="sourceLine" id="cb35-4" title="4"> <span class="dt">radius =</span> <span class="dv">0</span>,</a>
<a class="sourceLine" id="cb35-5" title="5"> <span class="dt">enableShades =</span> <span class="ot">FALSE</span>,</a>
<a class="sourceLine" id="cb35-6" title="6"> <span class="dt">colorScale =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
<a class="sourceLine" id="cb35-7" title="7"> <span class="dt">ranges =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
<a class="sourceLine" id="cb35-8" title="8"> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
<a class="sourceLine" id="cb35-9" title="9"> <span class="dt">from =</span> <span class="dv">0</span>,</a>
<a class="sourceLine" id="cb35-10" title="10"> <span class="dt">to =</span> <span class="fl">0.001</span>,</a>
<a class="sourceLine" id="cb35-11" title="11"> <span class="dt">name =</span> <span class="st">"Missing"</span>,</a>
<a class="sourceLine" id="cb35-12" title="12"> <span class="dt">color =</span> <span class="st">"#FFF"</span></a>
<a class="sourceLine" id="cb35-13" title="13"> ),</a>
<a class="sourceLine" id="cb35-14" title="14"> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
<a class="sourceLine" id="cb35-15" title="15"> <span class="dt">from =</span> <span class="fl">0.001</span>,</a>
<a class="sourceLine" id="cb35-16" title="16"> <span class="dt">to =</span> <span class="dv">4</span>,</a>
<a class="sourceLine" id="cb35-17" title="17"> <span class="dt">name =</span> <span class="st">"low"</span>,</a>
<a class="sourceLine" id="cb35-18" title="18"> <span class="co"># color = "#000004"</span></a>
<a class="sourceLine" id="cb35-19" title="19"> <span class="dt">color =</span> <span class="st">"#FDE725"</span></a>
<a class="sourceLine" id="cb35-20" title="20"> ),</a>
<a class="sourceLine" id="cb35-21" title="21"> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
<a class="sourceLine" id="cb35-22" title="22"> <span class="dt">from =</span> <span class="dv">4</span>,</a>
<a class="sourceLine" id="cb35-23" title="23"> <span class="dt">to =</span> <span class="dv">70</span>,</a>
<a class="sourceLine" id="cb35-24" title="24"> <span class="dt">name =</span> <span class="st">"mid-low"</span>,</a>
<a class="sourceLine" id="cb35-25" title="25"> <span class="co"># color = "#781C6D",</span></a>
<a class="sourceLine" id="cb35-26" title="26"> <span class="dt">color =</span> <span class="st">"#35B779"</span></a>
<a class="sourceLine" id="cb35-27" title="27"> ),</a>
<a class="sourceLine" id="cb35-28" title="28"> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
<a class="sourceLine" id="cb35-29" title="29"> <span class="dt">from =</span> <span class="dv">70</span>,</a>
<a class="sourceLine" id="cb35-30" title="30"> <span class="dt">to =</span> <span class="dv">290</span>,</a>
<a class="sourceLine" id="cb35-31" title="31"> <span class="dt">name =</span> <span class="st">"mid-high"</span>,</a>
<a class="sourceLine" id="cb35-32" title="32"> <span class="co"># color = "#ED6925",</span></a>
<a class="sourceLine" id="cb35-33" title="33"> <span class="dt">color =</span> <span class="st">"#31688E"</span></a>
<a class="sourceLine" id="cb35-34" title="34"> ),</a>
<a class="sourceLine" id="cb35-35" title="35"> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
<a class="sourceLine" id="cb35-36" title="36"> <span class="dt">from =</span> <span class="dv">290</span>,</a>
<a class="sourceLine" id="cb35-37" title="37"> <span class="dt">to =</span> <span class="dv">3000</span>,</a>
<a class="sourceLine" id="cb35-38" title="38"> <span class="dt">name =</span> <span class="st">"high"</span>,</a>
<a class="sourceLine" id="cb35-39" title="39"> <span class="co"># color = "#FCFFA4",</span></a>
<a class="sourceLine" id="cb35-40" title="40"> <span class="dt">color =</span> <span class="st">"#440154"</span></a>
<a class="sourceLine" id="cb35-41" title="41"> )</a>
<a class="sourceLine" id="cb35-42" title="42"> )</a>
<a class="sourceLine" id="cb35-43" title="43"> )</a>
<a class="sourceLine" id="cb35-44" title="44"> )</a>
<a class="sourceLine" id="cb35-45" title="45"> )</a></code></pre></div>
2019-09-06 13:03:56 +02:00
<p>Missing values are colored by default, above we set them to be displayed in white, and now we hide the corresponding legend :</p>
2020-03-20 10:17:30 +01:00
<div class="sourceCode" id="cb36"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb36-1" title="1">heatmap &lt;-<span class="st"> </span>heatmap <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb36-2" title="2"><span class="st"> </span><span class="kw"><a href="../../reference/ax_legend.html">ax_legend</a></span>(</a>
<a class="sourceLine" id="cb36-3" title="3"> <span class="dt">formatter =</span> <span class="kw"><a href="../../reference/apexcharter-exports.html">JS</a></span>(</a>
<a class="sourceLine" id="cb36-4" title="4"> <span class="st">"function(seriesName, opts) {</span></a>
<a class="sourceLine" id="cb36-5" title="5"><span class="st"> if (seriesName == 'Missing') return null; else return seriesName;</span></a>
<a class="sourceLine" id="cb36-6" title="6"><span class="st"> }"</span></a>
<a class="sourceLine" id="cb36-7" title="7"> ),</a>
<a class="sourceLine" id="cb36-8" title="8"> <span class="dt">offsetY =</span> <span class="dv">-15</span></a>
<a class="sourceLine" id="cb36-9" title="9"> )</a></code></pre></div>
2019-09-06 13:03:56 +02:00
<p>Set size of the y-axis labels :</p>
2020-03-20 10:17:30 +01:00
<div class="sourceCode" id="cb37"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb37-1" title="1">heatmap &lt;-<span class="st"> </span>heatmap <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb37-2" title="2"><span class="st"> </span><span class="kw"><a href="../../reference/ax_yaxis.html">ax_yaxis</a></span>(</a>
<a class="sourceLine" id="cb37-3" title="3"> <span class="dt">labels =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
<a class="sourceLine" id="cb37-4" title="4"> <span class="dt">style =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">fontSize =</span> <span class="st">"8px"</span>)</a>
<a class="sourceLine" id="cb37-5" title="5"> )</a>
<a class="sourceLine" id="cb37-6" title="6"> )</a></code></pre></div>
2019-11-28 11:40:30 +01:00
<p>Add a vertical line to identify the year when the vaccine was introduced :</p>
2020-03-20 10:17:30 +01:00
<div class="sourceCode" id="cb38"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb38-1" title="1">heatmap &lt;-<span class="st"> </span>heatmap <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb38-2" title="2"><span class="st"> </span><span class="kw"><a href="../../reference/ax_annotations.html">ax_annotations</a></span>(</a>
<a class="sourceLine" id="cb38-3" title="3"> <span class="dt">xaxis =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
<a class="sourceLine" id="cb38-4" title="4"> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
<a class="sourceLine" id="cb38-5" title="5"> <span class="dt">x =</span> <span class="dv">1963</span>, <span class="dt">x2 =</span> <span class="fl">1963.1</span>,</a>
<a class="sourceLine" id="cb38-6" title="6"> <span class="dt">strokeDashArray =</span> <span class="dv">0</span>, </a>
<a class="sourceLine" id="cb38-7" title="7"> <span class="dt">opacity =</span> <span class="dv">1</span>, </a>
<a class="sourceLine" id="cb38-8" title="8"> <span class="dt">borderColor =</span> <span class="st">"firebrick"</span>,</a>
<a class="sourceLine" id="cb38-9" title="9"> <span class="dt">fillColor =</span> <span class="st">"firebrick"</span>,</a>
<a class="sourceLine" id="cb38-10" title="10"> <span class="dt">label =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
<a class="sourceLine" id="cb38-11" title="11"> <span class="dt">borderColor =</span> <span class="st">"firebrick"</span>,</a>
<a class="sourceLine" id="cb38-12" title="12"> <span class="dt">style =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">color =</span> <span class="st">"#FFF"</span>, <span class="dt">background =</span> <span class="st">"firebrick"</span>),</a>
<a class="sourceLine" id="cb38-13" title="13"> <span class="dt">text =</span> <span class="st">"Vaccine Introduced"</span>, </a>
<a class="sourceLine" id="cb38-14" title="14"> <span class="dt">orientation =</span> <span class="st">"horizontal"</span>,</a>
<a class="sourceLine" id="cb38-15" title="15"> <span class="dt">position =</span> <span class="st">"bottom"</span>,</a>
<a class="sourceLine" id="cb38-16" title="16"> <span class="dt">offsetY =</span> <span class="dv">0</span></a>
<a class="sourceLine" id="cb38-17" title="17"> )</a>
<a class="sourceLine" id="cb38-18" title="18"> )</a>
<a class="sourceLine" id="cb38-19" title="19"> )</a>
<a class="sourceLine" id="cb38-20" title="20"> )</a></code></pre></div>
2019-09-06 13:03:56 +02:00
<p>As usual, add title and subtitle and format them :</p>
2020-03-20 10:17:30 +01:00
<div class="sourceCode" id="cb39"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb39-1" title="1">heatmap &lt;-<span class="st"> </span>heatmap <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb39-2" title="2"><span class="st"> </span><span class="kw"><a href="../../reference/ax_labs.html">ax_labs</a></span>(</a>
<a class="sourceLine" id="cb39-3" title="3"> <span class="dt">title =</span> <span class="st">"Infectious Diseases and Vaccines"</span>,</a>
<a class="sourceLine" id="cb39-4" title="4"> <span class="dt">subtitle =</span> <span class="st">"vaccines dataset from {highcharter}"</span></a>
<a class="sourceLine" id="cb39-5" title="5"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb39-6" title="6"><span class="st"> </span><span class="kw"><a href="../../reference/ax_title.html">ax_title</a></span>(</a>
<a class="sourceLine" id="cb39-7" title="7"> <span class="dt">style =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">fontSize =</span> <span class="st">"22px"</span>)</a>
<a class="sourceLine" id="cb39-8" title="8"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb39-9" title="9"><span class="st"> </span><span class="kw"><a href="../../reference/ax_subtitle.html">ax_subtitle</a></span>(</a>
<a class="sourceLine" id="cb39-10" title="10"> <span class="dt">style =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">fontSize =</span> <span class="st">"16px"</span>, <span class="dt">color =</span> <span class="st">"#BDBDBD"</span>)</a>
<a class="sourceLine" id="cb39-11" title="11"> )</a></code></pre></div>
2019-09-06 13:03:56 +02:00
<p>Final result looks like :</p>
2020-03-20 10:17:30 +01:00
<div class="sourceCode" id="cb40"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb40-1" title="1">heatmap</a></code></pre></div>
<div id="htmlwidget-174c5246eeb6d2775b92" style="width:100%;height:800px;" class="apexcharter html-widget"></div>
<script type="application/json" data-for="htmlwidget-174c5246eeb6d2775b92">{"x":{"ax_opts":{"chart":{"type":"heatmap","animations":{"enabled":false}},"series":[{"name":"Alabama","data":[{"x":1928,"y":334.99},{"x":1929,"y":111.93},{"x":1930,"y":157},{"x":1931,"y":337.29},{"x":1932,"y":10.21},{"x":1933,"y":65.22},{"x":1934,"y":590.27},{"x":1935,"y":265.34},{"x":1936,"y":20.78},{"x":1937,"y":22.46},{"x":1938,"y":496.44},{"x":1939,"y":182.64},{"x":1940,"y":115.12},{"x":1941,"y":297.47},{"x":1942,"y":126.15},{"x":1943,"y":130.82},{"x":1944,"y":252.87},{"x":1945,"y":27.33},{"x":1946,"y":126.75},{"x":1947,"y":127.26},{"x":1948,"y":69.09},{"x":1949,"y":368.8},{"x":1950,"y":50.9},{"x":1951,"y":103.24},{"x":1952,"y":351.72},{"x":1953,"y":93.99},{"x":1954,"y":280.39},{"x":1955,"y":69.68},{"x":1956,"y":231.75},{"x":1957,"y":299.79},{"x":1958,"y":242.34},{"x":1959,"y":108.19},{"x":1960,"y":63.33},{"x":1961,"y":78.01},{"x":1962,"y":71.58},{"x":1963,"y":34.74},{"x":1964,"y":533.68},{"x":1965,"y":68.2},{"x":1966,"y":52.38},{"x":1967,"y":38.98},{"x":1968,"y":4.65},{"x":1969,"y":0.36},{"x":1970,"y":13.94},{"x":1971,"y":55.24},{"x":1972,"y":4.02},{"x":1973,"y":0.42},{"x":1974,"y":0.58},{"x":1975,"y":0.13},{"x":1976,"y":null},{"x":1977,"y":2.06},{"x":1978,"y":3.43},{"x":1979,"y":3.35},{"x":1980,"y":0.57},{"x":1981,"y":null},{"x":1982,"y":0.05},{"x":1983,"y":0.03},{"x":1984,"y":null},{"x":1985,"y":null},{"x":1986,"y":0.02},{"x":1987,"y":0.09},{"x":1988,"y":0.02},{"x":1989,"y":1.46},{"x":1990,"y":0.65},{"x":1991,"y":0.02},{"x":1992,"y":null},{"x":1993,"y":0.02},{"x":1994,"y":null},{"x":1995,"y":null},{"x":1996,"y":null},{"x":1997,"y":0.14},{"x":1998,"y":null},{"x":1999,"y":null},{"x":2000,"y":null},{"x":2001,"y":null},{"x":2002,"y":0.16},{"x":2003,"y":null}]},{"name":"Alaska","data":[{"x":1928,"y":null},{"x":1929,"y":null},{"x":1930,"y":null},{"x":1931,"y":null},{"x":1932,"y":null},{"x":1933,"y":null},{"x":1934,"y":null},{"x":1935,"y":null},{"x":1936,"y":null},{"x":1937,"y":null},{"x":1938,"y":null},{"x":1939,"y":null},{"x":1940,"y":null},{"x":1941,"y":null},{"x":1942,"y":null},{"x":1943,"y":null},{"x":1944,"y":null},{"x":1945,"y":null},{"x":1946,"y":null},{"x":1947,"y":null},{"x":1948,"y":null},{"x":1949,"y":null},{"x":1950,"y":null},{"x":1951,"y":null},{"x":1952,"y":null},{"x":1953,"y":null},{"x":1954,"y":691.67},{"x":1955,"y":241.87},{"x":1956,"y":1120.98},{"x":1957,"y":414.7},{"x":1958,"y":562.06},{"x":1959,"y":816.55},{"x":1960,"y":635.79},{"x":1961,"y":420.96},{"x":1962,"y":571.54},{"x":1963,"y":722.27},{"x":1964,"y":439.89},{"x":1965,"y":79.38},{"x":1966,"y":236.57},{"x":1967,"y":53.27},{"x":1968,"y":3.86},{"x":1969,"y":6.77},{"x":1970,"y":33.61},{"x":1971,"y":19.42},{"x":1972,"y":3.94},{"x":1973,"y":1.47},{"x":1974,"y":0.27},{"x":1975,"y":null},{"x":1976,"y":2.73},{"x":1977,"y":15.07},{"x":1978,"y":0.5},{"x":1979,"y":4.48},{"x":1980,"y":1.44},{"x":1981,"y":null},{"x":1982,"y":0.2},{"x":1983,"y":null},{"x":1984,"y":null},{"x":1985,"y":null},{"x":1986,"y":null},{"x":1987,"y":null},{"x":1988,"y":0.18},{"x":1989,"y":null},{"x":1990,"y":4.86},{"x":1991,"y":0.18},{"x":1992,"y":0.68},{"x":1993,"y":null},{"x":1994,"y":2.67},{"x":1995,"y":null},{"x":1996,"y":11.16},{"x":1997,"y":0.16},{"x":1998,"y":2.58},{"x":1999,"y":null},{"x":2000,"y":0.16},{"x":2001,"y":null},{"x":2002,"y":null},{"x":2003,"y":null}]},{"name":"Arizona","data":[{"x":1928,"y":200.75},{"x":1929,"y":54.88},{"x":1930,"y":466.31},{"x":1931,"y":497.69},{"x":1932,"y":20.11},{"x":1933,"y":296.01},{"x":1934,"y":238.81},{"x":1935,"y":135.02},{"x":1936,"y":525.5},{"x":1937,"y":837.3},{"x":1938,"y":149.34},{"x":1939,"y":144.02},{"x":1940,"y":339.06},{"x":1941,"y":615.29},{"x":1942,"y":740.83},{"x":1943,"y":172.44},{"x":1944,"y":736.71},{"x":1945,"y":93.74},{"x":1946,"y":498.69},{"x":1947,"y":224.49},{"x":1948,"y":623.38},{"x":1949,"y":531.46},{"x":1950,"y":315.95},{"x":1951,"y":1351.49},{"x":1952,"y":424.59},{"x":1953,"y":557.91},{"x":1954,"y":531.51},{"x":1955,"y":1024.03},{"x":1956,"y":644.32},{"x":1957,"y":700.97},{"x":1958,"y":825.18},{"x":1959,"y":719.02},{"x":1960,"y":325.91},{"x
<div class="sourceCode" id="cb41"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb41-1" title="1"><span class="kw"><a href="https://rdrr.io/r/utils/data.html">data</a></span>(<span class="st">"vaccines"</span>, <span class="dt">package =</span> <span class="st">"highcharter"</span>)</a>
<a class="sourceLine" id="cb41-2" title="2"></a>
<a class="sourceLine" id="cb41-3" title="3"><span class="kw"><a href="../../reference/apex.html">apex</a></span>(vaccines, <span class="kw"><a href="../../reference/apexcharter-exports.html">aes</a></span>(year, state, <span class="dt">fill =</span> count), <span class="dt">type =</span> <span class="st">"heatmap"</span>) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb41-4" title="4"><span class="st"> </span><span class="kw"><a href="../../reference/ax_chart.html">ax_chart</a></span>(<span class="dt">animations =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">enabled =</span> <span class="ot">FALSE</span>)) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb41-5" title="5"><span class="st"> </span><span class="kw"><a href="../../reference/ax_dataLabels.html">ax_dataLabels</a></span>(<span class="dt">enabled =</span> <span class="ot">FALSE</span>) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb41-6" title="6"><span class="st"> </span><span class="kw"><a href="../../reference/ax_stroke.html">ax_stroke</a></span>(<span class="dt">width =</span> <span class="dv">0</span>) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb41-7" title="7"><span class="st"> </span><span class="kw"><a href="../../reference/ax_plotOptions.html">ax_plotOptions</a></span>(</a>
<a class="sourceLine" id="cb41-8" title="8"> <span class="dt">heatmap =</span> <span class="kw"><a href="../../reference/heatmap_opts.html">heatmap_opts</a></span>(</a>
<a class="sourceLine" id="cb41-9" title="9"> <span class="dt">radius =</span> <span class="dv">0</span>,</a>
<a class="sourceLine" id="cb41-10" title="10"> <span class="dt">enableShades =</span> <span class="ot">FALSE</span>,</a>
<a class="sourceLine" id="cb41-11" title="11"> <span class="dt">colorScale =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
<a class="sourceLine" id="cb41-12" title="12"> <span class="dt">ranges =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
<a class="sourceLine" id="cb41-13" title="13"> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
<a class="sourceLine" id="cb41-14" title="14"> <span class="dt">from =</span> <span class="dv">0</span>,</a>
<a class="sourceLine" id="cb41-15" title="15"> <span class="dt">to =</span> <span class="fl">0.001</span>,</a>
<a class="sourceLine" id="cb41-16" title="16"> <span class="dt">name =</span> <span class="st">"Missing"</span>,</a>
<a class="sourceLine" id="cb41-17" title="17"> <span class="dt">color =</span> <span class="st">"#FFF"</span></a>
<a class="sourceLine" id="cb41-18" title="18"> ),</a>
<a class="sourceLine" id="cb41-19" title="19"> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
<a class="sourceLine" id="cb41-20" title="20"> <span class="dt">from =</span> <span class="fl">0.001</span>,</a>
<a class="sourceLine" id="cb41-21" title="21"> <span class="dt">to =</span> <span class="dv">4</span>,</a>
<a class="sourceLine" id="cb41-22" title="22"> <span class="dt">name =</span> <span class="st">"low"</span>,</a>
<a class="sourceLine" id="cb41-23" title="23"> <span class="co"># color = "#000004"</span></a>
<a class="sourceLine" id="cb41-24" title="24"> <span class="dt">color =</span> <span class="st">"#FDE725"</span></a>
<a class="sourceLine" id="cb41-25" title="25"> ),</a>
<a class="sourceLine" id="cb41-26" title="26"> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
<a class="sourceLine" id="cb41-27" title="27"> <span class="dt">from =</span> <span class="dv">4</span>,</a>
<a class="sourceLine" id="cb41-28" title="28"> <span class="dt">to =</span> <span class="dv">70</span>,</a>
<a class="sourceLine" id="cb41-29" title="29"> <span class="dt">name =</span> <span class="st">"mid-low"</span>,</a>
<a class="sourceLine" id="cb41-30" title="30"> <span class="co"># color = "#781C6D",</span></a>
<a class="sourceLine" id="cb41-31" title="31"> <span class="dt">color =</span> <span class="st">"#35B779"</span></a>
<a class="sourceLine" id="cb41-32" title="32"> ),</a>
<a class="sourceLine" id="cb41-33" title="33"> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
<a class="sourceLine" id="cb41-34" title="34"> <span class="dt">from =</span> <span class="dv">70</span>,</a>
<a class="sourceLine" id="cb41-35" title="35"> <span class="dt">to =</span> <span class="dv">290</span>,</a>
<a class="sourceLine" id="cb41-36" title="36"> <span class="dt">name =</span> <span class="st">"mid-high"</span>,</a>
<a class="sourceLine" id="cb41-37" title="37"> <span class="co"># color = "#ED6925",</span></a>
<a class="sourceLine" id="cb41-38" title="38"> <span class="dt">color =</span> <span class="st">"#31688E"</span></a>
<a class="sourceLine" id="cb41-39" title="39"> ),</a>
<a class="sourceLine" id="cb41-40" title="40"> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
<a class="sourceLine" id="cb41-41" title="41"> <span class="dt">from =</span> <span class="dv">290</span>,</a>
<a class="sourceLine" id="cb41-42" title="42"> <span class="dt">to =</span> <span class="dv">3000</span>,</a>
<a class="sourceLine" id="cb41-43" title="43"> <span class="dt">name =</span> <span class="st">"high"</span>,</a>
<a class="sourceLine" id="cb41-44" title="44"> <span class="co"># color = "#FCFFA4",</span></a>
<a class="sourceLine" id="cb41-45" title="45"> <span class="dt">color =</span> <span class="st">"#440154"</span></a>
<a class="sourceLine" id="cb41-46" title="46"> )</a>
<a class="sourceLine" id="cb41-47" title="47"> )</a>
<a class="sourceLine" id="cb41-48" title="48"> )</a>
<a class="sourceLine" id="cb41-49" title="49"> )</a>
<a class="sourceLine" id="cb41-50" title="50"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb41-51" title="51"><span class="st"> </span><span class="kw"><a href="../../reference/ax_legend.html">ax_legend</a></span>(</a>
<a class="sourceLine" id="cb41-52" title="52"> <span class="dt">formatter =</span> <span class="kw"><a href="../../reference/apexcharter-exports.html">JS</a></span>(</a>
<a class="sourceLine" id="cb41-53" title="53"> <span class="st">"function(seriesName, opts) {</span></a>
<a class="sourceLine" id="cb41-54" title="54"><span class="st"> if (seriesName == 'Missing') return null; else return seriesName;</span></a>
<a class="sourceLine" id="cb41-55" title="55"><span class="st"> }"</span></a>
<a class="sourceLine" id="cb41-56" title="56"> ),</a>
<a class="sourceLine" id="cb41-57" title="57"> <span class="dt">offsetY =</span> <span class="dv">-15</span></a>
<a class="sourceLine" id="cb41-58" title="58"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb41-59" title="59"><span class="st"> </span><span class="kw"><a href="../../reference/ax_yaxis.html">ax_yaxis</a></span>(</a>
<a class="sourceLine" id="cb41-60" title="60"> <span class="dt">labels =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
<a class="sourceLine" id="cb41-61" title="61"> <span class="dt">style =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">fontSize =</span> <span class="st">"8px"</span>),</a>
<a class="sourceLine" id="cb41-62" title="62"> <span class="dt">offsetY =</span> <span class="dv">-20</span></a>
<a class="sourceLine" id="cb41-63" title="63"> )</a>
<a class="sourceLine" id="cb41-64" title="64"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb41-65" title="65"><span class="st"> </span><span class="kw"><a href="../../reference/ax_annotations.html">ax_annotations</a></span>(</a>
<a class="sourceLine" id="cb41-66" title="66"> <span class="dt">xaxis =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
<a class="sourceLine" id="cb41-67" title="67"> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
<a class="sourceLine" id="cb41-68" title="68"> <span class="dt">x =</span> <span class="dv">1963</span>, <span class="dt">x2 =</span> <span class="fl">1963.1</span>,</a>
<a class="sourceLine" id="cb41-69" title="69"> <span class="dt">strokeDashArray =</span> <span class="dv">0</span>, </a>
<a class="sourceLine" id="cb41-70" title="70"> <span class="dt">opacity =</span> <span class="dv">1</span>, </a>
<a class="sourceLine" id="cb41-71" title="71"> <span class="dt">borderColor =</span> <span class="st">"firebrick"</span>,</a>
<a class="sourceLine" id="cb41-72" title="72"> <span class="dt">fillColor =</span> <span class="st">"firebrick"</span>,</a>
<a class="sourceLine" id="cb41-73" title="73"> <span class="dt">label =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(</a>
<a class="sourceLine" id="cb41-74" title="74"> <span class="dt">borderColor =</span> <span class="st">"firebrick"</span>,</a>
<a class="sourceLine" id="cb41-75" title="75"> <span class="dt">style =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">color =</span> <span class="st">"#FFF"</span>, <span class="dt">background =</span> <span class="st">"firebrick"</span>),</a>
<a class="sourceLine" id="cb41-76" title="76"> <span class="dt">text =</span> <span class="st">"Vaccine Introduced"</span>, </a>
<a class="sourceLine" id="cb41-77" title="77"> <span class="dt">orientation =</span> <span class="st">"horizontal"</span>,</a>
<a class="sourceLine" id="cb41-78" title="78"> <span class="dt">position =</span> <span class="st">"bottom"</span>,</a>
<a class="sourceLine" id="cb41-79" title="79"> <span class="dt">offsetY =</span> <span class="dv">0</span></a>
<a class="sourceLine" id="cb41-80" title="80"> )</a>
<a class="sourceLine" id="cb41-81" title="81"> )</a>
<a class="sourceLine" id="cb41-82" title="82"> )</a>
<a class="sourceLine" id="cb41-83" title="83"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb41-84" title="84"><span class="st"> </span><span class="kw"><a href="../../reference/ax_labs.html">ax_labs</a></span>(</a>
<a class="sourceLine" id="cb41-85" title="85"> <span class="dt">title =</span> <span class="st">"Infectious Diseases and Vaccines"</span>,</a>
<a class="sourceLine" id="cb41-86" title="86"> <span class="dt">subtitle =</span> <span class="st">"vaccines dataset from {highcharter}"</span></a>
<a class="sourceLine" id="cb41-87" title="87"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb41-88" title="88"><span class="st"> </span><span class="kw"><a href="../../reference/ax_title.html">ax_title</a></span>(</a>
<a class="sourceLine" id="cb41-89" title="89"> <span class="dt">style =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">fontSize =</span> <span class="st">"22px"</span>)</a>
<a class="sourceLine" id="cb41-90" title="90"> ) <span class="op">%&gt;%</span><span class="st"> </span></a>
<a class="sourceLine" id="cb41-91" title="91"><span class="st"> </span><span class="kw"><a href="../../reference/ax_subtitle.html">ax_subtitle</a></span>(</a>
<a class="sourceLine" id="cb41-92" title="92"> <span class="dt">style =</span> <span class="kw"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="dt">fontSize =</span> <span class="st">"16px"</span>, <span class="dt">color =</span> <span class="st">"#BDBDBD"</span>)</a>
<a class="sourceLine" id="cb41-93" title="93"> )</a></code></pre></div>
2019-09-06 13:03:56 +02:00
</details>
</div>
</div>
<div class="col-md-3 hidden-xs hidden-sm" id="sidebar">
<div id="tocnav">
<h2 class="hasAnchor">
<a href="#tocnav" class="anchor"></a>Contents</h2>
<ul class="nav nav-pills nav-stacked">
<li><a href="#bar-chart">Bar chart</a></li>
<li><a href="#lines">Lines</a></li>
<li><a href="#scatter-plot">Scatter plot</a></li>
<li><a href="#heatmap">Heatmap</a></li>
</ul>
</div>
</div>
</div>
2019-11-28 11:40:30 +01:00
2019-09-06 13:03:56 +02:00
<footer><div class="copyright">
<p>Developed by <a href="https://twitter.com/_pvictorr"><img src="https://pbs.twimg.com/profile_images/844237339404722177/E1U61aM8_normal.jpg"> Victor Perrier</a>, <a href="https://twitter.com/_mfaan"><img src="https://pbs.twimg.com/profile_images/912313931326218240/o1-wvA18_normal.jpg"> Fanny Meyer</a>.</p>
</div>
<div class="pkgdown">
2019-11-28 11:40:30 +01:00
<p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.4.1.</p>
2019-09-06 13:03:56 +02:00
</div>
2019-11-28 11:40:30 +01:00
2019-09-06 13:03:56 +02:00
</footer>
</div>
2019-11-28 11:40:30 +01:00
2020-02-25 15:57:21 +01:00
<div id="particles"></div>
<script>
window.onload = function() {
var config = {"particles":{"number":{"value":100,"density":{"enable":true,"value_area":800}},"color":{"value":"#112446"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.8,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":true,"distance":150,"color":"#112446","opacity":0.6,"width":1},"move":{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"repulse"},"onclick":{"enable":true,"mode":"push"},"resize":true}},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}},"retina_detect":true} ;
particlesJS("particles", config);
};
</script>
</body>
2019-09-06 13:03:56 +02:00
</html>