{ let dotplot = Plot.plot({ height: 500, width: 600, grid: true, marginLeft: 50, marginRight: 30, marginTop: 40, marginBottom: 70, insetTop: 0, insetBottom: 0, style: { fontSize: "13px", color: "#000" }, x: { label: " x → ", tickPadding: 10, labelOffset: 60, tickFormat: "f", tickSize: 9, ticks: 10, domain: [xMin,xMax], }, y: { label: "↑ y", tickPadding: 6, labelOffset: 30, tickFormat: "f", ticks: 10, tickSize: 6, domain: [yMin, yMax] }, caption: html`
Figure: Comparison of data points with joint optimization results.
⚪ Data points
– – – Joint optimization without bounds
—— Joint optimization with bounds
`, marks: [ Plot.frame({stroke: "black"}), Plot.ruleY([0]), Plot.dot(dataPoints.filter(point => point.dataset === 'y1'), {x: "x", y: "y", stroke:"#111", fill: strokeColor1, strokeOpacity: 0.4, r: dotSize}), Plot.dot(dataPoints.filter(point => point.dataset === 'y2'), {x: "x", y: "y", stroke:"#111", fill: strokeColor2, strokeOpacity: 0.4, r: dotSize}), Plot.line(createCurve(optimizedParamsNoConstraints,'y1'), {x: "x", y: "y", curve: "catmull-rom", stroke: strokeColor1, strokeWidth: 0.8, strokeOpacity: 0.8, strokeDasharray: "4,4"}), Plot.line(createCurve(optimizedParamsNoConstraints,'y2'), {x: "x", y: "y", curve: "catmull-rom", stroke: strokeColor2, strokeWidth: 0.8, strokeOpacity: 0.8, strokeDasharray: "4,4"}), Plot.line(createCurve(optimizedParamsBounded,'y1'), {x: "x", y: "y", curve: "catmull-rom", stroke: strokeColor1, strokeWidth: 0.8, strokeOpacity: 0.8}), Plot.line(createCurve(optimizedParamsBounded,'y2'), {x: "x", y: "y", curve: "catmull-rom", stroke: strokeColor2, strokeWidth: 0.8, strokeOpacity: 0.8}), ] }) // Label in bold/large font let select_labels = d3.select(dotplot) .selectAll("svg > g > text") .style("font-weight", "bold") .style("font-size", "16px"); return dotplot; }