Lucid Chart Embedding in Quarto

Why would you embed an iframe of a Lucid Chart instead of just a screenshot of it?

Lucid charts can have interactive layers and action buttons, making it possible to incrementally reveal portions of a larger more complex diagram. This gradual build up is easier for viewers to follow than a giant diagram presented all at once.

Now using Quarto fragments

A similar effect can be achieved with Quarto fragments. I use a screenshot of the whole diagram that has been sliced into multiple images using Adobe Illustrator. In Quarto, each image is then loaded in a {.fragment #id} element, and each each id has a CSS chunk that specifies its absolute position.

https://solutions.posit.co/gallery/bike_predict/

Resources

The presentation YAML

---
title: "Lucid Chart Embedding in Quarto"
format:
  revealjs:
    slide-number: c/t
    code-copy: true
    highlight-style: a11y
    link-external-newwindow: true
    theme: styles.scss
width: 2500
height: 1406
engine: knitr
---

The CSS rules

#workbench {
    position: absolute;
    top: 4px;
    left: 5px;
}

#connect {
    position: absolute;
    top: 4px;
    left: 919px;
}

#ppm {
    position: absolute;
    top: 683px;
    left: 5px;
}

#hexes {
    position: absolute;
    top: 0px;
    left: 0px;
}

#link {
    position: absolute;
    bottom: 0px;
    left: 31px;
}

Full code at https://github.com/jeremy-allen/diagrams-in-quarto.git