svglite
svglite copied to clipboard
Scaling problem when some graphs are identical.
I created a R markdown file which creats pie charts by using ggplot2
and svglite
, specifying the width and heights by fig.width
and fig.height
option and their magnifying rate by out.width
and out.height
option as follows.
---
title: "Pie Chart"
output: html_document
---
knitr::opts_chunk$set(echo = TRUE)
knitr::opts_chunk$set(dev = 'svglite',
fig.width = 8,
fig.height = 6,
out.width = "50%",
out.height = "50%")
library(tidyverse)
library(svglite)
set.seed(1)
n <- 10
data <- data.frame(q1 = as.factor(floor(runif(n) * 5)),
q2 = as.factor(floor(runif(n) * 5)),
q3 = as.factor(floor(runif(n) * 5)),
q4 = as.factor(floor(runif(n) * 5)),
q5 = as.factor(floor(runif(n) * 5)))
data <- with(data, data.frame(data, q6 = q3[order(runif(n))],
q7 = q2[order(runif(n))],
q8 = q1[order(runif(n))],
q9 = q3[order(runif(n))],
q10 = as.factor(floor(runif(n) * 5)))
)
draw_graph <- function(var){
var <- enquo(var)
df <- data %>%
mutate(qq = !!var) %>%
group_by(qq) %>% # Variable to be transformed
count() %>%
ungroup() %>%
mutate(perc = `n` / sum(`n`)) %>%
arrange(perc) %>%
mutate(labels = scales::percent(perc))
ggplot(df, aes(x = "", y = perc, fill = qq)) +
geom_col() +
geom_text(aes(label = labels),
position = position_stack(vjust = 0.5)) +
coord_polar(theta = "y", direction = -1) +
theme_void() +
theme(legend.title=element_blank())
}
draw_graph(q1)
draw_graph(q2)
draw_graph(q3)
draw_graph(q4)
draw_graph(q5)
draw_graph(q6)
draw_graph(q7)
draw_graph(q8)
draw_graph(q9)
draw_graph(q10)
Then, I expected all graphs generated to have exactly the same graph size, but the result was different: some were at half size as specified but the others were not. I used the latest versions of R and all packages as of 18th June 2024. The generated html file is attatched by changing its extension from html to txt.
I scrutinized the generated html file in which svg files were embedded, Then, I thought the problem is the html code like below.
<pre class="r"><code> draw_graph(q1)</code></pre>
<p><svg class="svglite" viewBox="0 0 576.00 432.00"><use href="#svg_32f4093acc38ab3a5579" width="100%" height="100%" /></svg></p>
In fact, in the example above, some graphs are identical: q1
= q8
, q2
= q7
, and q3
= q6
= q9
. This is a structure actually I faced with in my real data analysis. Probably, the generated html keeps only the last of the exacly same graphs embedded (q8
, q7
, and q9
as well as non-duplicated graphs, q4
, q5
and q10
) and displays the others (q1
, q2
, q3
, and q6
) by referencing the embedded one through <use href=...>
as above. For example, q3
, q6
and q9
were identical; the last one (q9
) was embedded in the html and the others (q3
and q6
) were displayed by referencing the embedded svg of q9
through <use href=...>
. The problem seemed that out.width
and out.height
options did not work for 'referencing graphs' such as q1
, q2
, q3
and q6
which were diplayed at 100% size through html code like above, while they did for the non-duplicated ones (q4
, q5
and q10
) and the last ones (q7
, q8
and q9
) which were at half size as specified through html code like below:
<pre class="r"><code> draw_graph(q4)</code></pre>
<p><svg id="svg_df3b357ffc2875aa11f7" width="50%" height="50%" class="svglite" viewBox="0 0 576.00 432.00">
<defs>...
Thanks.