How to Create a CreateCustomTable R Table of Images

This article describes how to create a CreateCustomTable R table (similar to a table with Autofit checked) below a visualization that aligns logos corresponding to the columns:

Requirements

A visualization connected to a table. In this example, the table has been sorted based on percentage:

A table of logo URLs saved in Excel or similar, containing the Brand name:

Note: If the images are stored on the Displayr Cloud Drive, the files need to be shared first. Use the publicly available URL when populating the table of logo URLs. See here for information on sharing files stored on the Displayr Cloud Drive. 

Method

1. Select your table of logo URLs in Excel and press CTRL + C.

2. Go to your document page and press CTRL + V. This will create a pasted R table on your page.

3. Right-click the table and select Hide, then drag the table off the page. By default, it will be called Pasted.table.data.

4. Click Calculation > Custom Code from the toolbar.

5. Click on the page to place the object.

6. In the R Code editor, paste the following.

tab = Pasted.table.data
sorted.table = my.sorted.table

# match table order
m = match(rownames(sorted.table),tab[,"Brand"])
tab = tab[m,]

# set image urls
img = tab[,"URL"]
urls = paste0("<img style='margin:0 auto;' width='50' src='", img, "'>")

# create custom table
flipFormat::CreateCustomTable(urls, transpose = T)

7. On the second line of the code, replace "my.sorted.table" with the table General > General > Name in the object inspector . This is the reference table that's used in the visualization in the above example, and the images will be output in the same order as the rows in this table.  The rest of the code does the following:

• It gets the URL/link data from the pasted URL table and the order of the images from the sorted.table.
• We use the match function to ensure that the logos/URLs from the URL table are returned in the same order as the corresponding labels in the reference table's row names.  It is important that the label in the URL table exactly matches the row labels in the reference table.  If they don't, the matching function won't be able to pick up on the relationship.
• The URLs are then placed within an img HTML tag with styling to automatically center and assign the width.
• Finally, we use flipFormat's CreateCustomTable function to display the images and transpose them as a single row.

8. Re-position and re-size your custom table of images by dragging until it lines up with your visualization with the correct spacing.

Change the Image Direction

The above will output the logos horizontally. If you want to show the logos vertically, on the last line of the code, change:

transpose = T

to

transpose = F

Set the Background to Transparent

By default, the CreateCustomTable function will have a white cell fill and white cell borders.  To change these to transparent, change:

flipFormat::CreateCustomTable(urls, transpose = T)

to

flipFormat::CreateCustomTable(urls, transpose = F, 
border.color = "transparent", cell.fill = "transparent")

Next

How to Link Images to a Visualization

CreateCustomTable

How to Use R in Displayr