Dendrogram rendering from rainette

[gabrielparriaux]

Hi @juba,

I really like books-html to render my Quarto documents, especially the possibility to have dark mode (and to toggle between light and dark). That’s just… great!

One question I have is about the rendering of a dendrogram coming from rainette_plot().

When I integrate such a plot in my Quarto document and render it as simple html, it is displayed like this:

And when I render the same document with bookup-html+dark, it is displayed like that:

The first version is much more readable than the second. I think the difference is because of the font size (I don’t know if there is something more).

Do you have an idea about how i could improve the rendering of the dendrogram with bookup-html+dark?

Thank you in advance for your help!

[juba]

I can't reproduce the issue, there is no difference here in image rendering between vanilla html and bookup html. In what formats are your images generated ?

[gabrielparriaux]

That’s a very good question… I’m not sure to identify the format, because in the process of Quarto publication, I don’t manage directly the images…

I have a function that produces the plot in a source .R file:

plot_dendrogram <- function() {
  rainette_dendrogram <- rainette_plot(
    res, dfm, k = 25,
    n_terms = 20,
    free_scales = FALSE,
    measure = "chi2",
    show_negative = TRUE,
    text_size = 8
  )
  return(rainette_dendrogram)
}

and in the main Quarto document, a code chunk that calls the function:

#| label: fig-display-clustering
#| output: true
#| echo: false
#| fig-cap: "Dendrogram of clusters produced by Reinert's Clustering"

invisible(plot_dendrogram())

Then I render directly with the visual interface in Rstudio or via Terminal:

quarto render my-quarto-file.qmd --to bookup-html+dark

And the image appears in the html rendered file as shown in my screenshot above. I think the image is encoded in Base64 in the html file, so it’s hard to say what format it is… does it even make sense in this context?

Thanks a lot for your help!

[juba]

If you try with the following qmd file, do you still have the problem ?

---
title: rainette test
standalone: true
format: 
  html: default
  bookup-html+dark: default
---

# Dendrogram

```{r}
#| label: fig-display-clustering
#| output: true
#| echo: false
#| fig-cap: "Dendrogram of clusters produced by Reinert's Clustering"

library(quanteda)
library(rainette)

plot_dendrogram <- function(res, dtm, k) {
  return(rainette_plot(res, dtm, k = 25))
}

corpus <- split_segments(data_corpus_inaugural, segment_size = 40)
tok <- tokens(corpus, remove_punct = TRUE)
tok <- tokens_remove(tok, stopwords("en"))
dtm <- dfm(tok, tolower = TRUE)
dtm <- dfm_trim(dtm, min_docfreq = 10)
res <- rainette(dtm, k = 25, min_segment_size = 15)
invisible(plot_dendrogram(res, dtm, 25))

[gabrielparriaux]

Thank you for providing this test code.

With this code, both images in the rendering (with html or with bookup) are exactly the same. Here is what they look like.

So, they have the same appearance than the rendering I got in my Quarto file with bookup, but it’s the rendering in html which looks different, apparently! I don’t know really why…

The images are not really readable with this formatting… do you have the same on your side?

[juba]

Yes, I get the same result as you.

One way to modify the output would be to change the default figure width and height. Something like this:

```{r}
#| label: fig-display-clustering
#| output: true
#| echo: false
#| fig-cap: "Dendrogram of clusters produced by Reinert's Clustering"
#| fig-width: 12
#| fig-height: 8

invisible(plot_dendrogram(res, dtm, 25))

But I don't really understand why you would get different result with `html` and `bookup`, unless you defined different figure sizes for both...*

As a side note, you can also use lightbox to provide a full screen version when the image is clicked.

[gabrielparriaux]

Ohhh I’m so stupid… I didn’t think of the metadata in the YAML…

And yes, I had a specific image size defined for the html rendering and none for the bookup rendering (and no image size defined in the header of the code chunk itself)…

This is what I had:

---
title: "my title"
author: "me"
date: last-modified
version: 2.3
toc: true
toc-depth: 4
number-sections: true
lightbox: auto
format:
  bookup-html+dark:
    toc: true
    toc-depth: 4
    embed-resources: true
  html:
    code-fold: true
    df-print: kable
    embed-resources: true
    number-offset: 0
    fig-width: 18
    fig-height: 12
---

I tried to add the same:

    fig-width: 18
    fig-height: 12

for bookup-html+dark and now the rendering is exactly the same!

I’m sorry for bothering you unnecessarily 😰.

[juba]

No problem ! Glad it is fixed :smiley: