Why am I getting 'expected length, “nan”.' in the browser console for my chart?

See more:

Typescript

d3js

The visualization has a radius slider and the circle below which is interactive. My guess is with the radius part of the code below. But once I use the radius slider I get an error in the browser console:

https://i.stack.imgur.com/1SQ3W.png

The code below shows the d3.js part of creating the chart.

import { select } from 'd3-selection';

import * as d3 from "d3";

export class D3Chart1 {
  value!: string;
  constructor(parent: HTMLElement) {
    const svg = select(parent).append('svg')
       .classed('chart1', true)

    // Show circle with initial radius of 60px
     const circle = svg.append('circle')
         .attr('cx', 100)
         .attr('cy', 100) 
         .attr('fill', 'none')   
         .attr('stroke', 'blue') 
         .attr('r', 60);
      
     function update(radius:number) {
         circle.attr('r', radius);
     }
     let circumference = document.getElementById("radius-slider")!
     // Event slider for input slider
     d3.select(circumference).on('input', () => {
       
         // Update visualization
         update(parseInt(this.value));
         // Update label
         d3.select('#radius-value').text(this.value);
     });
  }
}

The code below just displays the visualization on a sidebar/widget:

import { Widget } from '@lumino/widgets';
//import { D3BarChart } from './D3BarChart';
import { offlineBoltIcon } from '@jupyterlab/ui-components';
import { D3Chart1 } from './D3BarChart';

const TITLE = 'ML Prov';
const DESCRIPTION = 'Visual Hyperparameter Tuning';
const dataviz = '<div><label for="radius-slider">Radius: <span id="radius-value">60</span></label><input type="range" min="1" value="60" max="80" id="radius-slider"></div>'

export class MlProvSidebar extends Widget {
  constructor() {
    super();
    this.addClass('ml-prov-widget-view');
    this.id = 'ml-prov-widget';
    this.title.label = TITLE;
    this.title.caption = DESCRIPTION;
    this.title.icon = offlineBoltIcon;
    this.title.closable = true;
    this.addStaticDummyContent();
  }

  addStaticDummyContent() {
    this.node.insertAdjacentHTML('afterbegin', `
      <h1>${TITLE}</h1>
      <p>${DESCRIPTION}</p>
      <div>${dataviz}</div> 
    `); //Displaying the radius slider ${dataviz}
  }

  protected onBeforeShow(msg: any)  {
    console.debug(`Opening ${TITLE} sidebar.`);
    new D3Chart1(this.node); //Displaying the visualization
  }

  protected onAfterHide(msg: any)  {
    console.debug(`closing ${TITLE} sidebar`);
    this.node.querySelector('svg.chart1')?.remove();
  }
}

This is the result before the error occurs:

https://i.stack.imgur.com/1TeUS.png

This is the result after the error occurs(the visualization dissappears, as well as the radius value):

https://i.stack.imgur.com/sKOyY.png

What I have tried:

I have done a few google searches on this topic, however none of them actually fit the description since most work is done solely on JS rather than with TS.