photo alignment with graph in r

Question

First I thought I need to it manually in powerpoint, then I thought may be try with R, if there is a solution. Here is my example data:

set.seed(123)
myd<- expand.grid('cat' = LETTERS[1:5], 'cond'= c(F,T), 'phase' = c("Interphase", "Prophase", "Metaphase", "Anaphase", "Telophase"))
myd$value <- floor((rnorm(nrow(myd)))*100)
myd$value[myd$value < 0] <- 0

require(ggplot2)
ggplot() +
  geom_bar(data=myd, aes(y = value, x = phase, fill = cat), stat="identity",position='dodge') +
  theme_bw()

Here is what output should look like:

The jpeg image can be randomly generated (to demo examples) or example figures at the links:

Interphase prophase , metaphase, anaphase , telophase

Edit:

Suggestion @bapste

Answer 1

You can create a custom element function for axis.text.x, but it's quite fiddly and convoluted. Similar requests have been made in the past, it would be nice to have a clean solution for this and other custom changes (strip labels, axes, etc.) Feature request, anyone?

library(jpeg)
img <- lapply(list.files(pattern="jpg"), readJPEG )
names(img) <- c("Anaphase", "Interphase", "Metaphase", "Prophase", "Telophase")

require(ggplot2)
require(grid)

# user-level interface to the element grob
my_axis = function(img) {
    structure(
      list(img=img),
      class = c("element_custom","element_blank", "element") # inheritance test workaround
    )
  }
# returns a gTree with two children: the text label, and a rasterGrob below
element_grob.element_custom <- function(element, x,...)  {
  stopifnot(length(x) == length(element$img))
  tag <- names(element$img)
  # add vertical padding to leave space
  g1 <- textGrob(paste0(tag, "\n\n\n\n\n"), x=x,vjust=0.6)
  g2 <- mapply(rasterGrob, x=x, image = element$img[tag], 
               MoreArgs = list(vjust=0.7,interpolate=FALSE,
                               height=unit(5,"lines")),
               SIMPLIFY = FALSE)

  gTree(children=do.call(gList,c(g2,list(g1))), cl = "custom_axis")
}
# gTrees don't know their size and ggplot would squash it, so give it room
grobHeight.custom_axis = heightDetails.custom_axis = function(x, ...)
  unit(6, "lines")

ggplot(myd) +
  geom_bar(aes(y = value, x = phase, fill = cat), stat="identity", position='dodge') +
  theme_bw() +
  theme(axis.text.x = my_axis(img),
          axis.title.x = element_blank())

ggsave("test.png",p,width=10,height=8)

Answer 2

Using grid package, and playing with viewports, you can have this

## transform the jpeg to raster grobs
library(jpeg)
names.axis <-  c("Interphase", "Prophase", "Metaphase", "Anaphase", "Telophase")
images <- lapply(names.axis,function(x){
  img <- readJPEG(paste('lily_',x,'.jpg',sep=''), native=TRUE)
  img <- rasterGrob(img, interpolate=TRUE)
  img
  } )
## main viewports, I divide the scene in 10 rows ans 5 columns(5 pictures)
pushViewport(plotViewport(margins = c(1,1,1,1),
             layout=grid.layout(nrow=10, ncol=5),xscale =c(1,5)))
## I put in the 1:7 rows the plot without axis
## I define my nested viewport then I plot it as a grob.
pushViewport(plotViewport(layout.pos.col=1:5, layout.pos.row=1:7,
             margins = c(1,1,1,1)))
pp <- ggplot() +
  geom_bar(data=myd, aes(y = value, x = phase, fill = cat), 
                 stat="identity",position='dodge') +
  theme_bw()+theme(legend.position="none", axis.title.y=element_blank(),
                   axis.title.x=element_blank(),axis.text.x=element_blank())
gg <- ggplotGrob(pp)
grid.draw(gg)
upViewport()
## I draw my pictures in between rows 8/9 ( visual choice)
## I define a nested Viewport for each picture than I draw it.
sapply(1:5,function(x){
  pushViewport(viewport(layout.pos.col=x, layout.pos.row=8:9,just=c('top')))
  pushViewport(plotViewport(margins = c(5.2,3,4,3)))
  grid.draw(images[[x]])
  upViewport(2)
  ## I do same thing for text 
  pushViewport(viewport(layout.pos.col=x, layout.pos.row=10,just=c('top')))
  pushViewport(plotViewport(margins = c(1,3,1,1)))
    grid.text(names.axis[x],gp = gpar(cex=1.5))
  upViewport(2)
})
pushViewport(plotViewport(layout.pos.col=1:5, layout.pos.row=1:9,
             margins = c(1,1,1,1)))
grid.rect(gp=gpar(fill=NA))
upViewport(2)

Answer 3

I would now do this with the ggtext package. This is conceptually similar to the solution suggested here but with the hard work done in the package.

library(tidyverse)
library(ggtext)

set.seed(123)

data <- expand.grid(
  cat = LETTERS[1:5],
  cond= c(FALSE, TRUE),
  phase = c("Interphase", "Prophase", "Metaphase", "Anaphase", "Telophase")
) %>%
  mutate(
    value = floor(rnorm(n())*100),
    value = ifelse(value < 0, 0, value)
  )

# images from: http://www.microbehunter.com/mitosis-stages-of-the-lily/

labels <- c(
  Interphase = "<img src='img/interphase.jpg' width='60' /><br>Interphase",
  Prophase = "<img src='img/prophase.jpg' width='60' /><br>Prophase",
  Metaphase = "<img src='img/metaphase.jpg' width='60' /><br>Metaphase",
  Anaphase = "<img src='img/anaphase.jpg' width='60' /><br>Anaphase",
  Telophase = "<img src='img/telophase.jpg' width='60' /><br>Telophase"
)

ggplot(data, aes(phase, value, fill = cat)) +
  geom_col(position = "dodge") +
  scale_x_discrete(name = NULL, labels = labels) +
  theme(axis.text.x = element_markdown(lineheight = 1.2))

^{Created on 2020-01-29 by the reprex package (v0.3.0)}