Articles in this section

How to Create an Interactive Infographic

  • Updated
Follow

This article describes how to create an interactive infographic using Displayr, Canva, and R code. The interactive example is designed so that the user can change the geography and the infographic updates automatically.

mceclip0.png

 

Requirements

Tools used to create an interactive infographic:

  • An infographic. Canva was used to create the base infographic in this example.
      • I started by going to Canva, and choosing the Neat Interactive Gaming Infographic (tip: click on the Templates section to search). I edited the template by deleting the bits that I wanted to replace with interactive charts and visualizations and then downloaded the infographic as a PNG file:

.mceclip1.png

      • You could design your own infographic, either in Canva or elsewhere.
  • A data set that contains various data that you would like to display.

 

Method

  1. In your Displayr document, set the page size to the same aspect ratio as the PNG file that you're using as your infographic by selecting a page from the Pages tree or clicking in a blank space on a page. Then, from the object inspector, go to Pages > DOCUMENT LAYOUT > Page size (all pages) > Custom and set the Width (inches) and Height (inches). For this example, the page should be 20 inches high and 8 inches wide.

  2. Next, insert the downloaded infographic by going to Anything > Page Design > Image and select the location where the infographic is stored.

  3. Move and resize the image to fit the page (tip: you can use the appearance > LAYOUT settings on the right to type in the width (800) x length (2000) to reset the correct aspect ratio of the image).

  4. Images are automatically compressed to optimize resolution vs load time in browsers online. You may wish to turn this off or also enable it for exporting via the Properties > IMAGE COMPRESSION menu.

  5. Hook up the data that you will use in the infographic. There are lots of ways to import data into Displayr (eg, 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:

    • From the toolbar, go to Table > Paste or Enter Table.
    • In the object inspector, go to Data > DATA SOURCE > Paste or type data.
    • Paste in the data. Alternatively, you could type it into the screen. For my first table, I pasted in Age Distribution data and clicked OK.mceclip2.png
    • Under General > GENERAL, I've updated the table Name to AgeDistribution and ticked the Automatic option.
    • Drag the table off to the side of the page.
    • Hide the table by right-clicking and selecting Hide. It will stay visible but will be invisible when you share the infographic.

    I repeated this process for AverageAge, Ratio, and Multiplayer data.

    mceclip3.png
  6. Next, I added a control so that the user can change the geography to see the corresponding results. From the toolbar, go to Anything > Page Design > Control > Combo Box (Drop-Down).
  7. In the object inspector, go to Control and enter the following for the Item list: China, US, Europe.
  8. Under General > GENERAL > Name name the control Country. This name will be used in the R code when creating charts.
  9. Move the drop-down combo box to the top of the screen and style as desired (font size, color, border).
  10. Insert a text box by going to Anything > Page Design > Text Box and place it to the left of the control. I typed "GAMERS" into the text box and updated the font style, size, and color:mceclip4.png
  11. Next, I created charts for each section of the infographic. From the toolbar, go to Calculation > Custom Code.
  12. For the column chart, paste the following code into the R CODE expression and click Calculate. 
flipStandardCharts::Chart(AgeDistribution[, Country], 
type = "Column",
background.fill.color = "#212121",
charting.area.fill.color = "#212121",
colors = "tiel", 
x.tick.font.color = "white",
x.tick.font.size = 20,
x.grid.width = 0,
y.tick.font.color = "white",
y.tick.font.size = 20,
y.title = "%",
y.title.font.color = "white",
y.grid.width = 0)

13. Resize and move the chart to the appropriate place in the infographic:

mceclip5.png

14. For the column chart, paste the following code into the R CODE expression and click Calculate.

AverageAge[,Country2]

15. Update the font style, size, and color as desired.

mceclip6.png

16. For the hearts visual, paste the following code into the R CODE expression and click Calculate.

women = Ratio["Women", Country]
total = sum(Ratio[, Country])
flipPictographs::SinglePicto(women, total,
layout = "Number of columns",
number.cols = 5, 
image = "Heart", 
hide.base.image = FALSE,
auto.size = TRUE,
fill.icon.color = "red",
base.icon.color = "cyan",
background.color ="#212121" )

17. The R code used to create the textbox below the hearts visual is below (tip: toggle on Wrap text output in Appearance > LAYOUT in the object inspector).

women = Ratio["Women", Country]
total = sum(Ratio[, Country])
paste0(women, " IN ", total, " GAMERS ARE WOMEN")

mceclip7.png

18. For the pie chart, paste the following code into the R CODE expression and click Calculate.

flipStandardCharts::Chart(Multiplayer[, Country],
type = "Pie", 
colors = c(rgb(175/255, 224/255, 170/255), rgb(0/255, 181/255, 180/255)),
data.label.font.color = "White",
data.label.font.size = 18,
data.label.decimals = 0,
data.label.suffix = "%")

19. And the R code used to create the textbox:

one.player = Multiplayer["1 player", Country]
paste0(one.player, "% OF PEOPLE PLAY VIDEO GAMES ON THEIR OWN")

mceclip8.png

You can now toggle the combo box to other countries and see the results automatically update in the infographic.

Next

Canva's Free Infographic Maker

Related articles