Generating Altair concatenated / layered chart gets overlapped div id

[plasmak11]

Issue related to the displaying mechanism for Altair charts are programmed either in Quarto or Altair

What works:

For simple charts:

import altair as alt
from vega_datasets import data

source = data.movies.url

fig1 = alt.Chart(source).mark_rect().encode(
    alt.X('IMDB_Rating:Q').bin(maxbins=60),
    alt.Y('Rotten_Tomatoes_Rating:Q').bin(maxbins=40),
    alt.Color('count():Q').scale(scheme='greenblue')
)

# For the sake of the example same figure

fig2 = alt.Chart(source).mark_rect().encode(
    alt.X('IMDB_Rating:Q').bin(maxbins=60),
    alt.Y('Rotten_Tomatoes_Rating:Q').bin(maxbins=40),
    alt.Color('count():Q').scale(scheme='greenblue')
)

```{python}
fig1
\```

```{python}
fig2
\```

Will generate two figures, each in their cell blocks.

---

Problem:

When the charts are "layered" or "concatenated charts", the first chart gets replaced by the next chart, next chart, subsequent charts. First rendering block ends up with the last complex Altair chart.

Basically "overwriting" the chart as it renders

```{python}
fig2 + fig1
\```

```{python}
fig1 | fig2
\```

---

What I can discover from the HTML preview on web browser:

Altair layered/concatenated charts don't end up with unique div id, but rather a default vis. All subsequent charts get this ID:

Simple charts end up with unique ID, which can be changed via naming the chunks.

Unsure if this is Altair issue or Quarto issue.

P.S. Full .qmd file:

---
title: "Report"
date: "2023-10-29"
toc: true
execute:
    echo: false
    warning: false
    error: false
---

```{r}
library(reticulate)
reticulate::use_python("~/.virtualenvs/r-reticulate/bin/python3.9", required=T)

Heading

import altair as alt
import pandas as pd

source = pd.DataFrame({
    'a': ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'],
    'b': [28, 55, 43, 91, 81, 53, 19, 87, 52]
})

fig1 = alt.Chart(source).mark_bar().encode(
    x='a',
    y='b'
)
fig2 = alt.Chart(source).mark_bar().encode(
    x='a',
    y='b',
    color='b:N'
)
fig3 = alt.Chart(source).mark_bar().encode(
    x='a',
    y='b',
    color='a:N'
)

Chart1

(fig1 | fig2).properties(title="This is the First Chart")

Chart2

(fig2 | fig1).properties(title="This is the Second Chart")

Chart3

(fig2 | fig1 | fig3).properties(title="This is the Third Chart")

Table

source <- py$source

knitr::kable(
    source
)

![WhatsApp Image 2023-10-30 at 11 31 22 AM](https://github.com/quarto-dev/quarto-cli/assets/10780685/be4ea508-bf54-4777-8782-47a683c22768)

[cderv]

Thanks for the report. Could you provide a full document .qmd reproducible example using correct markdown syntax to include it ? https://quarto.org/bug-reports.html#formatting-make-githubs-markdown-work-for-us

You can edit your post to include this. Thanks - that will help us help you

[cscheid]

I can't reproduce this:

[plasmak11]

Thanks for the report. Could you provide a full document .qmd reproducible example using correct markdown syntax to include it ? https://quarto.org/bug-reports.html#formatting-make-githubs-markdown-work-for-us

You can edit your post to include this. Thanks - that will help us help you

Working with sensitive data so will try iron out something simple to replicate...

[plasmak11]

@cderv @cscheid

Seems like this is a weird outlier combination of using R and python, using reticulate environment.

Tried out deleting all of the R chunks --> all Altair charts render as designed, each chart with unique <div id=

When adding R chunks --> Altair charts end up with id of <div id="vis"

[cscheid]

reticulate environment

That's for here, then: https://github.com/rstudio/reticulate

[cderv]

This is opened now at

• https://github.com/rstudio/reticulate/issues/1500

It should be tracked there

[plasmak11]

Thank you for the redirection! @cderv @cscheid - looked into reticulate python renderer -- current workaround will be re-rendering it using vegawidget

• Store as chart1 = fig1.to_json()
• Render it in R block as as_vegaspec(py$chart1)

e.g. Someone's gist snippet:

https://gist.github.com/ijlyttle/aa314d02b5f7f85702ea2a648393b21f