OJS SVG Magic Move Demo

Not Yet Supported

None of the sequences on this page currently animate — every transition below hard-cuts instead of morphing. D3, Observable Plot, and Vega-Lite (via {ojs}) all produce fully compatible SVG shapes (<circle>, <rect>, <path>, <line>, <text>), but Quarto’s Observable JS cells render after Reveal’s ready event, while this extension only scans for SVG content once, synchronously, at ready. So the SVG magic-move feature never activates for {ojs}-rendered charts, regardless of shape compatibility. Kept here as a reference for what real {ojs}-rendered SVG looks like, pending a fix upstream.

D3 Shapes - Position 1

{
  const svg = d3.create("svg").attr("width", 400).attr("height", 300);
  svg.append("circle").attr("cx", 80).attr("cy", 80).attr("r", 30).attr("fill", "steelblue");
  svg.append("rect").attr("x", 200).attr("y", 180).attr("width", 60).attr("height", 40).attr("fill", "coral");
  return svg.node();
}

D3 Shapes - Position 2

{
  const svg = d3.create("svg").attr("width", 400).attr("height", 300);
  svg.append("circle").attr("cx", 300).attr("cy", 200).attr("r", 50).attr("fill", "steelblue");
  svg.append("rect").attr("x", 40).attr("y", 40).attr("width", 100).attr("height", 25).attr("fill", "coral");
  return svg.node();
}

Break

Observable Plot - Dots Low

Plot.plot({
  width: 500,
  height: 350,
  marks: [
    Plot.dot([{x: 1, y: 1}, {x: 2, y: 1.2}, {x: 3, y: 1}], {x: "x", y: "y", r: 10, fill: "steelblue"})
  ]
})

Observable Plot - Dots High

Plot.plot({
  width: 500,
  height: 350,
  marks: [
    Plot.dot([{x: 1, y: 3}, {x: 2, y: 3.5}, {x: 3, y: 3}], {x: "x", y: "y", r: 10, fill: "steelblue"})
  ]
})

Break

Vega-Lite Points - Layout 1

vegaEmbed = require("vega-embed@6")

vlSpecA = ({
  $schema: "https://vega.github.io/schema/vega-lite/v5.json",
  width: 400,
  height: 300,
  data: {values: [{x: 1, y: 1}, {x: 2, y: 3}, {x: 3, y: 2}]},
  mark: "point",
  encoding: {
    x: {field: "x", type: "quantitative"},
    y: {field: "y", type: "quantitative"}
  }
})

{
  const div = document.createElement("div");
  await vegaEmbed(div, vlSpecA, {renderer: "svg", actions: false});
  return div;
}

Vega-Lite Points - Layout 2

vlSpecB = ({
  $schema: "https://vega.github.io/schema/vega-lite/v5.json",
  width: 400,
  height: 300,
  data: {values: [{x: 1, y: 3}, {x: 2, y: 1}, {x: 3, y: 3}]},
  mark: "point",
  encoding: {
    x: {field: "x", type: "quantitative"},
    y: {field: "y", type: "quantitative"}
  }
})

{
  const div = document.createElement("div");
  await vegaEmbed(div, vlSpecB, {renderer: "svg", actions: false});
  return div;
}