<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google Analytics + OutboundLink + Google Adsense -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-79254642-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-79254642-1');
</script>
<script>
var getOutboundLink = function(url) {
gtag('event', 'click', {
'event_category': 'outbound',
'event_label': url,
'transport_type': 'beacon',
'event_callback': function(){document.location = url;}
});
}
</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-3523953066677938",
enable_page_level_ads: true
});
</script>
<!-- Google Analytics + OutboundLink + Google Adsense -->
<meta charset="utf-8">
<title>Chris Claremont’s X-Men comics exploration with streamcharts – the R Graph Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="This post explains how to build a highly customized streamchart with R and the tidyverse to explore the appearances of the most popular characters in Chris Claremont’s X-Men comics. Step by step code snippets with explanations are provided.">
<meta name="keywords" content="R,ggplot2,tidyverse,Example,Data,Dataviz,Datavisualization,Plot,Chart,Graph,Learning,Caveat,Pitfall,Mistake">
<meta name="author" content="Yan Holtz">
<link rel="icon" href="img/logo/R_single_small.png">
<!-- Control appearance when shared by social media -->
<meta property="og:title" content="Chris Claremont’s X-Men comics exploration with streamcharts" />
<meta property="og:image" content="img/overview_RGG.png" />
<meta property="og:description" content="This post explains how to build a highly customized streamchart with R and the tidyverse to explore the appearances of the most popular characters in Chris Claremont’s X-Men comics. Step by step code snippets with explanations are provided." />
<meta property='og:url' content="https://www.r-graph-gallery.com/web-streamchart-with-ggstream.html" />
<meta property="og:type" content="website" />
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="css/agency.css" rel="stylesheet">
<!-- JQUERY -->
<script src="vendor/jquery/jquery.min.js"></script>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
<!-- THIS ALLOWS TO INSERT THE MENU THAT IS STORED IN A MENU.HTML FILE-->
<nav class="navbar navbar-expand-lg fixed-top" id="mainNav"></nav>
<script>
$(function(){
$("#mainNav").load("html_chunk/menu.html");
});
</script>
<!-- THIS ALLOWS TO INSERT THE MODAL OF THE MENU THAT IS STORED IN A MENU_MODAL.HTML FILE-->
<div id="modal_menu_insertion"> </div>
<script>
$(function(){
$("#modal_menu_insertion").load("html_chunk/menu_modal.html");
});
</script>
<!-- Header = Title in big + social media Icon + quick description -->
<header class="masthead" style="padding-bottom: 30px;">
<div class="textlanding">
<center><h1>Chris Claremont’s X-Men comics exploration with streamcharts</h1></center>
<hr class="short_hr">
<br>
<ul class="list-inline social-buttons">
<li class="list-inline-item">
<a href="https://twitter.com/R_Graph_Gallery">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="list-inline-item social-buttons">
<a href="https://github.com/holtzy">
<i class="fa fa-github" style="color: white"></i>
</a>
</li>
<li class="list-inline-item social-buttons">
<a href="https://www.linkedin.com/in/yan-holtz-2477534a/">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li class="list-inline-item social-buttons">
<a href="https://www.yan-holtz.com">
<i class="fa fa-home"></i>
</a>
</li>
</ul>
<center><p style="max-width: 600px; margin-top: 40px">This post contains a detailed guide on how to produce a streamchart to explore the appearances of the most popular characters in Chris Claremont’s X-Men comics with <code>ggstream</code>. This blogpost contains step-by-step explanations together with useful tricks to customize up to the smallest detail of a visualization.</p></center>
<div style="text-align:center">
<a class="btn btn-secondary btn-xl text-uppercase js-scroll-trigger" href='streamgraph.html'>Streamgraph section</a>
<a class="btn btn-secondary btn-xl text-uppercase js-scroll-trigger" href='https://www.data-to-viz.com/graph/streamgraph.html'>Data to Viz</a>
</div>
</div>
</header>
<!-- THIS ALLOWS TO INSERT THE ADVERTISEMENT BANNER THAT IS STORED IN A BANNER.HTML FILE-->
<div id="position_for_images"></div>
<script>
$(function(){
$("#position_for_images").load("html_chunk/images.html");
});
</script>
<!-- STYLE for chart pages but not the rest of tthe website -->
<style>
img {
margin-top: 20px;
}
</style>
<div class="container" style="padding-top: 100px">
<div id="about" class="section level1">
<h1>About</h1>
<hr />
<p>This page showcases the work of <a href="https://www.cedricscherer.com">Cédric Scherer</a>, built for the <a href="https://github.com/rfordatascience/tidytuesday">TidyTuesday</a> initiative. You can find the original code on his github repository <a href="https://github.com/z3tt/TidyTuesday/blob/master/R/2020_27_ClaremontRunXMen.Rmd">here</a></p>
<p>Thanks to him for accepting sharing his work here! 🙏🙏 Thanks also to <a href="https://tcapretto.netlify.app">Tomás Capretto</a> who help writing down the blogpost!</p>
<p>As a teaser, here is the plot we’re gonna try building:</p>
<br>
<center>
<img src="img/fromTheWeb/streamchart-xmen.png" style="width:90.0%" />
</center>
<p><br></p>
</div>
<div id="packages-and-theme" class="section level1">
<h1>Packages and Theme</h1>
<hr />
<p>Let’s start by loading the packages needed to build the figure. They are all great packages and today’s chart wouldn’t be possible without them. But <a href="https://github.com/davidsjoberg/ggstream"><code>ggstream</code></a> is the one that brings streamplots to <code>ggplot2</code> and deserves to be highlighted in this little introduction.</p>
<div class="sourceCode" id="cb1"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="co"># Load packages</span></span>
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a><span class="fu">library</span>(tidyverse)</span>
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a><span class="fu">library</span>(fuzzyjoin)</span>
<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a><span class="fu">library</span>(ggstream)</span>
<span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a><span class="fu">library</span>(colorspace)</span>
<span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a><span class="fu">library</span>(ggtext)</span>
<span id="cb1-7"><a href="#cb1-7" aria-hidden="true" tabindex="-1"></a><span class="fu">library</span>(cowplot)</span></code></pre></div>
<p>Next, we set the theme for the plot. This theme is built on top of <code>theme_minimal()</code> and uses the font <code>"Reem Kufi"</code>. Don’t know how to make custom fonts work in <code>R</code>? Have a look at <a href="http://www.r-graph-gallery.com/custom-fonts-in-R-and-ggplot2">this guide</a> especially made for you!</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="fu">theme_set</span>(<span class="fu">theme_minimal</span>(<span class="at">base_family =</span> <span class="st">"Reem Kufi"</span>, <span class="at">base_size =</span> <span class="dv">12</span>))</span>
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a><span class="fu">theme_update</span>(</span>
<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a> <span class="at">plot.title =</span> <span class="fu">element_text</span>(</span>
<span id="cb2-5"><a href="#cb2-5" aria-hidden="true" tabindex="-1"></a> <span class="at">size =</span> <span class="dv">25</span>,</span>
<span id="cb2-6"><a href="#cb2-6" aria-hidden="true" tabindex="-1"></a> <span class="at">face =</span> <span class="st">"bold"</span>,</span>
<span id="cb2-7"><a href="#cb2-7" aria-hidden="true" tabindex="-1"></a> <span class="at">hjust =</span> .<span class="dv">5</span>,</span>
<span id="cb2-8"><a href="#cb2-8" aria-hidden="true" tabindex="-1"></a> <span class="at">margin =</span> <span class="fu">margin</span>(<span class="dv">10</span>, <span class="dv">0</span>, <span class="dv">30</span>, <span class="dv">0</span>)</span>
<span id="cb2-9"><a href="#cb2-9" aria-hidden="true" tabindex="-1"></a> ),</span>
<span id="cb2-10"><a href="#cb2-10" aria-hidden="true" tabindex="-1"></a> <span class="at">plot.caption =</span> <span class="fu">element_text</span>(</span>
<span id="cb2-11"><a href="#cb2-11" aria-hidden="true" tabindex="-1"></a> <span class="at">size =</span> <span class="dv">9</span>,</span>
<span id="cb2-12"><a href="#cb2-12" aria-hidden="true" tabindex="-1"></a> <span class="at">color =</span> <span class="st">"grey40"</span>,</span>
<span id="cb2-13"><a href="#cb2-13" aria-hidden="true" tabindex="-1"></a> <span class="at">hjust =</span> .<span class="dv">5</span>,</span>
<span id="cb2-14"><a href="#cb2-14" aria-hidden="true" tabindex="-1"></a> <span class="at">margin =</span> <span class="fu">margin</span>(<span class="dv">20</span>, <span class="dv">0</span>, <span class="dv">5</span>, <span class="dv">0</span>)</span>
<span id="cb2-15"><a href="#cb2-15" aria-hidden="true" tabindex="-1"></a> ),</span>
<span id="cb2-16"><a href="#cb2-16" aria-hidden="true" tabindex="-1"></a> <span class="at">axis.text.y =</span> <span class="fu">element_blank</span>(),</span>
<span id="cb2-17"><a href="#cb2-17" aria-hidden="true" tabindex="-1"></a> <span class="at">axis.title =</span> <span class="fu">element_blank</span>(),</span>
<span id="cb2-18"><a href="#cb2-18" aria-hidden="true" tabindex="-1"></a> <span class="at">plot.background =</span> <span class="fu">element_rect</span>(<span class="at">fill =</span> <span class="st">"grey88"</span>, <span class="at">color =</span> <span class="cn">NA</span>),</span>
<span id="cb2-19"><a href="#cb2-19" aria-hidden="true" tabindex="-1"></a> <span class="at">panel.background =</span> <span class="fu">element_rect</span>(<span class="at">fill =</span> <span class="cn">NA</span>, <span class="at">color =</span> <span class="cn">NA</span>),</span>
<span id="cb2-20"><a href="#cb2-20" aria-hidden="true" tabindex="-1"></a> <span class="at">panel.grid =</span> <span class="fu">element_blank</span>(),</span>
<span id="cb2-21"><a href="#cb2-21" aria-hidden="true" tabindex="-1"></a> <span class="at">panel.spacing.y =</span> <span class="fu">unit</span>(<span class="dv">0</span>, <span class="st">"lines"</span>),</span>
<span id="cb2-22"><a href="#cb2-22" aria-hidden="true" tabindex="-1"></a> <span class="at">strip.text.y =</span> <span class="fu">element_blank</span>(),</span>
<span id="cb2-23"><a href="#cb2-23" aria-hidden="true" tabindex="-1"></a> <span class="at">legend.position =</span> <span class="st">"bottom"</span>,</span>
<span id="cb2-24"><a href="#cb2-24" aria-hidden="true" tabindex="-1"></a> <span class="at">legend.text =</span> <span class="fu">element_text</span>(<span class="at">size =</span> <span class="dv">9</span>, <span class="at">color =</span> <span class="st">"grey40"</span>),</span>
<span id="cb2-25"><a href="#cb2-25" aria-hidden="true" tabindex="-1"></a> <span class="at">legend.box.margin =</span> <span class="fu">margin</span>(<span class="at">t =</span> <span class="dv">30</span>), </span>
<span id="cb2-26"><a href="#cb2-26" aria-hidden="true" tabindex="-1"></a> <span class="at">legend.background =</span> <span class="fu">element_rect</span>(</span>
<span id="cb2-27"><a href="#cb2-27" aria-hidden="true" tabindex="-1"></a> <span class="at">color =</span> <span class="st">"grey40"</span>, </span>
<span id="cb2-28"><a href="#cb2-28" aria-hidden="true" tabindex="-1"></a> <span class="at">size =</span> .<span class="dv">3</span>, </span>
<span id="cb2-29"><a href="#cb2-29" aria-hidden="true" tabindex="-1"></a> <span class="at">fill =</span> <span class="st">"grey95"</span></span>
<span id="cb2-30"><a href="#cb2-30" aria-hidden="true" tabindex="-1"></a> ),</span>
<span id="cb2-31"><a href="#cb2-31" aria-hidden="true" tabindex="-1"></a> <span class="at">legend.key.height =</span> <span class="fu">unit</span>(.<span class="dv">25</span>, <span class="st">"lines"</span>),</span>
<span id="cb2-32"><a href="#cb2-32" aria-hidden="true" tabindex="-1"></a> <span class="at">legend.key.width =</span> <span class="fu">unit</span>(<span class="fl">2.5</span>, <span class="st">"lines"</span>),</span>
<span id="cb2-33"><a href="#cb2-33" aria-hidden="true" tabindex="-1"></a> <span class="at">plot.margin =</span> <span class="fu">margin</span>(<span class="fu">rep</span>(<span class="dv">20</span>, <span class="dv">4</span>))</span>
<span id="cb2-34"><a href="#cb2-34" aria-hidden="true" tabindex="-1"></a>)</span></code></pre></div>
<p><br></p>
</div>
<div id="load-and-prepare-the-dataset" class="section level1">
<h1>Load and prepare the dataset</h1>
<hr />
<p>This guide shows how to create a highly customized and beautiful streamchart to visualize the number of appearences of the most popular characters in Chris Claremont’s sixteen-year run on Uncanny X-Men.</p>
<p>The original source of data for this week are the <a href="http://www.claremontrun.com/">Claremont Run Project</a> and <a href="https://twitter.com/malco_barrett">Malcom Barret</a> who put these datasets into a the R package <a href="https://github.com/malcolmbarrett/claremontrun">cleremontrun</a>. This guide uses the <code>character_visualization</code> dataset released for the <a href="https://github.com/rfordatascience/tidytuesday">TidyTuesday</a> initiative on the week of 2021-06-30. You can find the original announcement and more information about the data <a href="https://github.com/rfordatascience/tidytuesday/blob/master/data/2020/2020-06-30/readme.md">here</a>. Thank you all for making this possible!</p>
<div class="sourceCode" id="cb3"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a>df_char_vis <span class="ot"><-</span> readr<span class="sc">::</span><span class="fu">read_csv</span>(<span class="st">'https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2020/2020-06-30/character_visualization.csv'</span>)</span></code></pre></div>
<p><br></p>
<p>The following is a data frame that ranks the most popular X-Men characters according to <a href="https://www.ranker.com/list/best-x-men-characters/ranker-comics">this source</a>. Today’s chart is based on the top 5 most popular characters.</p>
<div class="sourceCode" id="cb4"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true" tabindex="-1"></a>df_best_chars <span class="ot"><-</span> <span class="fu">tibble</span>(</span>
<span id="cb4-2"><a href="#cb4-2" aria-hidden="true" tabindex="-1"></a> <span class="at">rank =</span> <span class="dv">1</span><span class="sc">:</span><span class="dv">10</span>,</span>
<span id="cb4-3"><a href="#cb4-3" aria-hidden="true" tabindex="-1"></a> <span class="at">char_popular =</span> <span class="fu">c</span>(<span class="st">"Wolverine"</span>, <span class="st">"Magneto"</span>, </span>
<span id="cb4-4"><a href="#cb4-4" aria-hidden="true" tabindex="-1"></a> <span class="st">"Nightcrawler"</span>, <span class="st">"Gambit"</span>,</span>
<span id="cb4-5"><a href="#cb4-5" aria-hidden="true" tabindex="-1"></a> <span class="st">"Storm"</span>, <span class="st">"Colossus"</span>,</span>
<span id="cb4-6"><a href="#cb4-6" aria-hidden="true" tabindex="-1"></a> <span class="st">"Phoenix"</span>, <span class="st">"Professor X"</span>,</span>
<span id="cb4-7"><a href="#cb4-7" aria-hidden="true" tabindex="-1"></a> <span class="st">"Iceman"</span>, <span class="st">"Rogue"</span>)</span>
<span id="cb4-8"><a href="#cb4-8" aria-hidden="true" tabindex="-1"></a> )</span></code></pre></div>
<p><br></p>
<p>The <code>"character"</code> column in <code>df_char_vis</code> contains more information than just the name of the characters In the next chunk, <code>regex_inner_join()</code> from the <code>fuzzyjoin</code> package automatically uses regular expressions to merge <code>df_char_vis</code> and <code>df_best_chars</code> into <code>df_best_stream</code>. This dataset contains the number of appearences per issue by character, costume, and type of appearence.</p>
<div class="sourceCode" id="cb5"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb5-1"><a href="#cb5-1" aria-hidden="true" tabindex="-1"></a>df_best_stream <span class="ot"><-</span> df_char_vis <span class="sc">%>%</span> </span>
<span id="cb5-2"><a href="#cb5-2" aria-hidden="true" tabindex="-1"></a> <span class="fu">regex_inner_join</span>(df_best_chars, <span class="at">by =</span> <span class="fu">c</span>(<span class="at">character =</span> <span class="st">"char_popular"</span>)) <span class="sc">%>%</span> </span>
<span id="cb5-3"><a href="#cb5-3" aria-hidden="true" tabindex="-1"></a> <span class="fu">group_by</span>(character, char_popular, costume, rank, issue) <span class="sc">%>%</span> </span>
<span id="cb5-4"><a href="#cb5-4" aria-hidden="true" tabindex="-1"></a> <span class="fu">summarize_if</span>(is.numeric, sum, <span class="at">na.rm =</span> <span class="cn">TRUE</span>) <span class="sc">%>%</span> </span>
<span id="cb5-5"><a href="#cb5-5" aria-hidden="true" tabindex="-1"></a> <span class="fu">ungroup</span>() <span class="sc">%>%</span> </span>
<span id="cb5-6"><a href="#cb5-6" aria-hidden="true" tabindex="-1"></a> <span class="fu">filter</span>(rank <span class="sc"><=</span> <span class="dv">5</span>) <span class="sc">%>%</span> <span class="co"># Keep top 5 characters</span></span>
<span id="cb5-7"><a href="#cb5-7" aria-hidden="true" tabindex="-1"></a> <span class="fu">filter</span>(issue <span class="sc"><</span> <span class="dv">281</span>)</span></code></pre></div>
<p><br></p>
<p>The following step isn’t strictly necessary, but it’s a cool trick to make the start and end of the stream smoother.</p>
<div class="sourceCode" id="cb6"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb6-1"><a href="#cb6-1" aria-hidden="true" tabindex="-1"></a>df_smooth <span class="ot"><-</span> df_best_stream <span class="sc">%>%</span></span>
<span id="cb6-2"><a href="#cb6-2" aria-hidden="true" tabindex="-1"></a> <span class="fu">group_by</span>(character, char_popular, costume, rank) <span class="sc">%>%</span></span>
<span id="cb6-3"><a href="#cb6-3" aria-hidden="true" tabindex="-1"></a> <span class="fu">slice</span>(<span class="dv">1</span><span class="sc">:</span><span class="dv">4</span>) <span class="sc">%>%</span></span>
<span id="cb6-4"><a href="#cb6-4" aria-hidden="true" tabindex="-1"></a> <span class="fu">mutate</span>(</span>
<span id="cb6-5"><a href="#cb6-5" aria-hidden="true" tabindex="-1"></a> <span class="at">issue =</span> <span class="fu">c</span>(</span>
<span id="cb6-6"><a href="#cb6-6" aria-hidden="true" tabindex="-1"></a> <span class="fu">min</span>(df_best_stream<span class="sc">$</span>issue) <span class="sc">-</span> <span class="dv">20</span>,</span>
<span id="cb6-7"><a href="#cb6-7" aria-hidden="true" tabindex="-1"></a> <span class="fu">min</span>(df_best_stream<span class="sc">$</span>issue) <span class="sc">-</span> <span class="dv">5</span>,</span>
<span id="cb6-8"><a href="#cb6-8" aria-hidden="true" tabindex="-1"></a> <span class="fu">max</span>(df_best_stream<span class="sc">$</span>issue) <span class="sc">+</span> <span class="dv">5</span>,</span>
<span id="cb6-9"><a href="#cb6-9" aria-hidden="true" tabindex="-1"></a> <span class="fu">max</span>(df_best_stream<span class="sc">$</span>issue) <span class="sc">+</span> <span class="dv">20</span></span>
<span id="cb6-10"><a href="#cb6-10" aria-hidden="true" tabindex="-1"></a> ),</span>
<span id="cb6-11"><a href="#cb6-11" aria-hidden="true" tabindex="-1"></a> <span class="at">speech =</span> <span class="fu">c</span>(<span class="dv">0</span>, .<span class="dv">001</span>, .<span class="dv">001</span>, <span class="dv">0</span>),</span>
<span id="cb6-12"><a href="#cb6-12" aria-hidden="true" tabindex="-1"></a> <span class="at">thought =</span> <span class="fu">c</span>(<span class="dv">0</span>, .<span class="dv">001</span>, .<span class="dv">001</span>, <span class="dv">0</span>),</span>
<span id="cb6-13"><a href="#cb6-13" aria-hidden="true" tabindex="-1"></a> <span class="at">narrative =</span> <span class="fu">c</span>(<span class="dv">0</span>, .<span class="dv">001</span>, .<span class="dv">001</span>, <span class="dv">0</span>),</span>
<span id="cb6-14"><a href="#cb6-14" aria-hidden="true" tabindex="-1"></a> <span class="at">depicted =</span> <span class="fu">c</span>(<span class="dv">0</span>, .<span class="dv">001</span>, .<span class="dv">001</span>, <span class="dv">0</span>)</span>
<span id="cb6-15"><a href="#cb6-15" aria-hidden="true" tabindex="-1"></a> )</span></code></pre></div>
<p><br></p>
<p>The data is pivoted into a long format. A new variable, <code>char_costume</code>, contains both the name of the character and the costume (costumed or casual).</p>
<div class="sourceCode" id="cb7"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb7-1"><a href="#cb7-1" aria-hidden="true" tabindex="-1"></a><span class="do">## factor levels for type of appearance</span></span>
<span id="cb7-2"><a href="#cb7-2" aria-hidden="true" tabindex="-1"></a>levels <span class="ot"><-</span> <span class="fu">c</span>(<span class="st">"depicted"</span>, <span class="st">"speech"</span>, <span class="st">"thought"</span>, <span class="st">"narrative"</span>)</span>
<span id="cb7-3"><a href="#cb7-3" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb7-4"><a href="#cb7-4" aria-hidden="true" tabindex="-1"></a><span class="do">## factorized data in long format</span></span>
<span id="cb7-5"><a href="#cb7-5" aria-hidden="true" tabindex="-1"></a>df_best_stream_fct <span class="ot"><-</span> df_best_stream <span class="sc">%>%</span> </span>
<span id="cb7-6"><a href="#cb7-6" aria-hidden="true" tabindex="-1"></a> <span class="fu">bind_rows</span>(df_smooth) <span class="sc">%>%</span></span>
<span id="cb7-7"><a href="#cb7-7" aria-hidden="true" tabindex="-1"></a> <span class="fu">mutate</span>(</span>
<span id="cb7-8"><a href="#cb7-8" aria-hidden="true" tabindex="-1"></a> <span class="at">costume =</span> <span class="fu">if_else</span>(costume <span class="sc">==</span> <span class="st">"Costume"</span>, <span class="st">"costumed"</span>, <span class="st">"casual"</span>),</span>
<span id="cb7-9"><a href="#cb7-9" aria-hidden="true" tabindex="-1"></a> <span class="at">char_costume =</span> <span class="fu">if_else</span>(</span>
<span id="cb7-10"><a href="#cb7-10" aria-hidden="true" tabindex="-1"></a> char_popular <span class="sc">==</span> <span class="st">"Storm"</span>,</span>
<span id="cb7-11"><a href="#cb7-11" aria-hidden="true" tabindex="-1"></a> glue<span class="sc">::</span><span class="fu">glue</span>(<span class="st">"{char_popular} ({costume})"</span>),</span>
<span id="cb7-12"><a href="#cb7-12" aria-hidden="true" tabindex="-1"></a> glue<span class="sc">::</span><span class="fu">glue</span>(<span class="st">"{char_popular} ({costume}) "</span>)</span>
<span id="cb7-13"><a href="#cb7-13" aria-hidden="true" tabindex="-1"></a> ),</span>
<span id="cb7-14"><a href="#cb7-14" aria-hidden="true" tabindex="-1"></a> <span class="at">char_costume =</span> <span class="fu">fct_reorder</span>(char_costume, rank)</span>
<span id="cb7-15"><a href="#cb7-15" aria-hidden="true" tabindex="-1"></a> ) <span class="sc">%>%</span> </span>
<span id="cb7-16"><a href="#cb7-16" aria-hidden="true" tabindex="-1"></a> <span class="fu">pivot_longer</span>(</span>
<span id="cb7-17"><a href="#cb7-17" aria-hidden="true" tabindex="-1"></a> <span class="at">cols =</span> speech<span class="sc">:</span>depicted,</span>
<span id="cb7-18"><a href="#cb7-18" aria-hidden="true" tabindex="-1"></a> <span class="at">names_to =</span> <span class="st">"parameter"</span>,</span>
<span id="cb7-19"><a href="#cb7-19" aria-hidden="true" tabindex="-1"></a> <span class="at">values_to =</span> <span class="st">"value"</span></span>
<span id="cb7-20"><a href="#cb7-20" aria-hidden="true" tabindex="-1"></a> ) <span class="sc">%>%</span> </span>
<span id="cb7-21"><a href="#cb7-21" aria-hidden="true" tabindex="-1"></a> <span class="fu">mutate</span>(<span class="at">parameter =</span> <span class="fu">factor</span>(parameter, <span class="at">levels =</span> levels))</span></code></pre></div>
<p><br></p>
<p>And finally, we define the color palette and some data that will be useful when adding annotations to the plot.</p>
<div class="sourceCode" id="cb8"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb8-1"><a href="#cb8-1" aria-hidden="true" tabindex="-1"></a><span class="co"># Define the color palette</span></span>
<span id="cb8-2"><a href="#cb8-2" aria-hidden="true" tabindex="-1"></a>pal <span class="ot"><-</span> <span class="fu">c</span>(</span>
<span id="cb8-3"><a href="#cb8-3" aria-hidden="true" tabindex="-1"></a> <span class="st">"#FFB400"</span>, <span class="fu">lighten</span>(<span class="st">"#FFB400"</span>, .<span class="dv">25</span>, <span class="at">space =</span> <span class="st">"HLS"</span>),</span>
<span id="cb8-4"><a href="#cb8-4" aria-hidden="true" tabindex="-1"></a> <span class="st">"#C20008"</span>, <span class="fu">lighten</span>(<span class="st">"#C20008"</span>, .<span class="dv">2</span>, <span class="at">space =</span> <span class="st">"HLS"</span>),</span>
<span id="cb8-5"><a href="#cb8-5" aria-hidden="true" tabindex="-1"></a> <span class="st">"#13AFEF"</span>, <span class="fu">lighten</span>(<span class="st">"#13AFEF"</span>, .<span class="dv">25</span>, <span class="at">space =</span> <span class="st">"HLS"</span>),</span>
<span id="cb8-6"><a href="#cb8-6" aria-hidden="true" tabindex="-1"></a> <span class="st">"#8E038E"</span>, <span class="fu">lighten</span>(<span class="st">"#8E038E"</span>, .<span class="dv">2</span>, <span class="at">space =</span> <span class="st">"HLS"</span>),</span>
<span id="cb8-7"><a href="#cb8-7" aria-hidden="true" tabindex="-1"></a> <span class="st">"#595A52"</span>, <span class="fu">lighten</span>(<span class="st">"#595A52"</span>, .<span class="dv">15</span>, <span class="at">space =</span> <span class="st">"HLS"</span>)</span>
<span id="cb8-8"><a href="#cb8-8" aria-hidden="true" tabindex="-1"></a>)</span>
<span id="cb8-9"><a href="#cb8-9" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb8-10"><a href="#cb8-10" aria-hidden="true" tabindex="-1"></a><span class="co"># These are going to be labels added to each panel</span></span>
<span id="cb8-11"><a href="#cb8-11" aria-hidden="true" tabindex="-1"></a>labels <span class="ot"><-</span> <span class="fu">tibble</span>(</span>
<span id="cb8-12"><a href="#cb8-12" aria-hidden="true" tabindex="-1"></a> <span class="at">issue =</span> <span class="dv">78</span>,</span>
<span id="cb8-13"><a href="#cb8-13" aria-hidden="true" tabindex="-1"></a> <span class="at">value =</span> <span class="fu">c</span>(<span class="sc">-</span><span class="dv">21</span>, <span class="sc">-</span><span class="dv">19</span>, <span class="sc">-</span><span class="dv">14</span>, <span class="sc">-</span><span class="dv">11</span>),</span>
<span id="cb8-14"><a href="#cb8-14" aria-hidden="true" tabindex="-1"></a> <span class="at">parameter =</span> <span class="fu">factor</span>(levels, <span class="at">levels =</span> levels),</span>
<span id="cb8-15"><a href="#cb8-15" aria-hidden="true" tabindex="-1"></a> <span class="at">label =</span> <span class="fu">c</span>(<span class="st">"Depicted"</span>, <span class="st">"Speech</span><span class="sc">\n</span><span class="st">Bubbles"</span>, <span class="st">"Thought</span><span class="sc">\n</span><span class="st">Bubbles"</span>, <span class="st">"Narrative</span><span class="sc">\n</span><span class="st">Statements"</span>)</span>
<span id="cb8-16"><a href="#cb8-16" aria-hidden="true" tabindex="-1"></a> )</span>
<span id="cb8-17"><a href="#cb8-17" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb8-18"><a href="#cb8-18" aria-hidden="true" tabindex="-1"></a><span class="co"># These are going to be the text annotations</span></span>
<span id="cb8-19"><a href="#cb8-19" aria-hidden="true" tabindex="-1"></a><span class="co"># If you wonder about the '**' or the '<sup>' within the text, let me tell you</span></span>
<span id="cb8-20"><a href="#cb8-20" aria-hidden="true" tabindex="-1"></a><span class="co"># this is just Markdown syntax used by the ggtext library to make custom text</span></span>
<span id="cb8-21"><a href="#cb8-21" aria-hidden="true" tabindex="-1"></a><span class="co"># annotations very easy!</span></span>
<span id="cb8-22"><a href="#cb8-22" aria-hidden="true" tabindex="-1"></a>texts <span class="ot"><-</span> <span class="fu">tibble</span>(</span>
<span id="cb8-23"><a href="#cb8-23" aria-hidden="true" tabindex="-1"></a> <span class="at">issue =</span> <span class="fu">c</span>(<span class="dv">295</span>, <span class="dv">80</span>, <span class="dv">245</span>, <span class="dv">127</span>, <span class="dv">196</span>),</span>
<span id="cb8-24"><a href="#cb8-24" aria-hidden="true" tabindex="-1"></a> <span class="at">value =</span> <span class="fu">c</span>(<span class="sc">-</span><span class="dv">35</span>, <span class="dv">35</span>, <span class="dv">30</span>, <span class="dv">57</span>, <span class="dv">55</span>),</span>
<span id="cb8-25"><a href="#cb8-25" aria-hidden="true" tabindex="-1"></a> <span class="at">parameter =</span> <span class="fu">c</span>(<span class="st">"depicted"</span>, <span class="st">"depicted"</span>, <span class="st">"thought"</span>, <span class="st">"speech"</span>, <span class="st">"speech"</span>),</span>
<span id="cb8-26"><a href="#cb8-26" aria-hidden="true" tabindex="-1"></a> <span class="at">text =</span> <span class="fu">c</span>(</span>
<span id="cb8-27"><a href="#cb8-27" aria-hidden="true" tabindex="-1"></a> <span class="st">'**Gambit** was introduced for the first time in issue #266 called "Gambit: Out of the Frying Pan"— nevertheless, he is the **4<sup>th</sup> most popular X-Men character**!'</span>,</span>
<span id="cb8-28"><a href="#cb8-28" aria-hidden="true" tabindex="-1"></a> <span class="st">'**Wolverine is the most popular X-Men** and has a regular presence in the X-Men comics between 1975 and 1991.'</span>,</span>
<span id="cb8-29"><a href="#cb8-29" aria-hidden="true" tabindex="-1"></a> <span class="st">'**Storm** is by far the most thoughtful of the five most popular X-Men characters, especially in issues #220, #223 and #265. Storm **ranks 5<sup>th</sup>**.'</span>,</span>
<span id="cb8-30"><a href="#cb8-30" aria-hidden="true" tabindex="-1"></a> <span class="st">"**Magneto** was ranked by IGN as the *Greatest Comic Book Villain of All Time*. And even though he only appears from time to time he **ranks 2<sup>nd</sup>**—<br>4 ranks higher than his friend and opponent Professor X!"</span>,</span>
<span id="cb8-31"><a href="#cb8-31" aria-hidden="true" tabindex="-1"></a> <span class="st">'The **3<sup>rd</sup> most popular X-men character Nightcrawler** gets injured during the "Mutant Massacre" and fell into a coma after an attack from Riptide in issue #211.'</span></span>
<span id="cb8-32"><a href="#cb8-32" aria-hidden="true" tabindex="-1"></a> ),</span>
<span id="cb8-33"><a href="#cb8-33" aria-hidden="true" tabindex="-1"></a> <span class="at">char_popular =</span> <span class="fu">c</span>(<span class="st">"Gambit"</span>, <span class="st">"Wolverine"</span>, <span class="st">"Storm"</span>, <span class="st">"Magneto"</span>, <span class="st">"Nightcrawler"</span>),</span>
<span id="cb8-34"><a href="#cb8-34" aria-hidden="true" tabindex="-1"></a> <span class="at">costume =</span> <span class="st">"costumed"</span>,</span>
<span id="cb8-35"><a href="#cb8-35" aria-hidden="true" tabindex="-1"></a> <span class="at">vjust =</span> <span class="fu">c</span>(.<span class="dv">5</span>, .<span class="dv">5</span>, .<span class="dv">4</span>, .<span class="dv">36</span>, .<span class="dv">38</span>)</span>
<span id="cb8-36"><a href="#cb8-36" aria-hidden="true" tabindex="-1"></a> ) <span class="sc">%>%</span> </span>
<span id="cb8-37"><a href="#cb8-37" aria-hidden="true" tabindex="-1"></a> <span class="fu">mutate</span>(</span>
<span id="cb8-38"><a href="#cb8-38" aria-hidden="true" tabindex="-1"></a> <span class="at">parameter =</span> <span class="fu">factor</span>(parameter, <span class="at">levels =</span> levels),</span>
<span id="cb8-39"><a href="#cb8-39" aria-hidden="true" tabindex="-1"></a> <span class="at">char_costume =</span> <span class="fu">if_else</span>(</span>
<span id="cb8-40"><a href="#cb8-40" aria-hidden="true" tabindex="-1"></a> char_popular <span class="sc">==</span> <span class="st">"Storm"</span>,</span>
<span id="cb8-41"><a href="#cb8-41" aria-hidden="true" tabindex="-1"></a> glue<span class="sc">::</span><span class="fu">glue</span>(<span class="st">"{char_popular} ({costume})"</span>),</span>
<span id="cb8-42"><a href="#cb8-42" aria-hidden="true" tabindex="-1"></a> glue<span class="sc">::</span><span class="fu">glue</span>(<span class="st">"{char_popular} ({costume}) "</span>)</span>
<span id="cb8-43"><a href="#cb8-43" aria-hidden="true" tabindex="-1"></a> ),</span>
<span id="cb8-44"><a href="#cb8-44" aria-hidden="true" tabindex="-1"></a> <span class="at">char_costume =</span> <span class="fu">factor</span>(char_costume, <span class="at">levels =</span> <span class="fu">levels</span>(df_best_stream_fct<span class="sc">$</span>char_costume))</span>
<span id="cb8-45"><a href="#cb8-45" aria-hidden="true" tabindex="-1"></a> )</span></code></pre></div>
<p><br></p>
</div>
<div id="basic-plot" class="section level1">
<h1>Basic Plot</h1>
<hr />
<p>Thanks to <code>ggstream</code>, it’s quite simple to build a streamchart in <code>ggplot2</code>. All we need to use is the <code>geom_stream()</code> function. On top of that, this first version also sets the color scales and uses <code>facet_grid()</code> to obtain one stream per type of appearence.</p>
<div class="sourceCode" id="cb9"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb9-1"><a href="#cb9-1" aria-hidden="true" tabindex="-1"></a>g <span class="ot"><-</span> df_best_stream_fct <span class="sc">%>%</span> </span>
<span id="cb9-2"><a href="#cb9-2" aria-hidden="true" tabindex="-1"></a> <span class="fu">ggplot</span>(</span>
<span id="cb9-3"><a href="#cb9-3" aria-hidden="true" tabindex="-1"></a> <span class="fu">aes</span>(</span>
<span id="cb9-4"><a href="#cb9-4" aria-hidden="true" tabindex="-1"></a> issue, value, </span>
<span id="cb9-5"><a href="#cb9-5" aria-hidden="true" tabindex="-1"></a> <span class="at">color =</span> char_costume, </span>
<span id="cb9-6"><a href="#cb9-6" aria-hidden="true" tabindex="-1"></a> <span class="at">fill =</span> char_costume</span>
<span id="cb9-7"><a href="#cb9-7" aria-hidden="true" tabindex="-1"></a> )</span>
<span id="cb9-8"><a href="#cb9-8" aria-hidden="true" tabindex="-1"></a> ) <span class="sc">+</span></span>
<span id="cb9-9"><a href="#cb9-9" aria-hidden="true" tabindex="-1"></a> <span class="fu">geom_stream</span>(</span>
<span id="cb9-10"><a href="#cb9-10" aria-hidden="true" tabindex="-1"></a> <span class="at">geom =</span> <span class="st">"contour"</span>,</span>
<span id="cb9-11"><a href="#cb9-11" aria-hidden="true" tabindex="-1"></a> <span class="at">color =</span> <span class="st">"white"</span>,</span>
<span id="cb9-12"><a href="#cb9-12" aria-hidden="true" tabindex="-1"></a> <span class="at">size =</span> <span class="fl">1.25</span>,</span>
<span id="cb9-13"><a href="#cb9-13" aria-hidden="true" tabindex="-1"></a> <span class="at">bw =</span> .<span class="dv">45</span> <span class="co"># Controls smoothness</span></span>
<span id="cb9-14"><a href="#cb9-14" aria-hidden="true" tabindex="-1"></a> ) <span class="sc">+</span></span>
<span id="cb9-15"><a href="#cb9-15" aria-hidden="true" tabindex="-1"></a> <span class="fu">geom_stream</span>(</span>
<span id="cb9-16"><a href="#cb9-16" aria-hidden="true" tabindex="-1"></a> <span class="at">geom =</span> <span class="st">"polygon"</span>,</span>
<span id="cb9-17"><a href="#cb9-17" aria-hidden="true" tabindex="-1"></a> <span class="at">bw =</span> .<span class="dv">45</span>,</span>
<span id="cb9-18"><a href="#cb9-18" aria-hidden="true" tabindex="-1"></a> <span class="at">size =</span> <span class="dv">0</span></span>
<span id="cb9-19"><a href="#cb9-19" aria-hidden="true" tabindex="-1"></a> ) <span class="sc">+</span></span>
<span id="cb9-20"><a href="#cb9-20" aria-hidden="true" tabindex="-1"></a> <span class="fu">scale_color_manual</span>(</span>
<span id="cb9-21"><a href="#cb9-21" aria-hidden="true" tabindex="-1"></a> <span class="at">expand =</span> <span class="fu">c</span>(<span class="dv">0</span>, <span class="dv">0</span>),</span>
<span id="cb9-22"><a href="#cb9-22" aria-hidden="true" tabindex="-1"></a> <span class="at">values =</span> pal,</span>
<span id="cb9-23"><a href="#cb9-23" aria-hidden="true" tabindex="-1"></a> <span class="at">guide =</span> <span class="st">"none"</span></span>
<span id="cb9-24"><a href="#cb9-24" aria-hidden="true" tabindex="-1"></a> ) <span class="sc">+</span></span>
<span id="cb9-25"><a href="#cb9-25" aria-hidden="true" tabindex="-1"></a> <span class="fu">scale_fill_manual</span>(</span>
<span id="cb9-26"><a href="#cb9-26" aria-hidden="true" tabindex="-1"></a> <span class="at">values =</span> pal,</span>
<span id="cb9-27"><a href="#cb9-27" aria-hidden="true" tabindex="-1"></a> <span class="at">name =</span> <span class="cn">NULL</span></span>
<span id="cb9-28"><a href="#cb9-28" aria-hidden="true" tabindex="-1"></a> ) <span class="sc">+</span></span>
<span id="cb9-29"><a href="#cb9-29" aria-hidden="true" tabindex="-1"></a> <span class="fu">facet_grid</span>( <span class="do">## needs facet_grid for space argument</span></span>
<span id="cb9-30"><a href="#cb9-30" aria-hidden="true" tabindex="-1"></a> parameter <span class="sc">~</span> ., </span>
<span id="cb9-31"><a href="#cb9-31" aria-hidden="true" tabindex="-1"></a> <span class="at">scales =</span> <span class="st">"free_y"</span>, </span>
<span id="cb9-32"><a href="#cb9-32" aria-hidden="true" tabindex="-1"></a> <span class="at">space =</span> <span class="st">"free"</span></span>
<span id="cb9-33"><a href="#cb9-33" aria-hidden="true" tabindex="-1"></a> )</span>
<span id="cb9-34"><a href="#cb9-34" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb9-35"><a href="#cb9-35" aria-hidden="true" tabindex="-1"></a>g</span></code></pre></div>
<p><img src="web-streamchart-with-ggstream_files/figure-html/unnamed-chunk-9-1.png" width="95%" style="display: block; margin: auto;" /> <br></p>
<p>Note <code>geom_stream()</code> is used twice above. The first time, it adds a white contour to each area. As a result, when the second stream is added on top, only the outermost contour line remains, creating a very nice highlighting effect. Nice trick!</p>
</div>
<div id="add-annotations" class="section level1">
<h1>Add annotations</h1>
<hr />
<p>The plot above looks really well, but it’s so minimalistic in its annotations that it misses the opportunity to share important information. The next step is to add <strong>labels</strong> and <strong>text</strong> to make this chart more insightful.</p>
<div class="sourceCode" id="cb10"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb10-1"><a href="#cb10-1" aria-hidden="true" tabindex="-1"></a>g <span class="ot"><-</span> g <span class="sc">+</span> </span>
<span id="cb10-2"><a href="#cb10-2" aria-hidden="true" tabindex="-1"></a> <span class="fu">geom_vline</span>(</span>
<span id="cb10-3"><a href="#cb10-3" aria-hidden="true" tabindex="-1"></a> <span class="at">data =</span> <span class="fu">tibble</span>(<span class="at">x =</span> <span class="fu">c</span>(<span class="dv">97</span>, <span class="fu">seq</span>(<span class="dv">125</span>, <span class="dv">250</span>, <span class="at">by =</span> <span class="dv">25</span>), <span class="dv">280</span>)),</span>
<span id="cb10-4"><a href="#cb10-4" aria-hidden="true" tabindex="-1"></a> <span class="fu">aes</span>(<span class="at">xintercept =</span> x),</span>
<span id="cb10-5"><a href="#cb10-5" aria-hidden="true" tabindex="-1"></a> <span class="at">inherit.aes =</span> <span class="cn">FALSE</span>, </span>
<span id="cb10-6"><a href="#cb10-6" aria-hidden="true" tabindex="-1"></a> <span class="at">color =</span> <span class="st">"grey88"</span>, </span>
<span id="cb10-7"><a href="#cb10-7" aria-hidden="true" tabindex="-1"></a> <span class="at">size =</span> .<span class="dv">5</span>,</span>
<span id="cb10-8"><a href="#cb10-8" aria-hidden="true" tabindex="-1"></a> <span class="at">linetype =</span> <span class="st">"dotted"</span></span>
<span id="cb10-9"><a href="#cb10-9" aria-hidden="true" tabindex="-1"></a> ) <span class="sc">+</span></span>
<span id="cb10-10"><a href="#cb10-10" aria-hidden="true" tabindex="-1"></a> <span class="fu">annotate</span>(</span>
<span id="cb10-11"><a href="#cb10-11" aria-hidden="true" tabindex="-1"></a> <span class="st">"rect"</span>,</span>
<span id="cb10-12"><a href="#cb10-12" aria-hidden="true" tabindex="-1"></a> <span class="at">xmin =</span> <span class="sc">-</span><span class="cn">Inf</span>, <span class="at">xmax =</span> <span class="dv">78</span>, </span>
<span id="cb10-13"><a href="#cb10-13" aria-hidden="true" tabindex="-1"></a> <span class="at">ymin =</span> <span class="sc">-</span><span class="cn">Inf</span>, <span class="at">ymax =</span> <span class="cn">Inf</span>,</span>
<span id="cb10-14"><a href="#cb10-14" aria-hidden="true" tabindex="-1"></a> <span class="at">fill =</span> <span class="st">"grey88"</span></span>
<span id="cb10-15"><a href="#cb10-15" aria-hidden="true" tabindex="-1"></a> ) <span class="sc">+</span></span>
<span id="cb10-16"><a href="#cb10-16" aria-hidden="true" tabindex="-1"></a> <span class="fu">annotate</span>(</span>
<span id="cb10-17"><a href="#cb10-17" aria-hidden="true" tabindex="-1"></a> <span class="st">"rect"</span>,</span>
<span id="cb10-18"><a href="#cb10-18" aria-hidden="true" tabindex="-1"></a> <span class="at">xmin =</span> <span class="dv">299</span>, <span class="at">xmax =</span> <span class="cn">Inf</span>, </span>
<span id="cb10-19"><a href="#cb10-19" aria-hidden="true" tabindex="-1"></a> <span class="at">ymin =</span> <span class="sc">-</span><span class="cn">Inf</span>, <span class="at">ymax =</span> <span class="cn">Inf</span>,</span>
<span id="cb10-20"><a href="#cb10-20" aria-hidden="true" tabindex="-1"></a> <span class="at">fill =</span> <span class="st">"grey88"</span></span>
<span id="cb10-21"><a href="#cb10-21" aria-hidden="true" tabindex="-1"></a> ) <span class="sc">+</span></span>
<span id="cb10-22"><a href="#cb10-22" aria-hidden="true" tabindex="-1"></a> <span class="co"># Appearence type label on each panel</span></span>
<span id="cb10-23"><a href="#cb10-23" aria-hidden="true" tabindex="-1"></a> <span class="fu">geom_text</span>(</span>
<span id="cb10-24"><a href="#cb10-24" aria-hidden="true" tabindex="-1"></a> <span class="at">data =</span> labels,</span>
<span id="cb10-25"><a href="#cb10-25" aria-hidden="true" tabindex="-1"></a> <span class="fu">aes</span>(issue, value, <span class="at">label =</span> label),</span>
<span id="cb10-26"><a href="#cb10-26" aria-hidden="true" tabindex="-1"></a> <span class="at">family =</span> <span class="st">"Reem Kufi"</span>,</span>
<span id="cb10-27"><a href="#cb10-27" aria-hidden="true" tabindex="-1"></a> <span class="at">inherit.aes =</span> <span class="cn">FALSE</span>,</span>
<span id="cb10-28"><a href="#cb10-28" aria-hidden="true" tabindex="-1"></a> <span class="at">size =</span> <span class="fl">4.7</span>,</span>
<span id="cb10-29"><a href="#cb10-29" aria-hidden="true" tabindex="-1"></a> <span class="at">color =</span> <span class="st">"grey25"</span>,</span>
<span id="cb10-30"><a href="#cb10-30" aria-hidden="true" tabindex="-1"></a> <span class="at">fontface =</span> <span class="st">"bold"</span>,</span>
<span id="cb10-31"><a href="#cb10-31" aria-hidden="true" tabindex="-1"></a> <span class="at">lineheight =</span> .<span class="dv">85</span>,</span>
<span id="cb10-32"><a href="#cb10-32" aria-hidden="true" tabindex="-1"></a> <span class="at">hjust =</span> <span class="dv">0</span></span>
<span id="cb10-33"><a href="#cb10-33" aria-hidden="true" tabindex="-1"></a> ) <span class="sc">+</span></span>
<span id="cb10-34"><a href="#cb10-34" aria-hidden="true" tabindex="-1"></a> <span class="co"># Add informative text</span></span>
<span id="cb10-35"><a href="#cb10-35" aria-hidden="true" tabindex="-1"></a> <span class="co"># geom_textbox comes with the great ggtext library.</span></span>
<span id="cb10-36"><a href="#cb10-36" aria-hidden="true" tabindex="-1"></a> <span class="fu">geom_textbox</span>(</span>
<span id="cb10-37"><a href="#cb10-37" aria-hidden="true" tabindex="-1"></a> <span class="at">data =</span> texts,</span>
<span id="cb10-38"><a href="#cb10-38" aria-hidden="true" tabindex="-1"></a> <span class="fu">aes</span>(</span>
<span id="cb10-39"><a href="#cb10-39" aria-hidden="true" tabindex="-1"></a> issue, value, </span>
<span id="cb10-40"><a href="#cb10-40" aria-hidden="true" tabindex="-1"></a> <span class="at">label =</span> text,</span>
<span id="cb10-41"><a href="#cb10-41" aria-hidden="true" tabindex="-1"></a> <span class="at">color =</span> char_costume,</span>
<span id="cb10-42"><a href="#cb10-42" aria-hidden="true" tabindex="-1"></a> <span class="at">color =</span> <span class="fu">after_scale</span>(<span class="fu">darken</span>(color, .<span class="dv">12</span>, <span class="at">space =</span> <span class="st">"HLS"</span>)),</span>
<span id="cb10-43"><a href="#cb10-43" aria-hidden="true" tabindex="-1"></a> <span class="at">vjust =</span> vjust</span>
<span id="cb10-44"><a href="#cb10-44" aria-hidden="true" tabindex="-1"></a> ),</span>
<span id="cb10-45"><a href="#cb10-45" aria-hidden="true" tabindex="-1"></a> <span class="at">family =</span> <span class="st">"Reem Kufi"</span>,</span>
<span id="cb10-46"><a href="#cb10-46" aria-hidden="true" tabindex="-1"></a> <span class="at">size =</span> <span class="fl">2.7</span>,</span>
<span id="cb10-47"><a href="#cb10-47" aria-hidden="true" tabindex="-1"></a> <span class="at">fill =</span> <span class="st">"grey95"</span>,</span>
<span id="cb10-48"><a href="#cb10-48" aria-hidden="true" tabindex="-1"></a> <span class="at">maxwidth =</span> <span class="fu">unit</span>(<span class="fl">7.25</span>, <span class="st">"lines"</span>),</span>
<span id="cb10-49"><a href="#cb10-49" aria-hidden="true" tabindex="-1"></a> <span class="at">hjust =</span> .<span class="dv">5</span></span>
<span id="cb10-50"><a href="#cb10-50" aria-hidden="true" tabindex="-1"></a> ) <span class="sc">+</span> </span>
<span id="cb10-51"><a href="#cb10-51" aria-hidden="true" tabindex="-1"></a> <span class="co"># Customize labels of the horizontal axis</span></span>
<span id="cb10-52"><a href="#cb10-52" aria-hidden="true" tabindex="-1"></a> <span class="fu">scale_x_continuous</span>(</span>
<span id="cb10-53"><a href="#cb10-53" aria-hidden="true" tabindex="-1"></a> <span class="at">limits =</span> <span class="fu">c</span>(<span class="dv">74</span>, <span class="cn">NA</span>),</span>
<span id="cb10-54"><a href="#cb10-54" aria-hidden="true" tabindex="-1"></a> <span class="at">breaks =</span> <span class="fu">c</span>(<span class="dv">94</span>, <span class="fu">seq</span>(<span class="dv">125</span>, <span class="dv">250</span>, <span class="at">by =</span> <span class="dv">25</span>), <span class="dv">280</span>),</span>
<span id="cb10-55"><a href="#cb10-55" aria-hidden="true" tabindex="-1"></a> <span class="at">labels =</span> glue<span class="sc">::</span><span class="fu">glue</span>(<span class="st">"Issue</span><span class="sc">\n</span><span class="st">#{c(97, seq(125, 250, by = 25), 280)}"</span>),</span>
<span id="cb10-56"><a href="#cb10-56" aria-hidden="true" tabindex="-1"></a> <span class="at">position =</span> <span class="st">"top"</span></span>
<span id="cb10-57"><a href="#cb10-57" aria-hidden="true" tabindex="-1"></a> ) <span class="sc">+</span> </span>
<span id="cb10-58"><a href="#cb10-58" aria-hidden="true" tabindex="-1"></a> <span class="fu">scale_y_continuous</span>(<span class="at">expand =</span> <span class="fu">c</span>(.<span class="dv">03</span>, .<span class="dv">03</span>)) <span class="sc">+</span> </span>
<span id="cb10-59"><a href="#cb10-59" aria-hidden="true" tabindex="-1"></a> <span class="co"># This clip="off" is very important. It allows to have annotations anywhere</span></span>
<span id="cb10-60"><a href="#cb10-60" aria-hidden="true" tabindex="-1"></a> <span class="co"># in the plot, no matter they are not within the extent of </span></span>
<span id="cb10-61"><a href="#cb10-61" aria-hidden="true" tabindex="-1"></a> <span class="co"># the corresponding panel.</span></span>
<span id="cb10-62"><a href="#cb10-62" aria-hidden="true" tabindex="-1"></a> <span class="fu">coord_cartesian</span>(<span class="at">clip =</span> <span class="st">"off"</span>)</span>
<span id="cb10-63"><a href="#cb10-63" aria-hidden="true" tabindex="-1"></a> </span>
<span id="cb10-64"><a href="#cb10-64" aria-hidden="true" tabindex="-1"></a>g</span></code></pre></div>
<p><img src="web-streamchart-with-ggstream_files/figure-html/unnamed-chunk-10-1.png" width="95%" style="display: block; margin: auto;" /> <br></p>
<p>Those annotations are definetely a game changer!</p>
</div>
<div id="add-title" class="section level1">
<h1>Add title</h1>
<hr />
<p>There’s been tremendous progress since the first chart. The last step is to add a very cool title that will make this marvelous even more attractive. The function <code>draw_image()</code> from the <a href="https://wilkelab.org/cowplot/index.html"><code>cowplot</code></a> library makes it really easy to add an image on top of the plot. Ready to finish this up? Let’s go!</p>
<div class="sourceCode" id="cb11"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb11-1"><a href="#cb11-1" aria-hidden="true" tabindex="-1"></a>g <span class="ot"><-</span> g <span class="sc">+</span></span>
<span id="cb11-2"><a href="#cb11-2" aria-hidden="true" tabindex="-1"></a> <span class="fu">labs</span>(</span>
<span id="cb11-3"><a href="#cb11-3" aria-hidden="true" tabindex="-1"></a> <span class="at">title =</span> <span class="st">"Appearance of the Five Most Popular X-Men Characters in Chris Claremont's Comics"</span>,</span>
<span id="cb11-4"><a href="#cb11-4" aria-hidden="true" tabindex="-1"></a> <span class="at">caption =</span> <span class="st">"Visualization by Cédric Scherer • Data by Claremont Run Project via Malcom Barret • Popularity Scores by ranker.com • Logo by Comicraft"</span></span>
<span id="cb11-5"><a href="#cb11-5" aria-hidden="true" tabindex="-1"></a> ) </span>
<span id="cb11-6"><a href="#cb11-6" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb11-7"><a href="#cb11-7" aria-hidden="true" tabindex="-1"></a>g <span class="ot"><-</span> <span class="fu">ggdraw</span>(g) <span class="sc">+</span> </span>
<span id="cb11-8"><a href="#cb11-8" aria-hidden="true" tabindex="-1"></a> <span class="co"># It works with only the path to the file! :)</span></span>
<span id="cb11-9"><a href="#cb11-9" aria-hidden="true" tabindex="-1"></a> <span class="fu">draw_image</span>(</span>
<span id="cb11-10"><a href="#cb11-10" aria-hidden="true" tabindex="-1"></a> <span class="st">"img/fromTheWeb/uncannyxmen.png"</span>, </span>
<span id="cb11-11"><a href="#cb11-11" aria-hidden="true" tabindex="-1"></a> <span class="at">x =</span> .<span class="dv">84</span>, <span class="at">y =</span> .<span class="dv">955</span>, </span>
<span id="cb11-12"><a href="#cb11-12" aria-hidden="true" tabindex="-1"></a> <span class="at">width =</span> .<span class="dv">1</span>, </span>
<span id="cb11-13"><a href="#cb11-13" aria-hidden="true" tabindex="-1"></a> <span class="at">hjust =</span> .<span class="dv">5</span>, </span>
<span id="cb11-14"><a href="#cb11-14" aria-hidden="true" tabindex="-1"></a> <span class="at">vjust =</span> .<span class="dv">5</span></span>
<span id="cb11-15"><a href="#cb11-15" aria-hidden="true" tabindex="-1"></a> )</span>
<span id="cb11-16"><a href="#cb11-16" aria-hidden="true" tabindex="-1"></a>g</span></code></pre></div>
<p><img src="web-streamchart-with-ggstream_files/figure-html/unnamed-chunk-11-1.png" width="95%" style="display: block; margin: auto;" /> <br></p>
<p>And finally, if you want to export this streamchart in a high quality format, it’s good to use <code>ggsave</code> with the <code>agg_png</code> device from the <a href="https://ragg.r-lib.org/"><code>ragg</code></a> library.</p>
<div class="sourceCode" id="cb12"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb12-1"><a href="#cb12-1" aria-hidden="true" tabindex="-1"></a><span class="fu">ggsave</span>(<span class="st">"img/fromTheWeb/streamchart-xmen.png"</span>, g, </span>
<span id="cb12-2"><a href="#cb12-2" aria-hidden="true" tabindex="-1"></a> <span class="at">width =</span> <span class="dv">16</span>, <span class="at">height =</span> <span class="dv">13</span>, <span class="at">device =</span> ragg<span class="sc">::</span>agg_png)</span></code></pre></div>
<p><br></p>
</div>
<div id="conclusion" class="section level1">
<h1>Conclusion</h1>
<hr />
<p>Here we are, with a very highly customized plot showcasing the possibilities offered by the tidyverse and other packages like <code>ggstream</code>, <code>ggtext</code>, and many others. Thanks again to Cédric for providing this chart example!</p>
<!-- Close container -->
</div>
</div>
<!-- ============================ RELATED SECTION ============================ -->
<section class="bg-light" id="portfolio_landing" style="padding-top: 30px; padding-bottom: 30px; margin-top: 100px;">
<div class="container">
<p class="mySeryTitle">Related chart types</p>
<hr>
<div class="row">
<div class="col-md-2 col-sm-4 portfolio-item ">
<a class="portfolio-link" href="barplot.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="img/section/Bar150.png" alt="">
</a>
<div class="captionPortfolio">Barplot</div>
</div>
<div class="col-md-2 col-sm-4 portfolio-item ">
<a class="portfolio-link" href="spider-or-radar-chart.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="img/section/Spider150.png" alt="">
</a>
<div class="captionPortfolio">Spider / Radar</div>
</div>
<div class="col-md-2 col-sm-4 portfolio-item ">
<a class="portfolio-link" href="wordcloud.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="img/section/Wordcloud150.png" alt="">
</a>
<div class="captionPortfolio">Wordcloud</div>
</div>
<div class="col-md-2 col-sm-4 portfolio-item ">
<a class="portfolio-link" href="parallel-plot.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="img/section/Parallel1150.png" alt="">
</a>
<div class="captionPortfolio">Parallel</div>
</div>
<div class="col-md-2 col-sm-4 portfolio-item ">
<a class="portfolio-link" href="lollipop-plot.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="img/section/Lollipop150.png" alt="">
</a>
<div class="captionPortfolio">Lollipop</div>
</div>
<div class="col-md-2 col-sm-4 portfolio-item ">
<a class="portfolio-link" href="circular-barplot.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-plus fa-3x"></i>
</div>
</div>
<img class="img-fluid" src="img/section/CircularBarplot150.png" alt="">
</a>
<div class="captionPortfolio">Circular Barplot</div>
</div>
</div>
</div>
</section>
<!-- ============================ CONTACT SECTION ============================ -->
<section id="contact" class="bg" style="background-color: white; padding-top: 60px">
<div class="container">
<div class="row">
<div class="col-lg-2 text-center"></div>
<div class="col-lg-8 text-center">
<br><br><br>
<h2 class="section-heading text-uppercase" style="color: black">Contact</h2>
<p>This document is a work by <a href="https://www.yan-holtz.com">Yan Holtz</a>. Any feedback is highly encouraged. You can fill an issue on <a href="https://github.com/holtzy/D3-graph-gallery/issues">Github</a>, drop me a message on <a href="https://twitter.com/R_Graph_Gallery">Twitter</a>, or send an email pasting <a href="">yan.holtz.data</a> with <a href="">gmail.com</a>.</p>
<div style="text-align:center">
<a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="https://github.com/holtzy">Github</a>
<a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="https://twitter.com/R_Graph_Gallery">Twitter</a>
</div>
</div>
</div>
</div>
</section>
<!-- ============================ FOOTER SECTION ============================ -->
<footer class="bg-light" id="myFooter">
<div class="container" >
<div class="row">
<div class="col-md-4">
<span class="copyright">Copyright © the R graph gallery 2018</span>
</div>
<div class="col-md-4">
<ul class="list-inline social-buttons">
<li class="list-inline-item">
<a href="https://twitter.com/R_Graph_Gallery">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a href="https://github.com/holtzy">
<i class="fa fa-github"></i>
</a>
</li>
<li class="list-inline-item">
<a href="https://www.linkedin.com/in/yan-holtz-2477534a/">
<i class="fa fa-linkedin"></i>
</a>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-inline quicklinks">
<li class="list-inline-item">
<a href="#">Privacy Policy</a>
</li>
<li class="list-inline-item">
<a href="#">Terms of Use</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<script>
// add bootstrap table styles to pandoc tables
function bootstrapStylePandocTables() {
$('tr.header').parent('thead').parent('table').addClass('table table-condensed');
}
$(document).ready(function () {
bootstrapStylePandocTables();
});
</script>
<!-- ============================ JAVASCRIPT SECTION ============================ -->
<!-- Bootstrap core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/agency.min.js"></script>
</body>
</html>