Multiple d3 charts - ojs (clean variables)

[Juuso1]

Hi,

I tried to use multiple d3 charts in my Quarto Revealjs presentation. I get this error OJS Runtime Error - d3 defined multiple times or some variable defined multiple times?
Is there way to clean/remove variables in ojs?

BR,
JH

[cscheid]

Can you share a .qmd file where you're running into this issue? I routinely use multiple d3 charts in my own quarto pages so I'm relatively confident it's something else.

[Juuso1]

Hi,

Here is my code. It works fine if I rendered once. But if I copy this in a same page at the bottom or another page and then try to re-run I get error message "d3 is defined more than once"

d3 = require("d3@7")
data = d3.csv("https://gist.githubusercontent.com/Juuso1/4b92d153a02263380b2560f2e7e42d09/raw/683f0525567987cd646ee9773c0eb6609973dc71/muuttoliike_kangasala_2021.csv", d3.autoType)

height = width

width = 300

innerRadius = Math.min(width, height) * .3 - 40

outerRadius = innerRadius + 20

color = d3.scaleOrdinal(names, d3.schemeCategory10)

ribbon = d3.ribbon()
    .radius(innerRadius - 1)
    .padAngle(0.8/ innerRadius)

arc = d3.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius)

chord = d3.chordDirected()
    .padAngle(0.8 / innerRadius)
    .sortSubgroups(d3.ascending)
    .sortChords(d3.ascending)

matrix = {
  const index = new Map(names.map((name, i) => [name, i]));
  const matrix = Array.from(index, () => new Array(names.length).fill(0));
  for (const {source, target, value} of data) matrix[index.get(source)][index.get(target)] += value;
  return matrix;
}

  names = Array.from(new Set(data.flatMap(d => [d.source, d.target]))).sort(d3.ascending)
  rename = name => name.substring(name.indexOf(".") + 1, name.lastIndexOf("."))


chart = {

  let sum_target;
  let sum_source;
  let sum_yht;

  const svg = d3.create("svg")
      .attr("viewBox", [-width / 2, -height / 3, width, height]);

  const chords = chord(matrix);

  const group = svg.append("g")
      .attr("font-size", 2)
      .attr("font-family", "Century Gothic")
      .attr("font-weight", "bold")
    .selectAll("g")
    .data(chords.groups)
    .join("g");

  group.append("path")
      .attr("fill", d => {

           sum_target = d3.sum(chords, c => (c.target.index === d.index) * c.target.value);
           sum_source = d3.sum(chords, c => (c.source.index === d.index) * c.source.value);
           sum_yht = sum_target-sum_source;
            if (sum_yht > 0) { return "#009651" }
            else if (sum_yht == 0) { return "#28336C" }
            else 	{ return "#DE232F" }
        })
      .attr("d", arc);
  
  group.append("text")
      .each(d => (d.angle = (d.startAngle + d.endAngle) / 2))
      .attr("dy", "0.35em")
      .attr("transform", d => `
        rotate(${(d.angle * 180 / Math.PI - 90)})
        translate(${outerRadius + 5})
        ${d.angle > Math.PI ? "rotate(180)" : ""}
      `)
      .attr("text-anchor", d => d.angle > Math.PI ? "end" : null)
      .text(d => names[d.index])
            .attr("fill", d => {

           sum_target = d3.sum(chords, c => (c.target.index === d.index) * c.target.value);
           sum_source = d3.sum(chords, c => (c.source.index === d.index) * c.source.value);
           sum_yht = sum_target-sum_source;
            if (sum_yht > 0) { return "#009651" }
            else if (sum_yht == 0) { return "#28336C" }
            else 	{ return "#DE232F" }
        });

  group.append("title")
      .text(d => `${names[d.index]}
${d3.sum(chords, c => (c.source.index === d.index) * c.source.value)} lähtee →
${d3.sum(chords, c => (c.target.index === d.index) * c.source.value)} tulee ←
${d3.sum(chords, c => (c.target.index === d.index) * c.target.value)- d3.sum(chords, c => (c.source.index === d.index) * c.source.value)} netto =`);  

  svg.append("g")
      .attr("fill-opacity", 0.75)
    .selectAll("path")
    .data(chords)
    .join("path")
      .style("mix-blend-mode", "multiply")
      .attr("fill", d => {
            if ((d3.sum(chords, c => (c.target.index === d.index) * c.target.value)- d3.sum(chords, c => (c.source.index === d.index) * c.source.value)) >= 0) {return "#28336C"}
            else 	{ return "#28336C" }
        ;})
      .attr("d", ribbon)
    .append("title")
      .text(d => `${names[d.source.index]} --> ${names[d.target.index]} ${d.source.value}`);

  return svg.node();
}

[cscheid]

Ok. The issue is that you only need to declare d3 once, and declarations are not local to a single ojs block. Incidentally, they're also not resolved in order, but are resolved wrt their dependency order. This is not unique to quarto; it's the defining feature of Observable's execution model