This article describes how to go from a standard visualization:
To a visualization that includes images, such as brand logos, which will update along with the visualization if the data changes:
Requirements
- A data set
- Images from a URL location (eg, imgur, Google Photos, Dropbox, etc.)
Method
- Create a table that contains the URLs of the images by going to Table > Paste or Enter Table.
- From the object inspector, go to Inputs > DATA SOURCE > Paste or type data.
- Paste or type the item name and its associated URL into the sheet and click OK:
- If your table first appears with numbers in the first column, as seen below:
You will need to go to Inputs > DATA MANIPULATION and untick Automatically detect row and column names and select First row contains column names and First column contains row names so that your table appears as:
5. Create a table from the variable that you'll use to create the visualization. You can do this by dragging the variable onto your page:
6. Select both of the tables that were created in Steps 4 and 5 above, and click Combine from the toolbar.
7. From the object inspector, ensure that Inputs > Combine Tables > Join direction > Side-by-side and Non-matching rows/columns > Matching only is selected.
8. To sort the data from highest to lowest, you'll want to add some lines of code to the merged object. Select the merged table, and from the object inspector, go to Properties > R CODE and add this final line:
merged[order(merged[,2], decreasing = TRUE),]
In the code, I have used "2" to indicate that the table should be sorted on the second column of data. You may need to update this based on the column position of your numeric data.
9. The second column of the merged table will need to be extracted for the visualization. From the toolbar, go to Calculation > Custom Code, then click onto the page to place the custom calculation.
10. Paste the following into the R CODE area:
sorteddata = as.numeric(merged[,2])
sorteddata = as.data.frame(sorteddata)
rownames(sorteddata) = rownames(merged)
sorteddata
In the first line of code, I have used "2" to reference the second column in the merged table again.
11. Go to Visualization > Bar Chart (or the visualization type of your choice).
12. From the object inspector, go to Inputs > DATA SOURCE > Output in 'Pages' and select the output created in Step 10.
13. Next, you will create the outputs that contain the images for your visualization. Go to Calculation > Custom Code and click onto the page to create the custom calculation.
14. Paste the following code into the R CODE area:
item = 1
src = merged[item,"Src"]
alt = rownames(merged)[item]
text = paste0(
'<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.responsive {
width: 100%;
height: auto;
}
</style>
</head><body><img src="',
src,
'" alt="',
alt,
'" class="responsive">
</body>')
rhtmlMetro::Box(text,text.as.html = TRUE)
Next
How to Add Logos to a Scatter Plot
How to Add Images to a Correspondence Analysis Map