I am new to .js classes and I my goal is to set a property value for a class I define in one cell, from within another cell, where both cells are in the same notebook. In the example below, assume that the cells contain nothing except the code displayed here.

Here is the test class in cell 1:

class hist_class {
  constructor() {
    this.test_value=null;
  }
  
  set test_value(newvalue) {
    this.test_value=newvalue;
  }

}

Here is my “set” attempt in another cell in the same notebook:

test1 = {

const svg = d3.create("svg")
    .attr("width", 100)
    .attr("height", 50);
  
const hist1 = new hist_class();
hist1.test_value = "test value";

svg.append("text")
    .text(hist1.test_value)
    .attr("x", 10)
    .attr("y", 20);

return svg.node();
  
}

The error I get is “test1 = InternalError: too much recursion.” Because my code is so close to standard examples (e.g. mozilla, w3schools), I think the error is probably about how observable processes my code, rather than a true .js error.

Thanks for any advice!

Why I care/why I want this:

I am trying to adopt the nice histogram shown here . However, this example notebook’s chart uses items that are defined in cells outside of the chart (within the same notebook). I want to create multiple instances of the chart without the mess of repeating all the separate cells. Therefore I thought I’d try to bundle all the chart-supporting cells into a single class so that the external code is reduced to one line. Then within the chart code I could create a new instance of the class and assign values to its properties as needed.

So it’s the bundling and code management I care about ultimately. If there’s some better .js/observable way to accomplish that apart from class creation I’m certainly up for it.

Thanks again!