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)
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")!
d3.select(circumference).on('input', () => {
update(parseInt(this.value));
d3.select('#radius-value').text(this.value);
});
}
}
The code below just displays the visualization on a sidebar/widget:
import { Widget } from '@lumino/widgets';
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>
`);
}
protected onBeforeShow(msg: any) {
console.debug(`Opening ${TITLE} sidebar.`);
new D3Chart1(this.node);
}
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.