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 clicking Settings 26UI_DocumentSettings.png > Document Layout > 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 Image 26UI_Image.png > Browse Computer and selecting the location where the infographic is stored.
  3. Click on the page to place the image.
  4. Move and resize the image to fit the page (tip: you can use the Appearance > Layout settings in the object inspector 26UI_ObjectInspector.png to type in the width, length, rotation, etc. to reset the correct aspect ratio of the image).
  5. 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 General > Image Compression in the object inspector 26UI_ObjectInspector.png.

  6. Hook up the data that you will use in the infographic. 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:

    • In the Data Sources tree, click the Plus.png to add a new data set.
    • Select Paste or Enter Data.
    • Paste or enter your data into the spreadsheet window and click OK.
    • A summary table will appear in your Data Sources tree that you can use as the data input.
    • Drag the summary table item in the Data Sources tree off to the side of the page to create a table. You might be prompted to indicate which rows and columns to include.
    • Hide this 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.

    InfographicTables.png

  7. Next, I added a control so that the user can change the geography to see the corresponding results. From the toolbar, go to Control 26UI_Control.png > Combo Box (Drop-Down).
  8. In the object inspector, go to Control and enter the following for the Item list: China, US, Europe.
  9. Under General > General > Name, name the control Country. This name will be used in the R code when creating charts.
  10. Move the drop-down combo box to the top of the screen and style as desired (font size, color, border).
  11. Insert a text box by clicking Text 26UI_TextBox.png from the toolbar 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
  12. Next, I created charts for each section of the infographic. From the toolbar, go to Calculation 26UI_Calculation.png > Custom Code.
  13. For the column chart, paste the following R code into the code editor 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)

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

mceclip5.png

15. For the column chart, paste the following code into the code editor and click Calculate.

AverageAge[,Country2]

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

mceclip6.png

17. For the hearts visual, paste the following code into the code editor 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" )

18. The R code used to create the textbox below the hearts visual is below.

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

mceclip7.png

19. For the pie chart, paste the following code into the code editor 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 = "%")

20. 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.

Related articles