<p><div><div><div><div data-show-faces="false" data-height="21" data-width="100" data-layout="button_count" data-send="true" data-href="https://www.r-bloggers.com/how-to-create-an-interactive-infographic/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="https://www.displayr.com/how-to-create-an-interactive-infographic/?utm_medium=Feed&utm_source=Syndication"> R – Displayr</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<p><img sizes="(max-width: 780px) 100vw, 780px" src="https://i2.wp.com/www.displayr.com/wp-content/uploads/2017/09/Interactive-infographic-2.png?w=450&ssl=1" alt="Interactive infographic" class="wp-image-3659" data-recalc-dims="1"></p>
<p>An interactive infographic can be used to communicate a lot of information in an engaging way. With the right tools, they are also relatively straightforward to create. In this post, I show step-by-step how to create <a rel="nofollow" href="https://app.displayr.com/Dashboard?id=ae0c9fef-9b38-46f1-bbda-1b262426833c" target="_blank">this interactive infographic</a>, using Canva, Displayr and R code. The interactive example is designed so that the user can change the country and have the infographic update automatically.</p>
<p>Tools used to create an interactive infographic: Canva is used to create the base infographic. The calculations, charting, and automatic text-writing are performed using the R language. It is all hooked up with Displayr.</p>
<hr>
<h2><span>Step 1: Create or download the infographic</span></h2>
<p>I start by going to <a rel="nofollow" href="http://www.canva.com/" target="_blank">Canva</a>, and choosing the <em>Neat Interactive Gaming Infographic </em>(tip: use Find Templates on the left-hand panel)<em>.</em> You could, of course, design your own infographic, either in Canva or elsewhere. I like Canva, but the key thing is to create an infographic image some way. In Canva, I edited the template by deleting the bits that I wanted to replace with interactive charts and visualizations and then I download the infographic as a PNG file (2,000 pixels high by 800 wide).</p>
<p> </p>
<p><img sizes="(max-width: 160px) 100vw, 160px" src="https://i0.wp.com/www.displayr.com/wp-content/uploads/2017/09/Neat-Illustrated-Gaming-Infographic-410x1024.png?resize=160%2C400&ssl=1" alt="Interactive infographic example" class="wp-image-3550" data-recalc-dims="1">      <img sizes="(max-width: 160px) 100vw, 160px" src="https://i0.wp.com/www.displayr.com/wp-content/uploads/2017/09/Neat-Illustrated-Gaming-Infographic-2-410x1024.png?resize=160%2C400&ssl=1" alt="Interactive infographic example" class="wp-image-3583" data-recalc-dims="1"></p>
<hr>
<h2><span>Step 2: Import the infographic into Displayr</span></h2>
<p>Create an account in <a rel="nofollow" href="http://www.displayr.com/" target="_blank">Displayr</a>, and then click the button that says <strong>+ New Document</strong>. Set the page size to the same aspect ratio as the PNG file <strong>(Home > Page Layout > Layout > Page Size > Custom</strong>).  For this example, the page should be 20 inches high and 8 inches wide.</p>
<p>Next, insert the infographic into Displayr <strong>(Insert ></strong> <strong>Image</strong>), move and resize it to fit the page (tip: you can use the <span>Properties</span> panel on the right to type in pixels 800 x 2000 to reset the correct aspect ratio of the image).</p>
<p> </p>
<hr>
<h2><span>Step 3: Get the data into Displayr</span></h2>
<p><img sizes="(max-width: 347px) 100vw, 347px" src="https://i1.wp.com/www.displayr.com/wp-content/uploads/2017/09/GamerData-1.png?resize=347%2C290&ssl=1" alt="" class="wp-image-3594" data-recalc-dims="1"></p>
<p>The data that will make the infographic interactive needs to be hooked up in Displayr. The data used to create the infographic in this example is shown to the right. There are lots of ways to import data into Displayr (e.g., importing a raw data file and creating the tables in Displayr). For this example, the data has been pasted into Displayr from Excel using the steps below.</p>
<p>To paste the data into Displayr:</p>
<ul>
<li><strong>Insert > Paste Table (Data)</strong>, click <strong>Add data </strong>(on the right of the screen).</li>
<li>Paste in the data. Alternatively, you could type it into this screen. I first just pasted in the <strong>Age Distribution </strong>data and press <strong>OK. </strong></li>
<li><span><span>Properties</span></span><strong> > <span>GENERAL</span> </strong>and type <span>AgeDistribution</span> into the <strong>Label </strong>field and check the <strong>Automatic </strong>option (above).</li>
<li>Drag the table so that it is to the left of the infographic.</li>
<li>Hide the table (select it, <strong>Appearance > Hide</strong>). It will stay visible but will be invisible when you share the infographic.</li>
</ul>
<p>Repeat this process for <span>AverageAge</span>, <span>Ratio</span>, and <span>Multiplayer</span>. It is important that you give each of these tables these names, as we refer to them later in our R code.</p>
<hr>
<h2><span>Step 4: Add the country selector</span></h2>
<p>Next, I add a control so that the user can change country:</p>
<ul>
<li><strong>Insert > Control</strong></li>
<li><strong>Item list: </strong><span>China, US, Europe</span></li>
<li>Move it to the top of the screen and style as desired (font size, color, border)</li>
<li><strong>Name: </strong>Click on the control and select <strong>China</strong></li>
<li><span><span>Properties</span></span><strong> > <span>GENERAL</span> > Name: </strong><span>Country</span></li>
</ul>
<p>I then insert a text box (“GAMERS”), and placed it to the left of the control (i.e.: font: Impact, size: 48, color: #ffb600).</p>
<p><img sizes="(max-width: 435px) 100vw, 435px" src="https://i0.wp.com/www.displayr.com/wp-content/uploads/2017/09/GamersHeading.png?resize=435%2C174&ssl=1" alt="Image of Let's play on! Gamers: China" class="wp-image-3588" data-recalc-dims="1"></p>
<hr>
<h2><span>Step 5: Create the charts and visualizations in R</span></h2>
<p>Finally, create the charts and visualizations in Displayr using the following R code.</p>
<h3><span>The column chart</span></h3>
<p>I created the column chart using my colleague Carmen’s nifty wrapper-function for <span>plotly. </span>Insert an R Output in Displayr (<strong>Insert > R Output</strong>), and copy and paste the following code, pressing <span><strong>Calculate<span> </span></strong></span>and resizing moving and resizing the chart.</p>
<pre> 
flipStandardCharts::Chart(AgeDistribution[, Country], 
 type = &quot;Column&quot;,
 background.fill.color = &quot;#212121&quot;,
 charting.area.fill.color = &quot;#212121&quot;,
 colors = &quot;tiel&quot;, 
 x.tick.font.color = &quot;white&quot;,
 x.tick.font.size = 20,
 x.grid.width = 0,
 y.tick.font.color = &quot;white&quot;,
 y.tick.font.size = 20,
 y.title = &quot;%&quot;,
 y.title.font.color = &quot;white&quot;,
 y.grid.width = 0)
</pre>
<hr>
<h3><span>Average age</span></h3>
<p>The average age was also created by inserting an R Output, using the code below. While I could have written the formatting in R, I instead used the various formatting tools built into Displayr (<span><u>Properties</u> </span><strong>></strong><span>LAYOUT </span>and <span><u>Properties</u> </span><strong>> </strong><span>APPEARANCE</span>).</p>
<pre> 
AverageAge[,Country]
</pre>
<hr>
<h3><span>The hearts pictograph</span></h3>
<p>This was also done using an R Output in Displayr, with the following code (using R GitHub packages built by my colleagues Kyle and Carmen).</p>
<pre> 
women = Ratio[&quot;Women&quot;, Country]
total = sum(Ratio[, Country])
flipPictographs::SinglePicto(women, total,
    layout = &quot;Number of columns&quot;,
    number.cols = 5, 
    image = &quot;Heart&quot;, 
    hide.base.image = FALSE,
    auto.size = TRUE,
    fill.icon.color = &quot;red&quot;,
    base.icon.color = &quot;cyan&quot;,
    background.color =&quot;#212121&quot; )
</pre>
<p>The R code used to create the textbox is below (tip: toggle on Wrap text output at the bottom of the <strong>Properties</strong> panel on the right)</p>
<pre> 
women = Ratio[&quot;Women&quot;, Country]
total = sum(Ratio[, Country])
paste0(women, &quot; IN &quot;, total, &quot; GAMERS ARE WOMEN&quot;)
</pre>
<hr>
<h3><span>The pie chart</span></h3>
<p>This is the R code for the pie chart:</p>
<pre> 
flipStandardCharts::Chart(Multiplayer[, Country],
    type = &quot;Pie&quot;, 
    colors = c(rgb(175/255, 224/255, 170/255), rgb(0/255, 181/255, 180/255)),
    data.label.font.color = &quot;White&quot;,
    data.label.font.size = 18,
    data.label.decimals = 0,
    data.label.suffix = &quot;%&quot;)
</pre>
<p>The R code used to create the textbox was:</p>
<pre> 
one.player = Multiplayer[&quot;1 player&quot;, Country]
paste0(one.player, &quot;% OF PEOPLE PLAY VIDEO GAMES ON THEIR OWN&quot;)
</pre>
<hr>
<h2><span>Create the interactive infographic yourself</span></h2>
<p>Sign in to Displayr and <a rel="nofollow" href="https://app.displayr.com/Try/Interactive%20Infographic" target="_blank">edit the document used to create the interactive infographic here</a>. In <strong>Edit</strong> mode you can click on each of the charts, pictographs, and text boxes to see the underlying code. The final document was published (i.e., turned into a Dashboard) using <strong>Export > Web Page</strong>. Or you can<a rel="nofollow" href="https://app.displayr.com/Dashboard?id=ae0c9fef-9b38-46f1-bbda-1b262426833c" target="_blank"> view the interactive infographic</a> created using the instructions above.</p>
	<p>
<div>
<div>To <strong>leave a comment</strong> for the author, please follow the link and comment on their blog: <strong><a href="https://www.displayr.com/how-to-create-an-interactive-infographic/?utm_medium=Feed&utm_source=Syndication"> R – Displayr</a></strong>.</div>
<hr>
<a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers.com</a> offers <strong><a rel="nofollow" href="https://feedburner.google.com/fb/a/mailverify?uri=RBloggers">daily e-mail updates</a></strong> about <a rel="nofollow" href="https://www.r-project.org/" title="The R Project for Statistical Computing">R</a> news and <a rel="nofollow" href="https://www.r-bloggers.com/search/tutorial" title="R tutorials">tutorials</a> on topics such as: <a rel="nofollow" href="https://www.r-bloggers.com/search/data%20science" title="Data science">Data science</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/Big%20Data" title="Big Data">Big Data, <a rel="nofollow" href="https://www.r-users.com/" title="R jobs">R jobs</a>, visualization (<a rel="nofollow" href="https://www.r-bloggers.com/search/ggplot2" title="ggplot and ggplot2 tutorials">ggplot2</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/boxplot" title="Boxplots using lattice and ggplot2 tutorials">Boxplots</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/map" title="Maps and gis">maps</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/animation" title="Animation in R">animation</a>), programming (<a rel="nofollow" href="https://www.r-bloggers.com/search/RStudio" title="RStudio IDE for R">RStudio</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/sweave" title="Sweave and literate programming">Sweave</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/LaTeX" title="LaTeX in R">LaTeX</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/SQL" title="SQL and databases">SQL</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/eclipse" title="Eclipse IDE for R">Eclipse</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/git" title="git and github, Version Control System">git</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/hadoop" title="Large data in R using Hadoop">hadoop</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/Web+Scraping" title="Web Scraping of google, facebook, yahoo, twitter and more using R">Web Scraping</a>) statistics (<a rel="nofollow" href="https://www.r-bloggers.com/search/regression" title="Regressions and ANOVA analysis tutorials">regression</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/PCA" title="principal component analysis tutorial">PCA</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/time+series" title="Time series">time series</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/trading" title="finance trading">trading</a>) and more...
<img width="1" alt="" src="http://feeds.feedburner.com/~r/RBloggers/~4/UxExIND2Z8M" height="1"></a></div>