Deploying to gh-pages from @ gnoblet/visualizeR@6b508150a7 🚀
This commit is contained in:
parent
1373bba6df
commit
6d523013ae
35 changed files with 591 additions and 175 deletions
96
index.html
96
index.html
|
|
@ -38,12 +38,6 @@
|
|||
<div id="navbar" class="collapse navbar-collapse ms-3">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<li class="nav-item"><a class="nav-link" href="reference/index.html">Reference</a></li>
|
||||
<li class="nav-item dropdown">
|
||||
<button class="nav-link dropdown-toggle" type="button" id="dropdown-articles" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">Articles</button>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdown-articles">
|
||||
<li><a class="dropdown-item" href="articles/bar_charts.html">Bar charts</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="news/index.html">Changelog</a></li>
|
||||
</ul>
|
||||
<ul class="navbar-nav">
|
||||
|
|
@ -94,6 +88,7 @@
|
|||
<li><label><input type="checkbox">Alluvial</label></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><label><input type="checkbox">Option for tag with css code + for titles/subtitles/captions</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="section level2">
|
||||
|
|
@ -163,38 +158,22 @@
|
|||
<span></span>
|
||||
<span><span class="co"># Simple bar chart by group with some alpha transparency</span></span>
|
||||
<span><span class="fu"><a href="reference/bar.html">bar</a></span><span class="op">(</span><span class="va">df</span>, <span class="st">"island"</span>, <span class="st">"mean_bl"</span>, <span class="st">"species"</span>, x_title <span class="op">=</span> <span class="st">"Mean of bill length"</span>, title <span class="op">=</span> <span class="st">"Mean of bill length by island and species"</span><span class="op">)</span></span></code></pre></div>
|
||||
<div class="figure">
|
||||
<img src="reference/figures/README-example-bar-chart-1.png" alt="plot of chunk example-bar-chart" width="65%"><p class="caption">
|
||||
plot of chunk example-bar-chart
|
||||
</p>
|
||||
</div>
|
||||
<p><img src="reference/figures/README-example-bar-chart-1.png" width="65%"></p>
|
||||
<div class="sourceCode" id="cb4"><pre class="downlit sourceCode r">
|
||||
<code class="sourceCode R"><span></span>
|
||||
<span><span class="co"># Flipped / Horizontal</span></span>
|
||||
<span><span class="fu"><a href="reference/bar.html">hbar</a></span><span class="op">(</span><span class="va">df</span>, <span class="st">"island"</span>, <span class="st">"mean_bl"</span>, <span class="st">"species"</span>, x_title <span class="op">=</span> <span class="st">"Mean of bill length"</span>, title <span class="op">=</span> <span class="st">"Mean of bill length by island and species"</span><span class="op">)</span></span></code></pre></div>
|
||||
<div class="figure">
|
||||
<img src="reference/figures/README-example-bar-chart-2.png" alt="plot of chunk example-bar-chart" width="65%"><p class="caption">
|
||||
plot of chunk example-bar-chart
|
||||
</p>
|
||||
</div>
|
||||
<p><img src="reference/figures/README-example-bar-chart-2.png" width="65%"></p>
|
||||
<div class="sourceCode" id="cb5"><pre class="downlit sourceCode r">
|
||||
<code class="sourceCode R"><span></span>
|
||||
<span><span class="co"># Facetted</span></span>
|
||||
<span><span class="fu"><a href="reference/bar.html">bar</a></span><span class="op">(</span><span class="va">df</span>, <span class="st">"island"</span>, <span class="st">"mean_bl"</span>, facet <span class="op">=</span> <span class="st">"species"</span>, x_title <span class="op">=</span> <span class="st">"Mean of bill length"</span>, title <span class="op">=</span> <span class="st">"Mean of bill length by island and species"</span>, add_color_guide <span class="op">=</span> <span class="cn">FALSE</span><span class="op">)</span></span></code></pre></div>
|
||||
<div class="figure">
|
||||
<img src="reference/figures/README-example-bar-chart-3.png" alt="plot of chunk example-bar-chart" width="65%"><p class="caption">
|
||||
plot of chunk example-bar-chart
|
||||
</p>
|
||||
</div>
|
||||
<p><img src="reference/figures/README-example-bar-chart-3.png" width="65%"></p>
|
||||
<div class="sourceCode" id="cb6"><pre class="downlit sourceCode r">
|
||||
<code class="sourceCode R"><span></span>
|
||||
<span><span class="co"># Flipped, with text, smaller width, and caption</span></span>
|
||||
<span><span class="fu"><a href="reference/bar.html">hbar</a></span><span class="op">(</span>df <span class="op">=</span> <span class="va">df_island</span>, x <span class="op">=</span> <span class="st">"island"</span>, y <span class="op">=</span> <span class="st">"mean_bl"</span>, title <span class="op">=</span> <span class="st">"Mean of bill length by island"</span>, add_text <span class="op">=</span> <span class="cn">T</span>, width <span class="op">=</span> <span class="fl">0.6</span>, add_text_suffix <span class="op">=</span> <span class="st">"mm"</span>, add_text_expand_limit <span class="op">=</span> <span class="fl">1.3</span>, add_color_guide <span class="op">=</span> <span class="cn">FALSE</span>, caption <span class="op">=</span> <span class="st">"Data: palmerpenguins package."</span><span class="op">)</span></span></code></pre></div>
|
||||
<div class="figure">
|
||||
<img src="reference/figures/README-example-bar-chart-4.png" alt="plot of chunk example-bar-chart" width="65%"><p class="caption">
|
||||
plot of chunk example-bar-chart
|
||||
</p>
|
||||
</div>
|
||||
<p><img src="reference/figures/README-example-bar-chart-4.png" width="65%"></p>
|
||||
</div>
|
||||
<div class="section level3">
|
||||
<h3 id="example-2-scatterplot">Example 2: Scatterplot<a class="anchor" aria-label="anchor" href="#example-2-scatterplot"></a>
|
||||
|
|
@ -202,29 +181,17 @@ plot of chunk example-bar-chart
|
|||
<div class="sourceCode" id="cb7"><pre class="downlit sourceCode r">
|
||||
<code class="sourceCode R"><span><span class="co"># Simple scatterplot</span></span>
|
||||
<span><span class="fu"><a href="reference/point.html">point</a></span><span class="op">(</span><span class="va">penguins</span>, <span class="st">"bill_length_mm"</span>, <span class="st">"flipper_length_mm"</span><span class="op">)</span></span></code></pre></div>
|
||||
<div class="figure">
|
||||
<img src="reference/figures/README-example-point-chart-1.png" alt="plot of chunk example-point-chart" width="65%"><p class="caption">
|
||||
plot of chunk example-point-chart
|
||||
</p>
|
||||
</div>
|
||||
<p><img src="reference/figures/README-example-point-chart-1.png" width="65%"></p>
|
||||
<div class="sourceCode" id="cb8"><pre class="downlit sourceCode r">
|
||||
<code class="sourceCode R"><span></span>
|
||||
<span><span class="co"># Scatterplot with grouping colors, greater dot size, some transparency</span></span>
|
||||
<span><span class="fu"><a href="reference/point.html">point</a></span><span class="op">(</span><span class="va">penguins</span>, <span class="st">"bill_length_mm"</span>, <span class="st">"flipper_length_mm"</span>, <span class="st">"island"</span>, group_title <span class="op">=</span> <span class="st">"Island"</span>, alpha <span class="op">=</span> <span class="fl">0.6</span>, size <span class="op">=</span> <span class="fl">3</span>, title <span class="op">=</span> <span class="st">"Bill vs. flipper length"</span>, , add_color_guide <span class="op">=</span> <span class="cn">FALSE</span><span class="op">)</span></span></code></pre></div>
|
||||
<div class="figure">
|
||||
<img src="reference/figures/README-example-point-chart-2.png" alt="plot of chunk example-point-chart" width="65%"><p class="caption">
|
||||
plot of chunk example-point-chart
|
||||
</p>
|
||||
</div>
|
||||
<p><img src="reference/figures/README-example-point-chart-2.png" width="65%"></p>
|
||||
<div class="sourceCode" id="cb9"><pre class="downlit sourceCode r">
|
||||
<code class="sourceCode R"><span></span>
|
||||
<span><span class="co"># Facetted scatterplot by island</span></span>
|
||||
<span><span class="fu"><a href="reference/point.html">point</a></span><span class="op">(</span><span class="va">penguins</span>, <span class="st">"bill_length_mm"</span>, <span class="st">"flipper_length_mm"</span>, <span class="st">"species"</span>, <span class="st">"island"</span>, <span class="st">"fixed"</span>, group_title <span class="op">=</span> <span class="st">"Species"</span>, title <span class="op">=</span> <span class="st">"Bill vs. flipper length by species and island"</span>, add_color_guide <span class="op">=</span> <span class="cn">FALSE</span><span class="op">)</span></span></code></pre></div>
|
||||
<div class="figure">
|
||||
<img src="reference/figures/README-example-point-chart-3.png" alt="plot of chunk example-point-chart" width="65%"><p class="caption">
|
||||
plot of chunk example-point-chart
|
||||
</p>
|
||||
</div>
|
||||
<p><img src="reference/figures/README-example-point-chart-3.png" width="65%"></p>
|
||||
</div>
|
||||
<div class="section level3">
|
||||
<h3 id="example-3-dumbbell-plot">Example 3: Dumbbell plot<a class="anchor" aria-label="anchor" href="#example-3-dumbbell-plot"></a>
|
||||
|
|
@ -323,7 +290,7 @@ plot of chunk example-point-chart
|
|||
<span> <span class="fu">dplyr</span><span class="fu">::</span><span class="fu"><a href="https://dplyr.tidyverse.org/reference/mutate.html" class="external-link">mutate</a></span><span class="op">(</span>stat <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/Round.html" class="external-link">round</a></span><span class="op">(</span><span class="va">stat</span>, <span class="fl">0</span><span class="op">)</span><span class="op">)</span></span>
|
||||
<span></span>
|
||||
<span><span class="co"># Simple vertical lollipop chart</span></span>
|
||||
<span><span class="fu">lollipop</span><span class="op">(</span></span>
|
||||
<span><span class="fu"><a href="reference/lollipop.html">lollipop</a></span><span class="op">(</span></span>
|
||||
<span> df <span class="op">=</span> <span class="va">df</span>,</span>
|
||||
<span> x <span class="op">=</span> <span class="st">"admin1"</span>,</span>
|
||||
<span> y <span class="op">=</span> <span class="st">"stat"</span>,</span>
|
||||
|
|
@ -333,15 +300,11 @@ plot of chunk example-point-chart
|
|||
<span> x_title <span class="op">=</span> <span class="st">"Admin 1"</span>,</span>
|
||||
<span> title <span class="op">=</span> <span class="st">"% of HHs that received humanitarian assistance"</span></span>
|
||||
<span><span class="op">)</span></span></code></pre></div>
|
||||
<div class="figure">
|
||||
<img src="reference/figures/README-example-lollipop-chart-1.png" alt="plot of chunk example-lollipop-chart" width="65%"><p class="caption">
|
||||
plot of chunk example-lollipop-chart
|
||||
</p>
|
||||
</div>
|
||||
<p><img src="reference/figures/README-example-lollipop-chart-1.png" width="65%"></p>
|
||||
<div class="sourceCode" id="cb15"><pre class="downlit sourceCode r">
|
||||
<code class="sourceCode R"><span></span>
|
||||
<span><span class="co"># Horizontal lollipop chart with custom colors</span></span>
|
||||
<span><span class="fu">hlollipop</span><span class="op">(</span></span>
|
||||
<span><span class="fu"><a href="reference/lollipop.html">hlollipop</a></span><span class="op">(</span></span>
|
||||
<span> df <span class="op">=</span> <span class="va">df</span>,</span>
|
||||
<span> x <span class="op">=</span> <span class="st">"admin1"</span>,</span>
|
||||
<span> y <span class="op">=</span> <span class="st">"stat"</span>,</span>
|
||||
|
|
@ -353,11 +316,7 @@ plot of chunk example-lollipop-chart
|
|||
<span> x_title <span class="op">=</span> <span class="st">"Admin 1"</span>,</span>
|
||||
<span> title <span class="op">=</span> <span class="st">"% of HHs that received humanitarian assistance"</span></span>
|
||||
<span><span class="op">)</span></span></code></pre></div>
|
||||
<div class="figure">
|
||||
<img src="reference/figures/README-example-lollipop-chart-2.png" alt="plot of chunk example-lollipop-chart" width="65%"><p class="caption">
|
||||
plot of chunk example-lollipop-chart
|
||||
</p>
|
||||
</div>
|
||||
<p><img src="reference/figures/README-example-lollipop-chart-2.png" width="65%"></p>
|
||||
<div class="sourceCode" id="cb16"><pre class="downlit sourceCode r">
|
||||
<code class="sourceCode R"><span></span>
|
||||
<span><span class="co"># Create data for grouped lollipop - using set.seed for reproducibility</span></span>
|
||||
|
|
@ -370,59 +329,36 @@ plot of chunk example-lollipop-chart
|
|||
<span> <span class="fu">dplyr</span><span class="fu">::</span><span class="fu"><a href="https://dplyr.tidyverse.org/reference/mutate.html" class="external-link">mutate</a></span><span class="op">(</span>stat <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/Round.html" class="external-link">round</a></span><span class="op">(</span><span class="va">stat</span>, <span class="fl">0</span><span class="op">)</span><span class="op">)</span></span>
|
||||
<span></span>
|
||||
<span><span class="co"># Grouped lollipop chart with proper side-by-side positioning</span></span>
|
||||
<span><span class="fu">lollipop</span><span class="op">(</span></span>
|
||||
<span><span class="fu"><a href="reference/lollipop.html">lollipop</a></span><span class="op">(</span></span>
|
||||
<span> df <span class="op">=</span> <span class="va">df_grouped</span>,</span>
|
||||
<span> x <span class="op">=</span> <span class="st">"admin1"</span>,</span>
|
||||
<span> y <span class="op">=</span> <span class="st">"stat"</span>,</span>
|
||||
<span> group <span class="op">=</span> <span class="st">"group"</span>,</span>
|
||||
<span> order <span class="op">=</span> <span class="st">"grouped_y"</span>,</span>
|
||||
<span> dodge_width <span class="op">=</span> <span class="fl">0.8</span>, <span class="co"># Control spacing between grouped lollipops</span></span>
|
||||
<span> dot_size <span class="op">=</span> <span class="fl">3.5</span>,</span>
|
||||
<span> line_size <span class="op">=</span> <span class="fl">0.8</span>,</span>
|
||||
<span> y_title <span class="op">=</span> <span class="st">"Value"</span>,</span>
|
||||
<span> x_title <span class="op">=</span> <span class="st">"Category"</span>,</span>
|
||||
<span> title <span class="op">=</span> <span class="st">"True side-by-side grouped lollipop chart"</span></span>
|
||||
<span><span class="op">)</span></span></code></pre></div>
|
||||
<div class="figure">
|
||||
<img src="reference/figures/README-example-lollipop-chart-3.png" alt="plot of chunk example-lollipop-chart" width="65%"><p class="caption">
|
||||
plot of chunk example-lollipop-chart
|
||||
</p>
|
||||
</div>
|
||||
<p><img src="reference/figures/README-example-lollipop-chart-3.png" width="65%"></p>
|
||||
<div class="sourceCode" id="cb17"><pre class="downlit sourceCode r">
|
||||
<code class="sourceCode R"><span></span>
|
||||
<span><span class="co"># Horizontal grouped lollipop chart</span></span>
|
||||
<span><span class="fu">hlollipop</span><span class="op">(</span></span>
|
||||
<span><span class="fu"><a href="reference/lollipop.html">hlollipop</a></span><span class="op">(</span></span>
|
||||
<span> df <span class="op">=</span> <span class="va">df_grouped</span>,</span>
|
||||
<span> x <span class="op">=</span> <span class="st">"admin1"</span>,</span>
|
||||
<span> y <span class="op">=</span> <span class="st">"stat"</span>,</span>
|
||||
<span> group <span class="op">=</span> <span class="st">"group"</span>,</span>
|
||||
<span> dodge_width <span class="op">=</span> <span class="fl">0.7</span>, <span class="co"># Narrower spacing for horizontal orientation</span></span>
|
||||
<span> dot_size <span class="op">=</span> <span class="fl">3.5</span>,</span>
|
||||
<span> line_size <span class="op">=</span> <span class="fl">0.8</span>,</span>
|
||||
<span> y_title <span class="op">=</span> <span class="st">"Category"</span>,</span>
|
||||
<span> x_title <span class="op">=</span> <span class="st">"Value"</span>,</span>
|
||||
<span> title <span class="op">=</span> <span class="st">"Horizontal side-by-side grouped lollipop chart"</span></span>
|
||||
<span><span class="op">)</span></span></code></pre></div>
|
||||
<div class="figure">
|
||||
<img src="reference/figures/README-example-lollipop-chart-4.png" alt="plot of chunk example-lollipop-chart" width="65%"><p class="caption">
|
||||
plot of chunk example-lollipop-chart
|
||||
</p>
|
||||
<p><img src="reference/figures/README-example-lollipop-chart-4.png" width="65%"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section level2">
|
||||
<h2 id="lollipop-chart-features">Lollipop Chart Features<a class="anchor" aria-label="anchor" href="#lollipop-chart-features"></a>
|
||||
</h2>
|
||||
<p>Lollipop charts offer several advantages:</p>
|
||||
<ul>
|
||||
<li>Clean visualization of point data with connecting lines to a baseline</li>
|
||||
<li>True side-by-side grouped display for easy comparison between categories</li>
|
||||
<li>Each lollipop maintains its position from dot to baseline</li>
|
||||
<li>Customizable appearance with parameters for dot size, line width, and colors</li>
|
||||
<li>The <code>dodge_width</code> parameter controls spacing between grouped lollipops</li>
|
||||
</ul>
|
||||
<p>The side-by-side positioning for grouped lollipops makes them visually distinct from dumbbell plots, which typically connect related points on the same line.</p>
|
||||
</div>
|
||||
</div>
|
||||
</main><aside class="col-md-3"><div class="links">
|
||||
<h2 data-toc-skip>Links</h2>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue