Why won't a correlation matrix plot render when formatting with Typst?

[baker-jr-john]

Description

Hi! 👋 I'm trying to render a correlation matrix from a .qmd file to .pdf using the Typst format in RStudio. The plot displays as expected in RStudio, but only a black rectangle is in the .pdf.

I'm using Quarto 1.4.550 with macOS 14.4.1. Here's a reproducible example:

---
title: "Impact of House Features on Sale Prices"
author:   
  - John Baker
format:
  typst:
    toc: true
    number-sections: true
---
```{r}
# Load libraries
library(ggplot2)
library(ggcorrplot)

# Load vectors
Id <- c(1, 2, 3, 4, 5)
MSSubClass <- c(60, 20, 60, 70, 60)
MSZoning <- as.factor(c("RL", "RL", "RL", "RL", "RL"))
LotFrontage <-
  c(65, 80, 68, 60, NA) # Assuming NA for missing values
LotArea <- c(8450, 9600, 11250, 9550, 14260)
Street <- as.factor(c("Pave", "Pave", "Pave", "Pave", "Pave"))

# Combine into a data frame
df <-
  data.frame(Id, MSSubClass, MSZoning, LotFrontage, LotArea, Street)

# Select only numeric columns from train_data
numeric_cols <- sapply(df, is.numeric)
train_numeric <- df[, numeric_cols]

# Calculate the correlation matrix
corrmat <- cor(train_numeric, use = "pairwise.complete.obs")

# Create the correlation plot using ggcorrplot
ggcorrplot(corrmat,
           hc.order = TRUE,
           tl.cex = 5)
```

I appreciate your help!

[cscheid]

Can you provide an example that doesn't need that train.csv file? Thanks.

[baker-jr-john]

I updated my example.

[mcanouil]

The issue is the format of the figure.
If you set fig-format: png it works.

---

You can look at the intermediate markdown and typst file using the keep-* options:

---
title: "Impact of House Features on Sale Prices"
author:   
  - John Baker
format:
  typst:
    toc: true
    number-sections: true
    keep-md: true
    keep-typ: true
---

[cscheid]

I think this is a limitation on Typst's SVG renderer. Typst attempts to render SVG directly into the PDF and the SVG being emitted is not being handled correctly.

[baker-jr-john]

I was hoping it was something else. It doesn't look so good as a .png, but it works. I appreciate it! I hope they fix this.

[cscheid]

@baker-jr-john You'll need to either take the resulting .typ file with the SVG and file a bug at https://github.com/typst/typst or use a different rendering format as @mcanouil suggested. Cf https://typst.app/docs/reference/visualize/image/:

Note: Work on SVG export is ongoing and there might be visual inaccuracies in the resulting PDF. Make sure to double-check embedded SVG images. If you have an issue, also feel free to report it on GitHub.

From inspecting the .svg file, I suspect the issue is that this file uses SVG filters. Using plain ggplot() calls produces a file that works with Typst and doesn't have SVG filters like these:

<filter id="filter-remove-color-and-invert-alpha" x="0%" y="0%" width="100%" height="100%">
<feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -1 1"/>
</filter>
<filter id="filter-0" x="0%" y="0%" width="100%" height="100%">
<feImage xlink:href="#compositing-group-1" result="source" x="0" y="0" width="475.2" height="302.4"/>
<feImage xlink:href="#compositing-group-2" result="destination" x="0" y="0" width="475.2" height="302.4"/>
<feComposite in="source" in2="destination" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" color-interpolation-filters="sRGB"/>
</filter>

[cscheid]

It looks like this definition is ultimately coming from Cairo's SVG device: https://github.com/search?type=code&auto_enroll=true&q=filter-remove-color-and-invert-alpha+language%3AC&l=C