BerriJ/PHD-Presentation
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move title slide

Browse Source
This commit is contained in:
BerriJ committed 2025-06-23 20:17:28 +02:00
1 parent 732ed1a39a
commit 1941b43d1c
5 files changed
+499 -420
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+409 -397
View File
@@ -25511,6 +25511,30 @@ border: 0;
</a>
</div>
<script>
function move_titleSlide() {
var titleSlide = document.querySelector('section#title-slide');
var placeholder = document.querySelector('section.placeholder-for-titleSlide');
if (titleSlide && placeholder) {
// Transfer visibility attribute from placeholder to title slide
var visibility = placeholder.getAttribute('data-visibility');
if (visibility !== null) {
titleSlide.setAttribute('data-visibility', visibility);
}
// Move the title slide to replace the placeholder
placeholder.parentNode.replaceChild(titleSlide, placeholder);
Reveal.sync();
}
}
window.document.addEventListener("DOMContentLoaded", function (event) {
move_titleSlide();
});
</script>
<div class="reveal">
<div class="slides">
@@ -25531,35 +25555,23 @@ Jonathan Berrisch
<p class="date">2025-06-30</p>
</section>
<section>
<section id="high-level-view" class="title-slide slide level1 center" data-visibility="uncounted">
<h1>High-Level View</h1>
<!--
Render with: quarto preview /home/jonathan/git/PHD-Presentation/25_07_phd_defense/index.qmd --no-browser --port 6074
-->
<div class="hidden">
<section id="the-beginning-june-2020" class="slide level2" data-visibility="uncounted">
<h2>The beginning: June 2020</h2>
<img role="img" data-src="data:image/png;base64,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 truncated
<p><span class="math display">\[
\newcommand{\A}{{\mathbb A}}
\]</span></p>
</div>
<!-- :::: {style="font-size: 150%;"}
<i class="fa fa-fw fa-rocket" style="color:var(--col_grey_9);"></i> &ensp; [Research Motivation](#motivation)
<i class="fa fa-fw fa-book" style="color:var(--col_grey_9);"></i> &ensp; [Overview of the Thesis](#sec-overview)
<i class="fa fa-fw fa-layer-group" style="color:var(--col_grey_9);"></i> &ensp; [Online Aggregation](#sec-crps-learning)
<i class="fa fa-fw fa-chart-line" style="color:var(--col_grey_9);"></i> &ensp; [Probabilistic Forecasting of European Carbon and Energy Prices](#sec-voldep)
<i class="fa fa-fw fa-newspaper" style="color:var(--col_grey_9);"></i> &ensp; [Contributions](#sec-contributions)
:::: -->
</section>
<section id="the-beginning-june-2020" class="slide level2">
<h2>The beginning: June 2020</h2>
<section id="section" class="slide level2 placeholder-for-titleSlide">
<h2></h2>
</section>
<section>
<section id="high-level-view" class="title-slide slide level1 center" data-visibility="uncounted">
<h1>High-Level View</h1>
<img role="img" data-src="data:image/png;base64,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 truncated
</section>
<section id="motivation" class="slide level2">
<h2>Motivation</h2>
<div class="columns">
@@ -25939,7 +25951,7 @@ Berrisch, J. <span class="citation" data-cites="berrisch2025rcpptimer">(<a href=
</div>
<div id="tabset-1-2">
<div class="cell">
<div class="sourceCode cell-code hidden" id="cb2" data-startfrom="839" data-source-offset="0"><pre class="sourceCode numberSource js number-lines code-with-copy"><code class="sourceCode javascript" style="counter-reset: source-line 838;"><span id="cb2-839"><a href></a>d3 <span class="op">=</span> <span class="pp">require</span>(<span class="st">&quot;d3@7&quot;</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<div class="sourceCode cell-code hidden" id="cb2" data-startfrom="821" data-source-offset="0"><pre class="sourceCode numberSource js number-lines code-with-copy"><code class="sourceCode javascript" style="counter-reset: source-line 820;"><span id="cb2-821"><a href></a>d3 <span class="op">=</span> <span class="pp">require</span>(<span class="st">&quot;d3@7&quot;</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<div class="cell-output cell-output-display">
<div id="ojs-cell-1" data-nodetype="declaration">
@@ -25947,7 +25959,7 @@ Berrisch, J. <span class="citation" data-cites="berrisch2025rcpptimer">(<a href=
</div>
</div>
<div class="cell">
<div class="sourceCode cell-code hidden" id="cb3" data-startfrom="843" data-source-offset="0"><pre class="sourceCode numberSource js number-lines code-with-copy"><code class="sourceCode javascript" style="counter-reset: source-line 842;"><span id="cb3-843"><a href></a>cdf_data <span class="op">=</span> <span class="fu">FileAttachment</span>(<span class="st">&quot;assets/crps_learning/weights_plot/cdf_data.csv&quot;</span>)<span class="op">.</span><span class="fu">csv</span>({ <span class="dt">typed</span><span class="op">:</span> <span class="kw">true</span> })</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<div class="sourceCode cell-code hidden" id="cb3" data-startfrom="825" data-source-offset="0"><pre class="sourceCode numberSource js number-lines code-with-copy"><code class="sourceCode javascript" style="counter-reset: source-line 824;"><span id="cb3-825"><a href></a>cdf_data <span class="op">=</span> <span class="fu">FileAttachment</span>(<span class="st">&quot;assets/crps_learning/weights_plot/cdf_data.csv&quot;</span>)<span class="op">.</span><span class="fu">csv</span>({ <span class="dt">typed</span><span class="op">:</span> <span class="kw">true</span> })</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<div class="cell-output cell-output-display">
<div id="ojs-cell-2" data-nodetype="declaration">
@@ -25955,190 +25967,190 @@ Berrisch, J. <span class="citation" data-cites="berrisch2025rcpptimer">(<a href=
</div>
</div>
<div class="cell">
<div class="sourceCode cell-code hidden" id="cb4" data-startfrom="848" data-source-offset="-0"><pre class="sourceCode numberSource js number-lines code-with-copy"><code class="sourceCode javascript" style="counter-reset: source-line 847;"><span id="cb4-848"><a href></a><span class="kw">function</span> <span class="fu">updateChartInner</span>(g<span class="op">,</span> x<span class="op">,</span> y<span class="op">,</span> linesGroup<span class="op">,</span> color<span class="op">,</span> line<span class="op">,</span> data) {</span>
<span id="cb4-849"><a href></a> <span class="co">// Update axes with transitions</span></span>
<span id="cb4-850"><a href></a> x<span class="op">.</span><span class="fu">domain</span>(d3<span class="op">.</span><span class="fu">extent</span>(data<span class="op">,</span> d <span class="kw">=&gt;</span> d<span class="op">.</span><span class="at">x</span>))<span class="op">;</span></span>
<span id="cb4-851"><a href></a> g<span class="op">.</span><span class="fu">select</span>(<span class="st">&quot;.x-axis&quot;</span>)<span class="op">.</span><span class="fu">transition</span>()<span class="op">.</span><span class="fu">duration</span>(<span class="dv">1500</span>)<span class="op">.</span><span class="fu">call</span>(d3<span class="op">.</span><span class="fu">axisBottom</span>(x)<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">10</span>))<span class="op">;</span></span>
<span id="cb4-852"><a href></a> y<span class="op">.</span><span class="fu">domain</span>([<span class="dv">0</span><span class="op">,</span> d3<span class="op">.</span><span class="fu">max</span>(data<span class="op">,</span> d <span class="kw">=&gt;</span> d<span class="op">.</span><span class="at">y</span>)])<span class="op">;</span></span>
<span id="cb4-853"><a href></a> g<span class="op">.</span><span class="fu">select</span>(<span class="st">&quot;.y-axis&quot;</span>)<span class="op">.</span><span class="fu">transition</span>()<span class="op">.</span><span class="fu">duration</span>(<span class="dv">1500</span>)<span class="op">.</span><span class="fu">call</span>(d3<span class="op">.</span><span class="fu">axisLeft</span>(y)<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">5</span>))<span class="op">;</span></span>
<span id="cb4-854"><a href></a></span>
<span id="cb4-855"><a href></a> <span class="co">// Group data by basis function</span></span>
<span id="cb4-856"><a href></a> <span class="kw">const</span> dataByFunction <span class="op">=</span> <span class="bu">Array</span><span class="op">.</span><span class="fu">from</span>(d3<span class="op">.</span><span class="fu">group</span>(data<span class="op">,</span> d <span class="kw">=&gt;</span> d<span class="op">.</span><span class="at">b</span>))<span class="op">;</span></span>
<span id="cb4-857"><a href></a> <span class="kw">const</span> keyFn <span class="op">=</span> d <span class="kw">=&gt;</span> d[<span class="dv">0</span>]<span class="op">;</span></span>
<span id="cb4-858"><a href></a></span>
<span id="cb4-859"><a href></a> <span class="co">// Update basis function lines</span></span>
<span id="cb4-860"><a href></a> <span class="kw">const</span> u <span class="op">=</span> linesGroup<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">&quot;path&quot;</span>)<span class="op">.</span><span class="fu">data</span>(dataByFunction<span class="op">,</span> keyFn)<span class="op">;</span></span>
<span id="cb4-861"><a href></a> u<span class="op">.</span><span class="fu">join</span>(</span>
<span id="cb4-862"><a href></a> enter <span class="kw">=&gt;</span> enter<span class="op">.</span><span class="fu">append</span>(<span class="st">&quot;path&quot;</span>)<span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;fill&quot;</span><span class="op">,</span><span class="st">&quot;none&quot;</span>)<span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;stroke-width&quot;</span><span class="op">,</span><span class="dv">3</span>)</span>
<span id="cb4-863"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;stroke&quot;</span><span class="op">,</span> (_<span class="op">,</span> i) <span class="kw">=&gt;</span> <span class="fu">color</span>(i))<span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;d&quot;</span><span class="op">,</span> d <span class="kw">=&gt;</span> <span class="fu">line</span>(d[<span class="dv">1</span>]<span class="op">.</span><span class="fu">map</span>(pt <span class="kw">=&gt;</span> ({<span class="dt">x</span><span class="op">:</span> pt<span class="op">.</span><span class="at">x</span><span class="op">,</span> <span class="dt">y</span><span class="op">:</span> <span class="dv">0</span>}))))</span>
<span id="cb4-864"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;opacity&quot;</span><span class="op">,</span><span class="dv">0</span>)<span class="op">,</span></span>
<span id="cb4-865"><a href></a> update <span class="kw">=&gt;</span> update<span class="op">,</span></span>
<span id="cb4-866"><a href></a> exit <span class="kw">=&gt;</span> exit<span class="op">.</span><span class="fu">transition</span>()<span class="op">.</span><span class="fu">duration</span>(<span class="dv">1000</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;opacity&quot;</span><span class="op">,</span><span class="dv">0</span>)<span class="op">.</span><span class="fu">remove</span>()</span>
<span id="cb4-867"><a href></a> )</span>
<span id="cb4-868"><a href></a> <span class="op">.</span><span class="fu">transition</span>()<span class="op">.</span><span class="fu">duration</span>(<span class="dv">1000</span>)</span>
<span id="cb4-869"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;d&quot;</span><span class="op">,</span> d <span class="kw">=&gt;</span> <span class="fu">line</span>(d[<span class="dv">1</span>]))</span>
<span id="cb4-870"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;stroke&quot;</span><span class="op">,</span> (_<span class="op">,</span> i) <span class="kw">=&gt;</span> <span class="fu">color</span>(i))</span>
<span id="cb4-871"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;opacity&quot;</span><span class="op">,</span><span class="dv">1</span>)<span class="op">;</span></span>
<span id="cb4-872"><a href></a>}</span>
<span id="cb4-873"><a href></a></span>
<span id="cb4-874"><a href></a>chart <span class="op">=</span> {</span>
<span id="cb4-875"><a href></a> <span class="co">// State variable for selected mu parameter</span></span>
<span id="cb4-876"><a href></a> <span class="kw">let</span> selectedMu <span class="op">=</span> <span class="dv">1</span><span class="op">;</span></span>
<span id="cb4-877"><a href></a> </span>
<span id="cb4-878"><a href></a> <span class="kw">const</span> filteredData <span class="op">=</span> () <span class="kw">=&gt;</span> cdf_data<span class="op">.</span><span class="fu">filter</span>(d <span class="kw">=&gt;</span></span>
<span id="cb4-879"><a href></a> <span class="bu">Math</span><span class="op">.</span><span class="fu">abs</span>(selectedMu <span class="op">-</span> d<span class="op">.</span><span class="at">mu</span>) <span class="op">&lt;</span> <span class="fl">0.001</span></span>
<span id="cb4-880"><a href></a> )<span class="op">;</span></span>
<span id="cb4-881"><a href></a> </span>
<span id="cb4-882"><a href></a> <span class="kw">const</span> container <span class="op">=</span> d3<span class="op">.</span><span class="fu">create</span>(<span class="st">&quot;div&quot;</span>)</span>
<span id="cb4-883"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;max-width&quot;</span><span class="op">,</span> <span class="st">&quot;none&quot;</span>)</span>
<span id="cb4-884"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;width&quot;</span><span class="op">,</span> <span class="st">&quot;100%&quot;</span>)<span class="op">;</span></span>
<span id="cb4-885"><a href></a> </span>
<span id="cb4-886"><a href></a> <span class="kw">const</span> controlsContainer <span class="op">=</span> container<span class="op">.</span><span class="fu">append</span>(<span class="st">&quot;div&quot;</span>)</span>
<span id="cb4-887"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;display&quot;</span><span class="op">,</span> <span class="st">&quot;flex&quot;</span>)</span>
<span id="cb4-888"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;gap&quot;</span><span class="op">,</span> <span class="st">&quot;20px&quot;</span>)</span>
<span id="cb4-889"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;align-items&quot;</span><span class="op">,</span> <span class="st">&quot;center&quot;</span>)<span class="op">;</span></span>
<span id="cb4-890"><a href></a> </span>
<span id="cb4-891"><a href></a> <span class="co">// Single slider control for mu</span></span>
<span id="cb4-892"><a href></a> <span class="kw">const</span> sliderContainer <span class="op">=</span> controlsContainer<span class="op">.</span><span class="fu">append</span>(<span class="st">&#39;div&#39;</span>)</span>
<span id="cb4-893"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;display&#39;</span><span class="op">,</span><span class="st">&#39;flex&#39;</span>)</span>
<span id="cb4-894"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;align-items&#39;</span><span class="op">,</span><span class="st">&#39;center&#39;</span>)</span>
<span id="cb4-895"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;gap&#39;</span><span class="op">,</span><span class="st">&#39;10px&#39;</span>)</span>
<span id="cb4-896"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;flex&#39;</span><span class="op">,</span><span class="st">&#39;1&#39;</span>)<span class="op">;</span></span>
<span id="cb4-897"><a href></a> </span>
<span id="cb4-898"><a href></a> sliderContainer<span class="op">.</span><span class="fu">append</span>(<span class="st">&#39;label&#39;</span>)</span>
<span id="cb4-899"><a href></a> <span class="op">.</span><span class="fu">text</span>(<span class="st">&#39;Naive:&#39;</span>)</span>
<span id="cb4-900"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;font-size&#39;</span><span class="op">,</span><span class="st">&#39;20px&#39;</span>)<span class="op">;</span></span>
<span id="cb4-901"><a href></a> </span>
<span id="cb4-902"><a href></a> <span class="kw">const</span> muSlider <span class="op">=</span> sliderContainer<span class="op">.</span><span class="fu">append</span>(<span class="st">&#39;input&#39;</span>)</span>
<span id="cb4-903"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&#39;type&#39;</span><span class="op">,</span><span class="st">&#39;range&#39;</span>)</span>
<span id="cb4-904"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&#39;min&#39;</span><span class="op">,</span> <span class="dv">0</span>)</span>
<span id="cb4-905"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&#39;max&#39;</span><span class="op">,</span> <span class="dv">1</span>)</span>
<span id="cb4-906"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&#39;step&#39;</span><span class="op">,</span> <span class="fl">0.1</span>)</span>
<span id="cb4-907"><a href></a> <span class="op">.</span><span class="fu">property</span>(<span class="st">&#39;value&#39;</span><span class="op">,</span> selectedMu)</span>
<span id="cb4-908"><a href></a> <span class="op">.</span><span class="fu">on</span>(<span class="st">&#39;input&#39;</span><span class="op">,</span> <span class="kw">function</span>(<span class="bu">event</span>) {</span>
<span id="cb4-909"><a href></a> selectedMu <span class="op">=</span> <span class="op">+</span><span class="kw">this</span><span class="op">.</span><span class="at">value</span><span class="op">;</span></span>
<span id="cb4-910"><a href></a> muDisplay<span class="op">.</span><span class="fu">text</span>(selectedMu<span class="op">.</span><span class="fu">toFixed</span>(<span class="dv">1</span>))<span class="op">;</span></span>
<span id="cb4-911"><a href></a> <span class="fu">updateChart</span>(<span class="fu">filteredData</span>())<span class="op">;</span></span>
<span id="cb4-912"><a href></a> })</span>
<span id="cb4-913"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;width&#39;</span><span class="op">,</span> <span class="st">&#39;100%&#39;</span>)</span>
<span id="cb4-914"><a href></a> <span class="co">//.style(&#39;-webkit-appearance&#39;, &#39;none&#39;)</span></span>
<span id="cb4-915"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;appearance&#39;</span><span class="op">,</span> <span class="st">&#39;none&#39;</span>)</span>
<span id="cb4-916"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;height&#39;</span><span class="op">,</span> <span class="st">&#39;8px&#39;</span>)</span>
<span id="cb4-917"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;background&#39;</span><span class="op">,</span> <span class="st">&#39;#BDBDBDFF&#39;</span>)<span class="op">;</span></span>
<span id="cb4-918"><a href></a> </span>
<span id="cb4-919"><a href></a> <span class="kw">const</span> muDisplay <span class="op">=</span> sliderContainer<span class="op">.</span><span class="fu">append</span>(<span class="st">&#39;span&#39;</span>)</span>
<span id="cb4-920"><a href></a> <span class="op">.</span><span class="fu">text</span>(selectedMu<span class="op">.</span><span class="fu">toFixed</span>(<span class="dv">1</span>))</span>
<span id="cb4-921"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;font-size&#39;</span><span class="op">,</span><span class="st">&#39;20px&#39;</span>)<span class="op">;</span></span>
<span id="cb4-922"><a href></a> </span>
<span id="cb4-923"><a href></a> <span class="co">// Add Reset button</span></span>
<span id="cb4-924"><a href></a> controlsContainer<span class="op">.</span><span class="fu">append</span>(<span class="st">&#39;button&#39;</span>)</span>
<span id="cb4-925"><a href></a> <span class="op">.</span><span class="fu">text</span>(<span class="st">&#39;Reset&#39;</span>)</span>
<span id="cb4-926"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;font-size&#39;</span><span class="op">,</span> <span class="st">&#39;20px&#39;</span>)</span>
<span id="cb4-927"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;align-self&#39;</span><span class="op">,</span> <span class="st">&#39;center&#39;</span>)</span>
<span id="cb4-928"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;margin-left&#39;</span><span class="op">,</span> <span class="st">&#39;auto&#39;</span>)</span>
<span id="cb4-929"><a href></a> <span class="op">.</span><span class="fu">on</span>(<span class="st">&#39;click&#39;</span><span class="op">,</span> () <span class="kw">=&gt;</span> {</span>
<span id="cb4-930"><a href></a> selectedMu <span class="op">=</span> <span class="dv">1</span><span class="op">;</span></span>
<span id="cb4-931"><a href></a> muSlider<span class="op">.</span><span class="fu">property</span>(<span class="st">&#39;value&#39;</span><span class="op">,</span> selectedMu)<span class="op">;</span></span>
<span id="cb4-932"><a href></a> muDisplay<span class="op">.</span><span class="fu">text</span>(selectedMu<span class="op">.</span><span class="fu">toFixed</span>(<span class="dv">1</span>))<span class="op">;</span></span>
<span id="cb4-933"><a href></a> <span class="fu">updateChart</span>(<span class="fu">filteredData</span>())<span class="op">;</span></span>
<span id="cb4-934"><a href></a> })<span class="op">;</span></span>
<span id="cb4-935"><a href></a></span>
<span id="cb4-936"><a href></a> <span class="co">// Build SVG</span></span>
<span id="cb4-937"><a href></a> <span class="kw">const</span> width <span class="op">=</span> <span class="dv">600</span><span class="op">;</span></span>
<span id="cb4-938"><a href></a> <span class="kw">const</span> height <span class="op">=</span> <span class="dv">450</span><span class="op">;</span></span>
<span id="cb4-939"><a href></a> <span class="kw">const</span> margin <span class="op">=</span> {<span class="dt">top</span><span class="op">:</span> <span class="dv">40</span><span class="op">,</span> <span class="dt">right</span><span class="op">:</span> <span class="dv">20</span><span class="op">,</span> <span class="dt">bottom</span><span class="op">:</span> <span class="dv">40</span><span class="op">,</span> <span class="dt">left</span><span class="op">:</span> <span class="dv">40</span>}<span class="op">;</span></span>
<span id="cb4-940"><a href></a> <span class="kw">const</span> innerWidth <span class="op">=</span> width <span class="op">-</span> margin<span class="op">.</span><span class="at">left</span> <span class="op">-</span> margin<span class="op">.</span><span class="at">right</span><span class="op">;</span></span>
<span id="cb4-941"><a href></a> <span class="kw">const</span> innerHeight <span class="op">=</span> height <span class="op">-</span> margin<span class="op">.</span><span class="at">top</span> <span class="op">-</span> margin<span class="op">.</span><span class="at">bottom</span><span class="op">;</span></span>
<span id="cb4-942"><a href></a></span>
<span id="cb4-943"><a href></a> <span class="co">// Set controls container width to match SVG plot width</span></span>
<span id="cb4-944"><a href></a> controlsContainer<span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;max-width&quot;</span><span class="op">,</span> <span class="st">&quot;none&quot;</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;width&quot;</span><span class="op">,</span> <span class="st">&quot;100%&quot;</span>)<span class="op">;</span></span>
<span id="cb4-945"><a href></a> <span class="co">// Distribute each control evenly and make sliders full-width</span></span>
<span id="cb4-946"><a href></a> controlsContainer<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">&quot;div&quot;</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;flex&quot;</span><span class="op">,</span> <span class="st">&quot;1&quot;</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;min-width&quot;</span><span class="op">,</span> <span class="st">&quot;0px&quot;</span>)<span class="op">;</span></span>
<span id="cb4-947"><a href></a> controlsContainer<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">&quot;input&quot;</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;width&quot;</span><span class="op">,</span> <span class="st">&quot;100%&quot;</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;box-sizing&quot;</span><span class="op">,</span> <span class="st">&quot;border-box&quot;</span>)<span class="op">;</span></span>
<div class="sourceCode cell-code hidden" id="cb4" data-startfrom="830" data-source-offset="-0"><pre class="sourceCode numberSource js number-lines code-with-copy"><code class="sourceCode javascript" style="counter-reset: source-line 829;"><span id="cb4-830"><a href></a><span class="kw">function</span> <span class="fu">updateChartInner</span>(g<span class="op">,</span> x<span class="op">,</span> y<span class="op">,</span> linesGroup<span class="op">,</span> color<span class="op">,</span> line<span class="op">,</span> data) {</span>
<span id="cb4-831"><a href></a> <span class="co">// Update axes with transitions</span></span>
<span id="cb4-832"><a href></a> x<span class="op">.</span><span class="fu">domain</span>(d3<span class="op">.</span><span class="fu">extent</span>(data<span class="op">,</span> d <span class="kw">=&gt;</span> d<span class="op">.</span><span class="at">x</span>))<span class="op">;</span></span>
<span id="cb4-833"><a href></a> g<span class="op">.</span><span class="fu">select</span>(<span class="st">&quot;.x-axis&quot;</span>)<span class="op">.</span><span class="fu">transition</span>()<span class="op">.</span><span class="fu">duration</span>(<span class="dv">1500</span>)<span class="op">.</span><span class="fu">call</span>(d3<span class="op">.</span><span class="fu">axisBottom</span>(x)<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">10</span>))<span class="op">;</span></span>
<span id="cb4-834"><a href></a> y<span class="op">.</span><span class="fu">domain</span>([<span class="dv">0</span><span class="op">,</span> d3<span class="op">.</span><span class="fu">max</span>(data<span class="op">,</span> d <span class="kw">=&gt;</span> d<span class="op">.</span><span class="at">y</span>)])<span class="op">;</span></span>
<span id="cb4-835"><a href></a> g<span class="op">.</span><span class="fu">select</span>(<span class="st">&quot;.y-axis&quot;</span>)<span class="op">.</span><span class="fu">transition</span>()<span class="op">.</span><span class="fu">duration</span>(<span class="dv">1500</span>)<span class="op">.</span><span class="fu">call</span>(d3<span class="op">.</span><span class="fu">axisLeft</span>(y)<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">5</span>))<span class="op">;</span></span>
<span id="cb4-836"><a href></a></span>
<span id="cb4-837"><a href></a> <span class="co">// Group data by basis function</span></span>
<span id="cb4-838"><a href></a> <span class="kw">const</span> dataByFunction <span class="op">=</span> <span class="bu">Array</span><span class="op">.</span><span class="fu">from</span>(d3<span class="op">.</span><span class="fu">group</span>(data<span class="op">,</span> d <span class="kw">=&gt;</span> d<span class="op">.</span><span class="at">b</span>))<span class="op">;</span></span>
<span id="cb4-839"><a href></a> <span class="kw">const</span> keyFn <span class="op">=</span> d <span class="kw">=&gt;</span> d[<span class="dv">0</span>]<span class="op">;</span></span>
<span id="cb4-840"><a href></a></span>
<span id="cb4-841"><a href></a> <span class="co">// Update basis function lines</span></span>
<span id="cb4-842"><a href></a> <span class="kw">const</span> u <span class="op">=</span> linesGroup<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">&quot;path&quot;</span>)<span class="op">.</span><span class="fu">data</span>(dataByFunction<span class="op">,</span> keyFn)<span class="op">;</span></span>
<span id="cb4-843"><a href></a> u<span class="op">.</span><span class="fu">join</span>(</span>
<span id="cb4-844"><a href></a> enter <span class="kw">=&gt;</span> enter<span class="op">.</span><span class="fu">append</span>(<span class="st">&quot;path&quot;</span>)<span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;fill&quot;</span><span class="op">,</span><span class="st">&quot;none&quot;</span>)<span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;stroke-width&quot;</span><span class="op">,</span><span class="dv">3</span>)</span>
<span id="cb4-845"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;stroke&quot;</span><span class="op">,</span> (_<span class="op">,</span> i) <span class="kw">=&gt;</span> <span class="fu">color</span>(i))<span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;d&quot;</span><span class="op">,</span> d <span class="kw">=&gt;</span> <span class="fu">line</span>(d[<span class="dv">1</span>]<span class="op">.</span><span class="fu">map</span>(pt <span class="kw">=&gt;</span> ({<span class="dt">x</span><span class="op">:</span> pt<span class="op">.</span><span class="at">x</span><span class="op">,</span> <span class="dt">y</span><span class="op">:</span> <span class="dv">0</span>}))))</span>
<span id="cb4-846"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;opacity&quot;</span><span class="op">,</span><span class="dv">0</span>)<span class="op">,</span></span>
<span id="cb4-847"><a href></a> update <span class="kw">=&gt;</span> update<span class="op">,</span></span>
<span id="cb4-848"><a href></a> exit <span class="kw">=&gt;</span> exit<span class="op">.</span><span class="fu">transition</span>()<span class="op">.</span><span class="fu">duration</span>(<span class="dv">1000</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;opacity&quot;</span><span class="op">,</span><span class="dv">0</span>)<span class="op">.</span><span class="fu">remove</span>()</span>
<span id="cb4-849"><a href></a> )</span>
<span id="cb4-850"><a href></a> <span class="op">.</span><span class="fu">transition</span>()<span class="op">.</span><span class="fu">duration</span>(<span class="dv">1000</span>)</span>
<span id="cb4-851"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;d&quot;</span><span class="op">,</span> d <span class="kw">=&gt;</span> <span class="fu">line</span>(d[<span class="dv">1</span>]))</span>
<span id="cb4-852"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;stroke&quot;</span><span class="op">,</span> (_<span class="op">,</span> i) <span class="kw">=&gt;</span> <span class="fu">color</span>(i))</span>
<span id="cb4-853"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;opacity&quot;</span><span class="op">,</span><span class="dv">1</span>)<span class="op">;</span></span>
<span id="cb4-854"><a href></a>}</span>
<span id="cb4-855"><a href></a></span>
<span id="cb4-856"><a href></a>chart <span class="op">=</span> {</span>
<span id="cb4-857"><a href></a> <span class="co">// State variable for selected mu parameter</span></span>
<span id="cb4-858"><a href></a> <span class="kw">let</span> selectedMu <span class="op">=</span> <span class="dv">1</span><span class="op">;</span></span>
<span id="cb4-859"><a href></a> </span>
<span id="cb4-860"><a href></a> <span class="kw">const</span> filteredData <span class="op">=</span> () <span class="kw">=&gt;</span> cdf_data<span class="op">.</span><span class="fu">filter</span>(d <span class="kw">=&gt;</span></span>
<span id="cb4-861"><a href></a> <span class="bu">Math</span><span class="op">.</span><span class="fu">abs</span>(selectedMu <span class="op">-</span> d<span class="op">.</span><span class="at">mu</span>) <span class="op">&lt;</span> <span class="fl">0.001</span></span>
<span id="cb4-862"><a href></a> )<span class="op">;</span></span>
<span id="cb4-863"><a href></a> </span>
<span id="cb4-864"><a href></a> <span class="kw">const</span> container <span class="op">=</span> d3<span class="op">.</span><span class="fu">create</span>(<span class="st">&quot;div&quot;</span>)</span>
<span id="cb4-865"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;max-width&quot;</span><span class="op">,</span> <span class="st">&quot;none&quot;</span>)</span>
<span id="cb4-866"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;width&quot;</span><span class="op">,</span> <span class="st">&quot;100%&quot;</span>)<span class="op">;</span></span>
<span id="cb4-867"><a href></a> </span>
<span id="cb4-868"><a href></a> <span class="kw">const</span> controlsContainer <span class="op">=</span> container<span class="op">.</span><span class="fu">append</span>(<span class="st">&quot;div&quot;</span>)</span>
<span id="cb4-869"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;display&quot;</span><span class="op">,</span> <span class="st">&quot;flex&quot;</span>)</span>
<span id="cb4-870"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;gap&quot;</span><span class="op">,</span> <span class="st">&quot;20px&quot;</span>)</span>
<span id="cb4-871"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;align-items&quot;</span><span class="op">,</span> <span class="st">&quot;center&quot;</span>)<span class="op">;</span></span>
<span id="cb4-872"><a href></a> </span>
<span id="cb4-873"><a href></a> <span class="co">// Single slider control for mu</span></span>
<span id="cb4-874"><a href></a> <span class="kw">const</span> sliderContainer <span class="op">=</span> controlsContainer<span class="op">.</span><span class="fu">append</span>(<span class="st">&#39;div&#39;</span>)</span>
<span id="cb4-875"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;display&#39;</span><span class="op">,</span><span class="st">&#39;flex&#39;</span>)</span>
<span id="cb4-876"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;align-items&#39;</span><span class="op">,</span><span class="st">&#39;center&#39;</span>)</span>
<span id="cb4-877"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;gap&#39;</span><span class="op">,</span><span class="st">&#39;10px&#39;</span>)</span>
<span id="cb4-878"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;flex&#39;</span><span class="op">,</span><span class="st">&#39;1&#39;</span>)<span class="op">;</span></span>
<span id="cb4-879"><a href></a> </span>
<span id="cb4-880"><a href></a> sliderContainer<span class="op">.</span><span class="fu">append</span>(<span class="st">&#39;label&#39;</span>)</span>
<span id="cb4-881"><a href></a> <span class="op">.</span><span class="fu">text</span>(<span class="st">&#39;Naive:&#39;</span>)</span>
<span id="cb4-882"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;font-size&#39;</span><span class="op">,</span><span class="st">&#39;20px&#39;</span>)<span class="op">;</span></span>
<span id="cb4-883"><a href></a> </span>
<span id="cb4-884"><a href></a> <span class="kw">const</span> muSlider <span class="op">=</span> sliderContainer<span class="op">.</span><span class="fu">append</span>(<span class="st">&#39;input&#39;</span>)</span>
<span id="cb4-885"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&#39;type&#39;</span><span class="op">,</span><span class="st">&#39;range&#39;</span>)</span>
<span id="cb4-886"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&#39;min&#39;</span><span class="op">,</span> <span class="dv">0</span>)</span>
<span id="cb4-887"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&#39;max&#39;</span><span class="op">,</span> <span class="dv">1</span>)</span>
<span id="cb4-888"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&#39;step&#39;</span><span class="op">,</span> <span class="fl">0.1</span>)</span>
<span id="cb4-889"><a href></a> <span class="op">.</span><span class="fu">property</span>(<span class="st">&#39;value&#39;</span><span class="op">,</span> selectedMu)</span>
<span id="cb4-890"><a href></a> <span class="op">.</span><span class="fu">on</span>(<span class="st">&#39;input&#39;</span><span class="op">,</span> <span class="kw">function</span>(<span class="bu">event</span>) {</span>
<span id="cb4-891"><a href></a> selectedMu <span class="op">=</span> <span class="op">+</span><span class="kw">this</span><span class="op">.</span><span class="at">value</span><span class="op">;</span></span>
<span id="cb4-892"><a href></a> muDisplay<span class="op">.</span><span class="fu">text</span>(selectedMu<span class="op">.</span><span class="fu">toFixed</span>(<span class="dv">1</span>))<span class="op">;</span></span>
<span id="cb4-893"><a href></a> <span class="fu">updateChart</span>(<span class="fu">filteredData</span>())<span class="op">;</span></span>
<span id="cb4-894"><a href></a> })</span>
<span id="cb4-895"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;width&#39;</span><span class="op">,</span> <span class="st">&#39;100%&#39;</span>)</span>
<span id="cb4-896"><a href></a> <span class="co">//.style(&#39;-webkit-appearance&#39;, &#39;none&#39;)</span></span>
<span id="cb4-897"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;appearance&#39;</span><span class="op">,</span> <span class="st">&#39;none&#39;</span>)</span>
<span id="cb4-898"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;height&#39;</span><span class="op">,</span> <span class="st">&#39;8px&#39;</span>)</span>
<span id="cb4-899"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;background&#39;</span><span class="op">,</span> <span class="st">&#39;#BDBDBDFF&#39;</span>)<span class="op">;</span></span>
<span id="cb4-900"><a href></a> </span>
<span id="cb4-901"><a href></a> <span class="kw">const</span> muDisplay <span class="op">=</span> sliderContainer<span class="op">.</span><span class="fu">append</span>(<span class="st">&#39;span&#39;</span>)</span>
<span id="cb4-902"><a href></a> <span class="op">.</span><span class="fu">text</span>(selectedMu<span class="op">.</span><span class="fu">toFixed</span>(<span class="dv">1</span>))</span>
<span id="cb4-903"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;font-size&#39;</span><span class="op">,</span><span class="st">&#39;20px&#39;</span>)<span class="op">;</span></span>
<span id="cb4-904"><a href></a> </span>
<span id="cb4-905"><a href></a> <span class="co">// Add Reset button</span></span>
<span id="cb4-906"><a href></a> controlsContainer<span class="op">.</span><span class="fu">append</span>(<span class="st">&#39;button&#39;</span>)</span>
<span id="cb4-907"><a href></a> <span class="op">.</span><span class="fu">text</span>(<span class="st">&#39;Reset&#39;</span>)</span>
<span id="cb4-908"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;font-size&#39;</span><span class="op">,</span> <span class="st">&#39;20px&#39;</span>)</span>
<span id="cb4-909"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;align-self&#39;</span><span class="op">,</span> <span class="st">&#39;center&#39;</span>)</span>
<span id="cb4-910"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;margin-left&#39;</span><span class="op">,</span> <span class="st">&#39;auto&#39;</span>)</span>
<span id="cb4-911"><a href></a> <span class="op">.</span><span class="fu">on</span>(<span class="st">&#39;click&#39;</span><span class="op">,</span> () <span class="kw">=&gt;</span> {</span>
<span id="cb4-912"><a href></a> selectedMu <span class="op">=</span> <span class="dv">1</span><span class="op">;</span></span>
<span id="cb4-913"><a href></a> muSlider<span class="op">.</span><span class="fu">property</span>(<span class="st">&#39;value&#39;</span><span class="op">,</span> selectedMu)<span class="op">;</span></span>
<span id="cb4-914"><a href></a> muDisplay<span class="op">.</span><span class="fu">text</span>(selectedMu<span class="op">.</span><span class="fu">toFixed</span>(<span class="dv">1</span>))<span class="op">;</span></span>
<span id="cb4-915"><a href></a> <span class="fu">updateChart</span>(<span class="fu">filteredData</span>())<span class="op">;</span></span>
<span id="cb4-916"><a href></a> })<span class="op">;</span></span>
<span id="cb4-917"><a href></a></span>
<span id="cb4-918"><a href></a> <span class="co">// Build SVG</span></span>
<span id="cb4-919"><a href></a> <span class="kw">const</span> width <span class="op">=</span> <span class="dv">600</span><span class="op">;</span></span>
<span id="cb4-920"><a href></a> <span class="kw">const</span> height <span class="op">=</span> <span class="dv">450</span><span class="op">;</span></span>
<span id="cb4-921"><a href></a> <span class="kw">const</span> margin <span class="op">=</span> {<span class="dt">top</span><span class="op">:</span> <span class="dv">40</span><span class="op">,</span> <span class="dt">right</span><span class="op">:</span> <span class="dv">20</span><span class="op">,</span> <span class="dt">bottom</span><span class="op">:</span> <span class="dv">40</span><span class="op">,</span> <span class="dt">left</span><span class="op">:</span> <span class="dv">40</span>}<span class="op">;</span></span>
<span id="cb4-922"><a href></a> <span class="kw">const</span> innerWidth <span class="op">=</span> width <span class="op">-</span> margin<span class="op">.</span><span class="at">left</span> <span class="op">-</span> margin<span class="op">.</span><span class="at">right</span><span class="op">;</span></span>
<span id="cb4-923"><a href></a> <span class="kw">const</span> innerHeight <span class="op">=</span> height <span class="op">-</span> margin<span class="op">.</span><span class="at">top</span> <span class="op">-</span> margin<span class="op">.</span><span class="at">bottom</span><span class="op">;</span></span>
<span id="cb4-924"><a href></a></span>
<span id="cb4-925"><a href></a> <span class="co">// Set controls container width to match SVG plot width</span></span>
<span id="cb4-926"><a href></a> controlsContainer<span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;max-width&quot;</span><span class="op">,</span> <span class="st">&quot;none&quot;</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;width&quot;</span><span class="op">,</span> <span class="st">&quot;100%&quot;</span>)<span class="op">;</span></span>
<span id="cb4-927"><a href></a> <span class="co">// Distribute each control evenly and make sliders full-width</span></span>
<span id="cb4-928"><a href></a> controlsContainer<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">&quot;div&quot;</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;flex&quot;</span><span class="op">,</span> <span class="st">&quot;1&quot;</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;min-width&quot;</span><span class="op">,</span> <span class="st">&quot;0px&quot;</span>)<span class="op">;</span></span>
<span id="cb4-929"><a href></a> controlsContainer<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">&quot;input&quot;</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;width&quot;</span><span class="op">,</span> <span class="st">&quot;100%&quot;</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;box-sizing&quot;</span><span class="op">,</span> <span class="st">&quot;border-box&quot;</span>)<span class="op">;</span></span>
<span id="cb4-930"><a href></a> </span>
<span id="cb4-931"><a href></a> <span class="co">// Create scales</span></span>
<span id="cb4-932"><a href></a> <span class="kw">const</span> x <span class="op">=</span> d3<span class="op">.</span><span class="fu">scaleLinear</span>()</span>
<span id="cb4-933"><a href></a> <span class="op">.</span><span class="fu">range</span>([<span class="dv">0</span><span class="op">,</span> innerWidth])<span class="op">;</span></span>
<span id="cb4-934"><a href></a> </span>
<span id="cb4-935"><a href></a> <span class="kw">const</span> y <span class="op">=</span> d3<span class="op">.</span><span class="fu">scaleLinear</span>()</span>
<span id="cb4-936"><a href></a> <span class="op">.</span><span class="fu">range</span>([innerHeight<span class="op">,</span> <span class="dv">0</span>])<span class="op">;</span></span>
<span id="cb4-937"><a href></a> </span>
<span id="cb4-938"><a href></a> <span class="co">// Create a color scale for the basis functions</span></span>
<span id="cb4-939"><a href></a> <span class="kw">const</span> color <span class="op">=</span> d3<span class="op">.</span><span class="fu">scaleOrdinal</span>([<span class="st">&quot;#80C684FF&quot;</span><span class="op">,</span> <span class="st">&quot;#FFD44EFF&quot;</span><span class="op">,</span> <span class="st">&quot;#D81A5FFF&quot;</span>])<span class="op">;</span></span>
<span id="cb4-940"><a href></a> </span>
<span id="cb4-941"><a href></a> <span class="co">// Create SVG</span></span>
<span id="cb4-942"><a href></a> <span class="kw">const</span> svg <span class="op">=</span> d3<span class="op">.</span><span class="fu">create</span>(<span class="st">&quot;svg&quot;</span>)</span>
<span id="cb4-943"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;width&quot;</span><span class="op">,</span> <span class="st">&quot;100%&quot;</span>)</span>
<span id="cb4-944"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;height&quot;</span><span class="op">,</span> <span class="st">&quot;auto&quot;</span>)</span>
<span id="cb4-945"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;viewBox&quot;</span><span class="op">,</span> [<span class="dv">0</span><span class="op">,</span> <span class="dv">0</span><span class="op">,</span> width<span class="op">,</span> height])</span>
<span id="cb4-946"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;preserveAspectRatio&quot;</span><span class="op">,</span> <span class="st">&quot;xMidYMid meet&quot;</span>)</span>
<span id="cb4-947"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;style&quot;</span><span class="op">,</span> <span class="st">&quot;max-width: 100%; height: auto;&quot;</span>)<span class="op">;</span></span>
<span id="cb4-948"><a href></a> </span>
<span id="cb4-949"><a href></a> <span class="co">// Create scales</span></span>
<span id="cb4-950"><a href></a> <span class="kw">const</span> x <span class="op">=</span> d3<span class="op">.</span><span class="fu">scaleLinear</span>()</span>
<span id="cb4-951"><a href></a> <span class="op">.</span><span class="fu">range</span>([<span class="dv">0</span><span class="op">,</span> innerWidth])<span class="op">;</span></span>
<span id="cb4-952"><a href></a> </span>
<span id="cb4-953"><a href></a> <span class="kw">const</span> y <span class="op">=</span> d3<span class="op">.</span><span class="fu">scaleLinear</span>()</span>
<span id="cb4-954"><a href></a> <span class="op">.</span><span class="fu">range</span>([innerHeight<span class="op">,</span> <span class="dv">0</span>])<span class="op">;</span></span>
<span id="cb4-955"><a href></a> </span>
<span id="cb4-956"><a href></a> <span class="co">// Create a color scale for the basis functions</span></span>
<span id="cb4-957"><a href></a> <span class="kw">const</span> color <span class="op">=</span> d3<span class="op">.</span><span class="fu">scaleOrdinal</span>([<span class="st">&quot;#80C684FF&quot;</span><span class="op">,</span> <span class="st">&quot;#FFD44EFF&quot;</span><span class="op">,</span> <span class="st">&quot;#D81A5FFF&quot;</span>])<span class="op">;</span></span>
<span id="cb4-958"><a href></a> </span>
<span id="cb4-959"><a href></a> <span class="co">// Create SVG</span></span>
<span id="cb4-960"><a href></a> <span class="kw">const</span> svg <span class="op">=</span> d3<span class="op">.</span><span class="fu">create</span>(<span class="st">&quot;svg&quot;</span>)</span>
<span id="cb4-961"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;width&quot;</span><span class="op">,</span> <span class="st">&quot;100%&quot;</span>)</span>
<span id="cb4-962"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;height&quot;</span><span class="op">,</span> <span class="st">&quot;auto&quot;</span>)</span>
<span id="cb4-963"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;viewBox&quot;</span><span class="op">,</span> [<span class="dv">0</span><span class="op">,</span> <span class="dv">0</span><span class="op">,</span> width<span class="op">,</span> height])</span>
<span id="cb4-964"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;preserveAspectRatio&quot;</span><span class="op">,</span> <span class="st">&quot;xMidYMid meet&quot;</span>)</span>
<span id="cb4-965"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;style&quot;</span><span class="op">,</span> <span class="st">&quot;max-width: 100%; height: auto;&quot;</span>)<span class="op">;</span></span>
<span id="cb4-966"><a href></a> </span>
<span id="cb4-967"><a href></a> <span class="co">// Create the chart group</span></span>
<span id="cb4-968"><a href></a> <span class="kw">const</span> g <span class="op">=</span> svg<span class="op">.</span><span class="fu">append</span>(<span class="st">&quot;g&quot;</span>)</span>
<span id="cb4-969"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;transform&quot;</span><span class="op">,</span> <span class="vs">`translate(</span><span class="sc">${</span>margin<span class="op">.</span><span class="at">left</span><span class="sc">}</span><span class="vs">,</span><span class="sc">${</span>margin<span class="op">.</span><span class="at">top</span><span class="sc">}</span><span class="vs">)`</span>)<span class="op">;</span></span>
<span id="cb4-970"><a href></a> </span>
<span id="cb4-971"><a href></a> <span class="co">// Add axes</span></span>
<span id="cb4-972"><a href></a> <span class="kw">const</span> xAxis <span class="op">=</span> g<span class="op">.</span><span class="fu">append</span>(<span class="st">&quot;g&quot;</span>)</span>
<span id="cb4-973"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;transform&quot;</span><span class="op">,</span> <span class="vs">`translate(0,</span><span class="sc">${</span>innerHeight<span class="sc">}</span><span class="vs">)`</span>)</span>
<span id="cb4-974"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;class&quot;</span><span class="op">,</span> <span class="st">&quot;x-axis&quot;</span>)</span>
<span id="cb4-975"><a href></a> <span class="op">.</span><span class="fu">call</span>(d3<span class="op">.</span><span class="fu">axisBottom</span>(x)<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">10</span>))</span>
<span id="cb4-976"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;font-size&quot;</span><span class="op">,</span> <span class="st">&quot;20px&quot;</span>)<span class="op">;</span></span>
<span id="cb4-977"><a href></a> </span>
<span id="cb4-978"><a href></a> <span class="kw">const</span> yAxis <span class="op">=</span> g<span class="op">.</span><span class="fu">append</span>(<span class="st">&quot;g&quot;</span>)</span>
<span id="cb4-979"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;class&quot;</span><span class="op">,</span> <span class="st">&quot;y-axis&quot;</span>)</span>
<span id="cb4-980"><a href></a> <span class="op">.</span><span class="fu">call</span>(d3<span class="op">.</span><span class="fu">axisLeft</span>(y)<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">5</span>))</span>
<span id="cb4-981"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;font-size&quot;</span><span class="op">,</span> <span class="st">&quot;20px&quot;</span>)<span class="op">;</span></span>
<span id="cb4-982"><a href></a> </span>
<span id="cb4-983"><a href></a> <span class="co">// Add a horizontal line at y = 0</span></span>
<span id="cb4-984"><a href></a> g<span class="op">.</span><span class="fu">append</span>(<span class="st">&quot;line&quot;</span>)</span>
<span id="cb4-985"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;x1&quot;</span><span class="op">,</span> <span class="dv">0</span>)</span>
<span id="cb4-986"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;x2&quot;</span><span class="op">,</span> innerWidth)</span>
<span id="cb4-987"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;y1&quot;</span><span class="op">,</span> <span class="fu">y</span>(<span class="dv">0</span>))</span>
<span id="cb4-988"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;y2&quot;</span><span class="op">,</span> <span class="fu">y</span>(<span class="dv">0</span>))</span>
<span id="cb4-989"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;stroke&quot;</span><span class="op">,</span> <span class="st">&quot;#000&quot;</span>)</span>
<span id="cb4-990"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;stroke-opacity&quot;</span><span class="op">,</span> <span class="fl">0.2</span>)<span class="op">;</span></span>
<span id="cb4-991"><a href></a> </span>
<span id="cb4-992"><a href></a> <span class="co">// Add gridlines</span></span>
<span id="cb4-993"><a href></a> g<span class="op">.</span><span class="fu">append</span>(<span class="st">&quot;g&quot;</span>)</span>
<span id="cb4-994"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;class&quot;</span><span class="op">,</span> <span class="st">&quot;grid-lines&quot;</span>)</span>
<span id="cb4-995"><a href></a> <span class="op">.</span><span class="fu">selectAll</span>(<span class="st">&quot;line&quot;</span>)</span>
<span id="cb4-996"><a href></a> <span class="op">.</span><span class="fu">data</span>(y<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">5</span>))</span>
<span id="cb4-997"><a href></a> <span class="op">.</span><span class="fu">join</span>(<span class="st">&quot;line&quot;</span>)</span>
<span id="cb4-998"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;x1&quot;</span><span class="op">,</span> <span class="dv">0</span>)</span>
<span id="cb4-999"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;x2&quot;</span><span class="op">,</span> innerWidth)</span>
<span id="cb4-1000"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;y1&quot;</span><span class="op">,</span> d <span class="kw">=&gt;</span> <span class="fu">y</span>(d))</span>
<span id="cb4-1001"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;y2&quot;</span><span class="op">,</span> d <span class="kw">=&gt;</span> <span class="fu">y</span>(d))</span>
<span id="cb4-1002"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;stroke&quot;</span><span class="op">,</span> <span class="st">&quot;#ccc&quot;</span>)</span>
<span id="cb4-1003"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;stroke-opacity&quot;</span><span class="op">,</span> <span class="fl">0.5</span>)<span class="op">;</span></span>
<span id="cb4-949"><a href></a> <span class="co">// Create the chart group</span></span>
<span id="cb4-950"><a href></a> <span class="kw">const</span> g <span class="op">=</span> svg<span class="op">.</span><span class="fu">append</span>(<span class="st">&quot;g&quot;</span>)</span>
<span id="cb4-951"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;transform&quot;</span><span class="op">,</span> <span class="vs">`translate(</span><span class="sc">${</span>margin<span class="op">.</span><span class="at">left</span><span class="sc">}</span><span class="vs">,</span><span class="sc">${</span>margin<span class="op">.</span><span class="at">top</span><span class="sc">}</span><span class="vs">)`</span>)<span class="op">;</span></span>
<span id="cb4-952"><a href></a> </span>
<span id="cb4-953"><a href></a> <span class="co">// Add axes</span></span>
<span id="cb4-954"><a href></a> <span class="kw">const</span> xAxis <span class="op">=</span> g<span class="op">.</span><span class="fu">append</span>(<span class="st">&quot;g&quot;</span>)</span>
<span id="cb4-955"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;transform&quot;</span><span class="op">,</span> <span class="vs">`translate(0,</span><span class="sc">${</span>innerHeight<span class="sc">}</span><span class="vs">)`</span>)</span>
<span id="cb4-956"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;class&quot;</span><span class="op">,</span> <span class="st">&quot;x-axis&quot;</span>)</span>
<span id="cb4-957"><a href></a> <span class="op">.</span><span class="fu">call</span>(d3<span class="op">.</span><span class="fu">axisBottom</span>(x)<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">10</span>))</span>
<span id="cb4-958"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;font-size&quot;</span><span class="op">,</span> <span class="st">&quot;20px&quot;</span>)<span class="op">;</span></span>
<span id="cb4-959"><a href></a> </span>
<span id="cb4-960"><a href></a> <span class="kw">const</span> yAxis <span class="op">=</span> g<span class="op">.</span><span class="fu">append</span>(<span class="st">&quot;g&quot;</span>)</span>
<span id="cb4-961"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;class&quot;</span><span class="op">,</span> <span class="st">&quot;y-axis&quot;</span>)</span>
<span id="cb4-962"><a href></a> <span class="op">.</span><span class="fu">call</span>(d3<span class="op">.</span><span class="fu">axisLeft</span>(y)<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">5</span>))</span>
<span id="cb4-963"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;font-size&quot;</span><span class="op">,</span> <span class="st">&quot;20px&quot;</span>)<span class="op">;</span></span>
<span id="cb4-964"><a href></a> </span>
<span id="cb4-965"><a href></a> <span class="co">// Add a horizontal line at y = 0</span></span>
<span id="cb4-966"><a href></a> g<span class="op">.</span><span class="fu">append</span>(<span class="st">&quot;line&quot;</span>)</span>
<span id="cb4-967"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;x1&quot;</span><span class="op">,</span> <span class="dv">0</span>)</span>
<span id="cb4-968"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;x2&quot;</span><span class="op">,</span> innerWidth)</span>
<span id="cb4-969"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;y1&quot;</span><span class="op">,</span> <span class="fu">y</span>(<span class="dv">0</span>))</span>
<span id="cb4-970"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;y2&quot;</span><span class="op">,</span> <span class="fu">y</span>(<span class="dv">0</span>))</span>
<span id="cb4-971"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;stroke&quot;</span><span class="op">,</span> <span class="st">&quot;#000&quot;</span>)</span>
<span id="cb4-972"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;stroke-opacity&quot;</span><span class="op">,</span> <span class="fl">0.2</span>)<span class="op">;</span></span>
<span id="cb4-973"><a href></a> </span>
<span id="cb4-974"><a href></a> <span class="co">// Add gridlines</span></span>
<span id="cb4-975"><a href></a> g<span class="op">.</span><span class="fu">append</span>(<span class="st">&quot;g&quot;</span>)</span>
<span id="cb4-976"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;class&quot;</span><span class="op">,</span> <span class="st">&quot;grid-lines&quot;</span>)</span>
<span id="cb4-977"><a href></a> <span class="op">.</span><span class="fu">selectAll</span>(<span class="st">&quot;line&quot;</span>)</span>
<span id="cb4-978"><a href></a> <span class="op">.</span><span class="fu">data</span>(y<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">5</span>))</span>
<span id="cb4-979"><a href></a> <span class="op">.</span><span class="fu">join</span>(<span class="st">&quot;line&quot;</span>)</span>
<span id="cb4-980"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;x1&quot;</span><span class="op">,</span> <span class="dv">0</span>)</span>
<span id="cb4-981"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;x2&quot;</span><span class="op">,</span> innerWidth)</span>
<span id="cb4-982"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;y1&quot;</span><span class="op">,</span> d <span class="kw">=&gt;</span> <span class="fu">y</span>(d))</span>
<span id="cb4-983"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;y2&quot;</span><span class="op">,</span> d <span class="kw">=&gt;</span> <span class="fu">y</span>(d))</span>
<span id="cb4-984"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;stroke&quot;</span><span class="op">,</span> <span class="st">&quot;#ccc&quot;</span>)</span>
<span id="cb4-985"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;stroke-opacity&quot;</span><span class="op">,</span> <span class="fl">0.5</span>)<span class="op">;</span></span>
<span id="cb4-986"><a href></a> </span>
<span id="cb4-987"><a href></a> <span class="co">// Create a line generator</span></span>
<span id="cb4-988"><a href></a> <span class="kw">const</span> line <span class="op">=</span> d3<span class="op">.</span><span class="fu">line</span>()</span>
<span id="cb4-989"><a href></a> <span class="op">.</span><span class="fu">x</span>(d <span class="kw">=&gt;</span> <span class="fu">x</span>(d<span class="op">.</span><span class="at">x</span>))</span>
<span id="cb4-990"><a href></a> <span class="op">.</span><span class="fu">y</span>(d <span class="kw">=&gt;</span> <span class="fu">y</span>(d<span class="op">.</span><span class="at">y</span>))</span>
<span id="cb4-991"><a href></a> <span class="op">.</span><span class="fu">curve</span>(d3<span class="op">.</span><span class="at">curveBasis</span>)<span class="op">;</span></span>
<span id="cb4-992"><a href></a> </span>
<span id="cb4-993"><a href></a> <span class="co">// Group to contain the basis function lines</span></span>
<span id="cb4-994"><a href></a> <span class="kw">const</span> linesGroup <span class="op">=</span> g<span class="op">.</span><span class="fu">append</span>(<span class="st">&quot;g&quot;</span>)</span>
<span id="cb4-995"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;class&quot;</span><span class="op">,</span> <span class="st">&quot;basis-functions&quot;</span>)<span class="op">;</span></span>
<span id="cb4-996"><a href></a> </span>
<span id="cb4-997"><a href></a> <span class="co">// Store the current basis functions for transition</span></span>
<span id="cb4-998"><a href></a> <span class="kw">let</span> currentBasisFunctions <span class="op">=</span> <span class="kw">new</span> <span class="bu">Map</span>()<span class="op">;</span></span>
<span id="cb4-999"><a href></a> </span>
<span id="cb4-1000"><a href></a> <span class="co">// Function to update the chart with new data</span></span>
<span id="cb4-1001"><a href></a> <span class="kw">function</span> <span class="fu">updateChart</span>(data) {</span>
<span id="cb4-1002"><a href></a> <span class="fu">updateChartInner</span>(g<span class="op">,</span> x<span class="op">,</span> y<span class="op">,</span> linesGroup<span class="op">,</span> color<span class="op">,</span> line<span class="op">,</span> data)<span class="op">;</span></span>
<span id="cb4-1003"><a href></a> }</span>
<span id="cb4-1004"><a href></a> </span>
<span id="cb4-1005"><a href></a> <span class="co">// Create a line generator</span></span>
<span id="cb4-1006"><a href></a> <span class="kw">const</span> line <span class="op">=</span> d3<span class="op">.</span><span class="fu">line</span>()</span>
<span id="cb4-1007"><a href></a> <span class="op">.</span><span class="fu">x</span>(d <span class="kw">=&gt;</span> <span class="fu">x</span>(d<span class="op">.</span><span class="at">x</span>))</span>
<span id="cb4-1008"><a href></a> <span class="op">.</span><span class="fu">y</span>(d <span class="kw">=&gt;</span> <span class="fu">y</span>(d<span class="op">.</span><span class="at">y</span>))</span>
<span id="cb4-1009"><a href></a> <span class="op">.</span><span class="fu">curve</span>(d3<span class="op">.</span><span class="at">curveBasis</span>)<span class="op">;</span></span>
<span id="cb4-1005"><a href></a> <span class="co">// Store the update function</span></span>
<span id="cb4-1006"><a href></a> svg<span class="op">.</span><span class="fu">node</span>()<span class="op">.</span><span class="at">update</span> <span class="op">=</span> updateChart<span class="op">;</span></span>
<span id="cb4-1007"><a href></a> </span>
<span id="cb4-1008"><a href></a> <span class="co">// Initial render</span></span>
<span id="cb4-1009"><a href></a> <span class="fu">updateChart</span>(<span class="fu">filteredData</span>())<span class="op">;</span></span>
<span id="cb4-1010"><a href></a> </span>
<span id="cb4-1011"><a href></a> <span class="co">// Group to contain the basis function lines</span></span>
<span id="cb4-1012"><a href></a> <span class="kw">const</span> linesGroup <span class="op">=</span> g<span class="op">.</span><span class="fu">append</span>(<span class="st">&quot;g&quot;</span>)</span>
<span id="cb4-1013"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;class&quot;</span><span class="op">,</span> <span class="st">&quot;basis-functions&quot;</span>)<span class="op">;</span></span>
<span id="cb4-1014"><a href></a> </span>
<span id="cb4-1015"><a href></a> <span class="co">// Store the current basis functions for transition</span></span>
<span id="cb4-1016"><a href></a> <span class="kw">let</span> currentBasisFunctions <span class="op">=</span> <span class="kw">new</span> <span class="bu">Map</span>()<span class="op">;</span></span>
<span id="cb4-1017"><a href></a> </span>
<span id="cb4-1018"><a href></a> <span class="co">// Function to update the chart with new data</span></span>
<span id="cb4-1019"><a href></a> <span class="kw">function</span> <span class="fu">updateChart</span>(data) {</span>
<span id="cb4-1020"><a href></a> <span class="fu">updateChartInner</span>(g<span class="op">,</span> x<span class="op">,</span> y<span class="op">,</span> linesGroup<span class="op">,</span> color<span class="op">,</span> line<span class="op">,</span> data)<span class="op">;</span></span>
<span id="cb4-1021"><a href></a> }</span>
<span id="cb4-1022"><a href></a> </span>
<span id="cb4-1023"><a href></a> <span class="co">// Store the update function</span></span>
<span id="cb4-1024"><a href></a> svg<span class="op">.</span><span class="fu">node</span>()<span class="op">.</span><span class="at">update</span> <span class="op">=</span> updateChart<span class="op">;</span></span>
<span id="cb4-1025"><a href></a> </span>
<span id="cb4-1026"><a href></a> <span class="co">// Initial render</span></span>
<span id="cb4-1027"><a href></a> <span class="fu">updateChart</span>(<span class="fu">filteredData</span>())<span class="op">;</span></span>
<span id="cb4-1028"><a href></a> </span>
<span id="cb4-1029"><a href></a> container<span class="op">.</span><span class="fu">node</span>()<span class="op">.</span><span class="fu">appendChild</span>(svg<span class="op">.</span><span class="fu">node</span>())<span class="op">;</span></span>
<span id="cb4-1030"><a href></a> <span class="cf">return</span> container<span class="op">.</span><span class="fu">node</span>()<span class="op">;</span></span>
<span id="cb4-1031"><a href></a>}</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<span id="cb4-1011"><a href></a> container<span class="op">.</span><span class="fu">node</span>()<span class="op">.</span><span class="fu">appendChild</span>(svg<span class="op">.</span><span class="fu">node</span>())<span class="op">;</span></span>
<span id="cb4-1012"><a href></a> <span class="cf">return</span> container<span class="op">.</span><span class="fu">node</span>()<span class="op">;</span></span>
<span id="cb4-1013"><a href></a>}</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<div class="cell-output cell-output-display">
<div>
<div id="ojs-cell-3-1" data-nodetype="declaration">
@@ -26161,7 +26173,7 @@ Berrisch, J. <span class="citation" data-cites="berrisch2025rcpptimer">(<a href=
</section>
<section id="the-framework-of-prediction-under-expert-advice" class="slide level2">
<h2>The Framework of Prediction under Expert Advice</h2>
<h3 id="section"> </h3>
<h3 id="section-1"> </h3>
<p>Each day, <span class="math inline">\(t = 1, 2, ... T\)</span></p>
<ul>
<li>The <strong>forecaster</strong> receives predictions <span class="math inline">\(\widehat{X}_{t,k}\)</span> from <span class="math inline">\(K\)</span> <strong>experts</strong></li>
@@ -26209,7 +26221,7 @@ Berrisch, J. <span class="citation" data-cites="berrisch2025rcpptimer">(<a href=
<p>Strictly proper for <em>median</em> predictions</p>
</div></div>
</section>
<section id="section-1" class="slide level2">
<section id="section-2" class="slide level2">
<h2> </h2>
<div class="columns">
<div class="column" style="width:48%;">
@@ -26275,7 +26287,7 @@ w_{t,k}^{\text{Naive}} = \frac{1}{K}\label{eq:naive_combination}
</ul>
</div></div>
</section>
<section id="section-2" class="slide level2">
<section id="section-3" class="slide level2">
<h2></h2>
<div class="columns">
<div class="column" style="width:48%;">
@@ -26600,7 +26612,7 @@ w_{t,k}^{\text{smooth}} = \sum_{l=1}^L \beta_l \varphi_l = \beta&#39;\varphi
</div><div class="column" style="width:4%;">
</div><div class="column" style="width:58%;">
<h3 id="section-3"> </h3>
<h3 id="section-4"> </h3>
<div class="cell" data-layout-align="center">
<div class="cell-output-display">
<div class="quarto-figure quarto-figure-center">
@@ -27220,7 +27232,7 @@ Y_{t} = \mu + Y_{t-1} + \varepsilon_t \quad \text{with} \quad \varepsilon_t = \
<div class="tab-content">
<div id="tabset-12-1">
<div class="cell">
<div class="sourceCode cell-code hidden" id="cb5" data-startfrom="2676" data-source-offset="0"><pre class="sourceCode numberSource js number-lines code-with-copy"><code class="sourceCode javascript" style="counter-reset: source-line 2675;"><span id="cb5-2676"><a href></a>bsplineData <span class="op">=</span> <span class="fu">FileAttachment</span>(<span class="st">&quot;assets/mcrps_learning/basis_functions.csv&quot;</span>)<span class="op">.</span><span class="fu">csv</span>({ <span class="dt">typed</span><span class="op">:</span> <span class="kw">true</span> })</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<div class="sourceCode cell-code hidden" id="cb5" data-startfrom="2658" data-source-offset="0"><pre class="sourceCode numberSource js number-lines code-with-copy"><code class="sourceCode javascript" style="counter-reset: source-line 2657;"><span id="cb5-2658"><a href></a>bsplineData <span class="op">=</span> <span class="fu">FileAttachment</span>(<span class="st">&quot;assets/mcrps_learning/basis_functions.csv&quot;</span>)<span class="op">.</span><span class="fu">csv</span>({ <span class="dt">typed</span><span class="op">:</span> <span class="kw">true</span> })</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<div class="cell-output cell-output-display">
<div id="ojs-cell-4" data-nodetype="declaration">
@@ -27228,194 +27240,194 @@ Y_{t} = \mu + Y_{t-1} + \varepsilon_t \quad \text{with} \quad \varepsilon_t = \
</div>
</div>
<div class="cell">
<div class="sourceCode cell-code hidden" id="cb6" data-startfrom="2680" data-source-offset="0"><pre class="sourceCode numberSource js number-lines code-with-copy"><code class="sourceCode javascript" style="counter-reset: source-line 2679;"><span id="cb6-2680"><a href></a><span class="co">// Defined above</span></span>
<span id="cb6-2681"><a href></a><span class="co">// function updateChartInner(g, x, y, linesGroup, color, line, data) {</span></span>
<span id="cb6-2682"><a href></a><span class="co">// // Update axes with transitions</span></span>
<span id="cb6-2683"><a href></a><span class="co">// x.domain([0, d3.max(data, d =&gt; d.x)]);</span></span>
<span id="cb6-2684"><a href></a><span class="co">// g.select(&quot;.x-axis&quot;).transition().duration(1500).call(d3.axisBottom(x).ticks(10));</span></span>
<span id="cb6-2685"><a href></a><span class="co">// y.domain([0, d3.max(data, d =&gt; d.y)]);</span></span>
<span id="cb6-2686"><a href></a><span class="co">// g.select(&quot;.y-axis&quot;).transition().duration(1500).call(d3.axisLeft(y).ticks(5));</span></span>
<span id="cb6-2687"><a href></a></span>
<span id="cb6-2688"><a href></a><span class="co">// // Group data by basis function</span></span>
<span id="cb6-2689"><a href></a><span class="co">// const dataByFunction = Array.from(d3.group(data, d =&gt; d.b));</span></span>
<span id="cb6-2690"><a href></a><span class="co">// const keyFn = d =&gt; d[0];</span></span>
<span id="cb6-2691"><a href></a></span>
<span id="cb6-2692"><a href></a><span class="co">// // Update basis function lines</span></span>
<span id="cb6-2693"><a href></a><span class="co">// const u = linesGroup.selectAll(&quot;path&quot;).data(dataByFunction, keyFn);</span></span>
<span id="cb6-2694"><a href></a><span class="co">// u.join(</span></span>
<span id="cb6-2695"><a href></a><span class="co">// enter =&gt; enter.append(&quot;path&quot;).attr(&quot;fill&quot;,&quot;none&quot;).attr(&quot;stroke-width&quot;,3)</span></span>
<span id="cb6-2696"><a href></a><span class="co">// .attr(&quot;stroke&quot;, (_, i) =&gt; color(i)).attr(&quot;d&quot;, d =&gt; line(d[1].map(pt =&gt; ({x: pt.x, y: 0}))))</span></span>
<span id="cb6-2697"><a href></a><span class="co">// .style(&quot;opacity&quot;,0),</span></span>
<span id="cb6-2698"><a href></a><span class="co">// update =&gt; update,</span></span>
<span id="cb6-2699"><a href></a><span class="co">// exit =&gt; exit.transition().duration(1000).style(&quot;opacity&quot;,0).remove()</span></span>
<span id="cb6-2700"><a href></a><span class="co">// )</span></span>
<span id="cb6-2701"><a href></a><span class="co">// .transition().duration(1000)</span></span>
<span id="cb6-2702"><a href></a><span class="co">// .attr(&quot;d&quot;, d =&gt; line(d[1]))</span></span>
<span id="cb6-2703"><a href></a><span class="co">// .attr(&quot;stroke&quot;, (_, i) =&gt; color(i))</span></span>
<span id="cb6-2704"><a href></a><span class="co">// .style(&quot;opacity&quot;,1);</span></span>
<span id="cb6-2705"><a href></a><span class="co">// }</span></span>
<span id="cb6-2706"><a href></a></span>
<span id="cb6-2707"><a href></a>chart0 <span class="op">=</span> {</span>
<span id="cb6-2708"><a href></a> <span class="co">// State variables for selected parameters</span></span>
<span id="cb6-2709"><a href></a> <span class="kw">let</span> selectedMu <span class="op">=</span> <span class="fl">0.5</span><span class="op">;</span></span>
<span id="cb6-2710"><a href></a> <span class="kw">let</span> selectedSig <span class="op">=</span> <span class="dv">1</span><span class="op">;</span></span>
<span id="cb6-2711"><a href></a> <span class="kw">let</span> selectedNonc <span class="op">=</span> <span class="dv">0</span><span class="op">;</span></span>
<span id="cb6-2712"><a href></a> <span class="kw">let</span> selectedTailw <span class="op">=</span> <span class="dv">1</span><span class="op">;</span></span>
<span id="cb6-2713"><a href></a> <span class="kw">const</span> filteredData <span class="op">=</span> () <span class="kw">=&gt;</span> bsplineData<span class="op">.</span><span class="fu">filter</span>(d <span class="kw">=&gt;</span></span>
<span id="cb6-2714"><a href></a> <span class="bu">Math</span><span class="op">.</span><span class="fu">abs</span>(selectedMu <span class="op">-</span> d<span class="op">.</span><span class="at">mu</span>) <span class="op">&lt;</span> <span class="fl">0.001</span> <span class="op">&amp;&amp;</span></span>
<span id="cb6-2715"><a href></a> d<span class="op">.</span><span class="at">sig</span> <span class="op">===</span> selectedSig <span class="op">&amp;&amp;</span></span>
<span id="cb6-2716"><a href></a> d<span class="op">.</span><span class="at">nonc</span> <span class="op">===</span> selectedNonc <span class="op">&amp;&amp;</span></span>
<span id="cb6-2717"><a href></a> d<span class="op">.</span><span class="at">tailw</span> <span class="op">===</span> selectedTailw</span>
<span id="cb6-2718"><a href></a> )<span class="op">;</span></span>
<span id="cb6-2719"><a href></a> <span class="kw">const</span> container <span class="op">=</span> d3<span class="op">.</span><span class="fu">create</span>(<span class="st">&quot;div&quot;</span>)</span>
<span id="cb6-2720"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;max-width&quot;</span><span class="op">,</span> <span class="st">&quot;none&quot;</span>)</span>
<span id="cb6-2721"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;width&quot;</span><span class="op">,</span> <span class="st">&quot;100%&quot;</span>)<span class="op">;;</span></span>
<span id="cb6-2722"><a href></a> <span class="kw">const</span> controlsContainer <span class="op">=</span> container<span class="op">.</span><span class="fu">append</span>(<span class="st">&quot;div&quot;</span>)</span>
<span id="cb6-2723"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;display&quot;</span><span class="op">,</span> <span class="st">&quot;flex&quot;</span>)</span>
<span id="cb6-2724"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;gap&quot;</span><span class="op">,</span> <span class="st">&quot;20px&quot;</span>)<span class="op">;</span></span>
<span id="cb6-2725"><a href></a> <span class="co">// slider controls</span></span>
<span id="cb6-2726"><a href></a> <span class="kw">const</span> sliders <span class="op">=</span> [</span>
<span id="cb6-2727"><a href></a> { <span class="dt">label</span><span class="op">:</span> <span class="st">&#39;Mu&#39;</span><span class="op">,</span> <span class="kw">get</span><span class="op">:</span> () <span class="kw">=&gt;</span> selectedMu<span class="op">,</span> <span class="kw">set</span><span class="op">:</span> v <span class="kw">=&gt;</span> selectedMu <span class="op">=</span> v<span class="op">,</span> <span class="dt">min</span><span class="op">:</span> <span class="fl">0.1</span><span class="op">,</span> <span class="dt">max</span><span class="op">:</span> <span class="fl">0.9</span><span class="op">,</span> <span class="dt">step</span><span class="op">:</span> <span class="fl">0.2</span> }<span class="op">,</span></span>
<span id="cb6-2728"><a href></a> { <span class="dt">label</span><span class="op">:</span> <span class="st">&#39;Sigma&#39;</span><span class="op">,</span> <span class="kw">get</span><span class="op">:</span> () <span class="kw">=&gt;</span> <span class="bu">Math</span><span class="op">.</span><span class="fu">log2</span>(selectedSig)<span class="op">,</span> <span class="kw">set</span><span class="op">:</span> v <span class="kw">=&gt;</span> selectedSig <span class="op">=</span> <span class="dv">2</span> <span class="op">**</span> v<span class="op">,</span> <span class="dt">min</span><span class="op">:</span> <span class="op">-</span><span class="dv">2</span><span class="op">,</span> <span class="dt">max</span><span class="op">:</span> <span class="dv">2</span><span class="op">,</span> <span class="dt">step</span><span class="op">:</span> <span class="dv">1</span> }<span class="op">,</span></span>
<span id="cb6-2729"><a href></a> { <span class="dt">label</span><span class="op">:</span> <span class="st">&#39;Noncentrality&#39;</span><span class="op">,</span> <span class="kw">get</span><span class="op">:</span> () <span class="kw">=&gt;</span> selectedNonc<span class="op">,</span> <span class="kw">set</span><span class="op">:</span> v <span class="kw">=&gt;</span> selectedNonc <span class="op">=</span> v<span class="op">,</span> <span class="dt">min</span><span class="op">:</span> <span class="op">-</span><span class="dv">4</span><span class="op">,</span> <span class="dt">max</span><span class="op">:</span> <span class="dv">4</span><span class="op">,</span> <span class="dt">step</span><span class="op">:</span> <span class="dv">2</span> }<span class="op">,</span></span>
<span id="cb6-2730"><a href></a> { <span class="dt">label</span><span class="op">:</span> <span class="st">&#39;Tailweight&#39;</span><span class="op">,</span> <span class="kw">get</span><span class="op">:</span> () <span class="kw">=&gt;</span> <span class="bu">Math</span><span class="op">.</span><span class="fu">log2</span>(selectedTailw)<span class="op">,</span> <span class="kw">set</span><span class="op">:</span> v <span class="kw">=&gt;</span> selectedTailw <span class="op">=</span> <span class="dv">2</span> <span class="op">**</span> v<span class="op">,</span> <span class="dt">min</span><span class="op">:</span> <span class="op">-</span><span class="dv">2</span><span class="op">,</span> <span class="dt">max</span><span class="op">:</span> <span class="dv">2</span><span class="op">,</span> <span class="dt">step</span><span class="op">:</span> <span class="dv">1</span> }</span>
<span id="cb6-2731"><a href></a> ]<span class="op">;</span></span>
<span id="cb6-2732"><a href></a> <span class="co">// Build slider controls with D3 data join</span></span>
<span id="cb6-2733"><a href></a> <span class="kw">const</span> sliderCont <span class="op">=</span> controlsContainer<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">&#39;div&#39;</span>)<span class="op">.</span><span class="fu">data</span>(sliders)<span class="op">.</span><span class="fu">join</span>(<span class="st">&#39;div&#39;</span>)</span>
<span id="cb6-2734"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;display&#39;</span><span class="op">,</span><span class="st">&#39;flex&#39;</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;align-items&#39;</span><span class="op">,</span><span class="st">&#39;center&#39;</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;gap&#39;</span><span class="op">,</span><span class="st">&#39;10px&#39;</span>)</span>
<span id="cb6-2735"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;flex&#39;</span><span class="op">,</span><span class="st">&#39;1&#39;</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;min-width&#39;</span><span class="op">,</span><span class="st">&#39;0px&#39;</span>)<span class="op">;</span></span>
<span id="cb6-2736"><a href></a> sliderCont<span class="op">.</span><span class="fu">append</span>(<span class="st">&#39;label&#39;</span>)<span class="op">.</span><span class="fu">text</span>(d <span class="kw">=&gt;</span> d<span class="op">.</span><span class="at">label</span> <span class="op">+</span> <span class="st">&#39;:&#39;</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;font-size&#39;</span><span class="op">,</span><span class="st">&#39;20px&#39;</span>)<span class="op">;</span></span>
<span id="cb6-2737"><a href></a> sliderCont<span class="op">.</span><span class="fu">append</span>(<span class="st">&#39;input&#39;</span>)</span>
<span id="cb6-2738"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&#39;type&#39;</span><span class="op">,</span><span class="st">&#39;range&#39;</span>)<span class="op">.</span><span class="fu">attr</span>(<span class="st">&#39;min&#39;</span><span class="op">,</span> d <span class="kw">=&gt;</span> d<span class="op">.</span><span class="at">min</span>)<span class="op">.</span><span class="fu">attr</span>(<span class="st">&#39;max&#39;</span><span class="op">,</span> d <span class="kw">=&gt;</span> d<span class="op">.</span><span class="at">max</span>)<span class="op">.</span><span class="fu">attr</span>(<span class="st">&#39;step&#39;</span><span class="op">,</span> d <span class="kw">=&gt;</span> d<span class="op">.</span><span class="at">step</span>)</span>
<span id="cb6-2739"><a href></a> <span class="op">.</span><span class="fu">property</span>(<span class="st">&#39;value&#39;</span><span class="op">,</span> d <span class="kw">=&gt;</span> d<span class="op">.</span><span class="fu">get</span>())</span>
<span id="cb6-2740"><a href></a> <span class="op">.</span><span class="fu">on</span>(<span class="st">&#39;input&#39;</span><span class="op">,</span> <span class="kw">function</span>(<span class="bu">event</span><span class="op">,</span> d) {</span>
<span id="cb6-2741"><a href></a> <span class="kw">const</span> val <span class="op">=</span> <span class="op">+</span><span class="kw">this</span><span class="op">.</span><span class="at">value</span><span class="op">;</span> d<span class="op">.</span><span class="fu">set</span>(val)<span class="op">;</span></span>
<span id="cb6-2742"><a href></a> d3<span class="op">.</span><span class="fu">select</span>(<span class="kw">this</span><span class="op">.</span><span class="at">parentNode</span>)<span class="op">.</span><span class="fu">select</span>(<span class="st">&#39;span&#39;</span>)<span class="op">.</span><span class="fu">text</span>(d<span class="op">.</span><span class="at">label</span><span class="op">.</span><span class="fu">match</span>(<span class="ss">/Sigma</span><span class="sc">|</span><span class="ss">Tailweight/</span>) <span class="op">?</span> <span class="dv">2</span><span class="op">**</span>val <span class="op">:</span> val)<span class="op">;</span></span>
<span id="cb6-2743"><a href></a> <span class="fu">updateChart</span>(<span class="fu">filteredData</span>())<span class="op">;</span></span>
<span id="cb6-2744"><a href></a> })</span>
<span id="cb6-2745"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;width&#39;</span><span class="op">,</span> <span class="st">&#39;100%&#39;</span>)<span class="op">;</span></span>
<span id="cb6-2746"><a href></a> sliderCont<span class="op">.</span><span class="fu">append</span>(<span class="st">&#39;span&#39;</span>)<span class="op">.</span><span class="fu">text</span>(d <span class="kw">=&gt;</span> (d<span class="op">.</span><span class="at">label</span><span class="op">.</span><span class="fu">match</span>(<span class="ss">/Sigma</span><span class="sc">|</span><span class="ss">Tailweight/</span>) <span class="op">?</span> d<span class="op">.</span><span class="fu">get</span>() <span class="op">:</span> d<span class="op">.</span><span class="fu">get</span>()))</span>
<span id="cb6-2747"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;font-size&#39;</span><span class="op">,</span><span class="st">&#39;20px&#39;</span>)<span class="op">;</span></span>
<span id="cb6-2748"><a href></a> </span>
<span id="cb6-2749"><a href></a> <span class="co">// Add Reset button to clear all sliders to their defaults</span></span>
<span id="cb6-2750"><a href></a> controlsContainer<span class="op">.</span><span class="fu">append</span>(<span class="st">&#39;button&#39;</span>)</span>
<span id="cb6-2751"><a href></a> <span class="op">.</span><span class="fu">text</span>(<span class="st">&#39;Reset&#39;</span>)</span>
<span id="cb6-2752"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;font-size&#39;</span><span class="op">,</span> <span class="st">&#39;20px&#39;</span>)</span>
<span id="cb6-2753"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;align-self&#39;</span><span class="op">,</span> <span class="st">&#39;center&#39;</span>)</span>
<span id="cb6-2754"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;margin-left&#39;</span><span class="op">,</span> <span class="st">&#39;auto&#39;</span>)</span>
<span id="cb6-2755"><a href></a> <span class="op">.</span><span class="fu">on</span>(<span class="st">&#39;click&#39;</span><span class="op">,</span> () <span class="kw">=&gt;</span> {</span>
<span id="cb6-2756"><a href></a> <span class="co">// reset state vars</span></span>
<span id="cb6-2757"><a href></a> selectedMu <span class="op">=</span> <span class="fl">0.5</span><span class="op">;</span></span>
<span id="cb6-2758"><a href></a> selectedSig <span class="op">=</span> <span class="dv">1</span><span class="op">;</span></span>
<span id="cb6-2759"><a href></a> selectedNonc <span class="op">=</span> <span class="dv">0</span><span class="op">;</span></span>
<span id="cb6-2760"><a href></a> selectedTailw <span class="op">=</span> <span class="dv">1</span><span class="op">;</span></span>
<span id="cb6-2761"><a href></a> <span class="co">// update input positions</span></span>
<span id="cb6-2762"><a href></a> sliderCont<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">&#39;input&#39;</span>)<span class="op">.</span><span class="fu">property</span>(<span class="st">&#39;value&#39;</span><span class="op">,</span> d <span class="kw">=&gt;</span> d<span class="op">.</span><span class="fu">get</span>())<span class="op">;</span></span>
<span id="cb6-2763"><a href></a> <span class="co">// update displayed labels</span></span>
<span id="cb6-2764"><a href></a> sliderCont<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">&#39;span&#39;</span>)</span>
<span id="cb6-2765"><a href></a> <span class="op">.</span><span class="fu">text</span>(d <span class="kw">=&gt;</span> d<span class="op">.</span><span class="at">label</span><span class="op">.</span><span class="fu">match</span>(<span class="ss">/Sigma</span><span class="sc">|</span><span class="ss">Tailweight/</span>) <span class="op">?</span> (<span class="dv">2</span><span class="op">**</span>d<span class="op">.</span><span class="fu">get</span>()) <span class="op">:</span> d<span class="op">.</span><span class="fu">get</span>())<span class="op">;</span></span>
<span id="cb6-2766"><a href></a> <span class="co">// redraw chart</span></span>
<span id="cb6-2767"><a href></a> <span class="fu">updateChart</span>(<span class="fu">filteredData</span>())<span class="op">;</span></span>
<span id="cb6-2768"><a href></a> })<span class="op">;</span></span>
<span id="cb6-2769"><a href></a></span>
<span id="cb6-2770"><a href></a> <span class="co">// Build SVG</span></span>
<span id="cb6-2771"><a href></a> <span class="kw">const</span> width <span class="op">=</span> <span class="dv">1200</span><span class="op">;</span></span>
<span id="cb6-2772"><a href></a> <span class="kw">const</span> height <span class="op">=</span> <span class="dv">450</span><span class="op">;</span></span>
<span id="cb6-2773"><a href></a> <span class="kw">const</span> margin <span class="op">=</span> {<span class="dt">top</span><span class="op">:</span> <span class="dv">40</span><span class="op">,</span> <span class="dt">right</span><span class="op">:</span> <span class="dv">20</span><span class="op">,</span> <span class="dt">bottom</span><span class="op">:</span> <span class="dv">40</span><span class="op">,</span> <span class="dt">left</span><span class="op">:</span> <span class="dv">40</span>}<span class="op">;</span></span>
<span id="cb6-2774"><a href></a> <span class="kw">const</span> innerWidth <span class="op">=</span> width <span class="op">-</span> margin<span class="op">.</span><span class="at">left</span> <span class="op">-</span> margin<span class="op">.</span><span class="at">right</span><span class="op">;</span></span>
<span id="cb6-2775"><a href></a> <span class="kw">const</span> innerHeight <span class="op">=</span> height <span class="op">-</span> margin<span class="op">.</span><span class="at">top</span> <span class="op">-</span> margin<span class="op">.</span><span class="at">bottom</span><span class="op">;</span></span>
<span id="cb6-2776"><a href></a></span>
<span id="cb6-2777"><a href></a> <span class="co">// Set controls container width to match SVG plot width</span></span>
<span id="cb6-2778"><a href></a> controlsContainer<span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;max-width&quot;</span><span class="op">,</span> <span class="st">&quot;none&quot;</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;width&quot;</span><span class="op">,</span> <span class="st">&quot;100%&quot;</span>)<span class="op">;</span></span>
<span id="cb6-2779"><a href></a> <span class="co">// Distribute each control evenly and make sliders full-width</span></span>
<span id="cb6-2780"><a href></a> controlsContainer<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">&quot;div&quot;</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;flex&quot;</span><span class="op">,</span> <span class="st">&quot;1&quot;</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;min-width&quot;</span><span class="op">,</span> <span class="st">&quot;0px&quot;</span>)<span class="op">;</span></span>
<span id="cb6-2781"><a href></a> controlsContainer<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">&quot;input&quot;</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;width&quot;</span><span class="op">,</span> <span class="st">&quot;100%&quot;</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;box-sizing&quot;</span><span class="op">,</span> <span class="st">&quot;border-box&quot;</span>)<span class="op">;</span></span>
<span id="cb6-2782"><a href></a> </span>
<span id="cb6-2783"><a href></a> <span class="co">// Create scales</span></span>
<span id="cb6-2784"><a href></a> <span class="kw">const</span> x <span class="op">=</span> d3<span class="op">.</span><span class="fu">scaleLinear</span>()</span>
<span id="cb6-2785"><a href></a> <span class="op">.</span><span class="fu">domain</span>([<span class="dv">0</span><span class="op">,</span> <span class="dv">1</span>])</span>
<span id="cb6-2786"><a href></a> <span class="op">.</span><span class="fu">range</span>([<span class="dv">0</span><span class="op">,</span> innerWidth])<span class="op">;</span></span>
<span id="cb6-2787"><a href></a> </span>
<span id="cb6-2788"><a href></a> <span class="kw">const</span> y <span class="op">=</span> d3<span class="op">.</span><span class="fu">scaleLinear</span>()</span>
<span id="cb6-2789"><a href></a> <span class="op">.</span><span class="fu">domain</span>([<span class="dv">0</span><span class="op">,</span> <span class="dv">1</span>])</span>
<span id="cb6-2790"><a href></a> <span class="op">.</span><span class="fu">range</span>([innerHeight<span class="op">,</span> <span class="dv">0</span>])<span class="op">;</span></span>
<span id="cb6-2791"><a href></a> </span>
<span id="cb6-2792"><a href></a> <span class="co">// Create a color scale for the basis functions</span></span>
<span id="cb6-2793"><a href></a> <span class="kw">const</span> color <span class="op">=</span> d3<span class="op">.</span><span class="fu">scaleOrdinal</span>([<span class="st">&quot;#9B26B0FF&quot;</span><span class="op">,</span> <span class="st">&quot;#3F51B4FF&quot;</span><span class="op">,</span> <span class="st">&quot;#02A9F3FF&quot;</span><span class="op">,</span> <span class="st">&quot;#009687FF&quot;</span><span class="op">,</span> <span class="st">&quot;#8BC34AFF&quot;</span><span class="op">,</span> <span class="st">&quot;#FFEB3AFF&quot;</span><span class="op">,</span> <span class="st">&quot;#FF9800FF&quot;</span><span class="op">,</span> <span class="st">&quot;#795447FF&quot;</span>])<span class="op">;</span></span>
<span id="cb6-2794"><a href></a> </span>
<span id="cb6-2795"><a href></a> <span class="co">// Create SVG</span></span>
<span id="cb6-2796"><a href></a> <span class="kw">const</span> svg <span class="op">=</span> d3<span class="op">.</span><span class="fu">create</span>(<span class="st">&quot;svg&quot;</span>)</span>
<span id="cb6-2797"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;width&quot;</span><span class="op">,</span> <span class="st">&quot;100%&quot;</span>)</span>
<span id="cb6-2798"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;height&quot;</span><span class="op">,</span> <span class="st">&quot;auto&quot;</span>)</span>
<span id="cb6-2799"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;viewBox&quot;</span><span class="op">,</span> [<span class="dv">0</span><span class="op">,</span> <span class="dv">0</span><span class="op">,</span> width<span class="op">,</span> height])</span>
<span id="cb6-2800"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;preserveAspectRatio&quot;</span><span class="op">,</span> <span class="st">&quot;xMidYMid meet&quot;</span>)</span>
<span id="cb6-2801"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;style&quot;</span><span class="op">,</span> <span class="st">&quot;max-width: 100%; height: auto;&quot;</span>)<span class="op">;</span></span>
<span id="cb6-2802"><a href></a> </span>
<span id="cb6-2803"><a href></a> <span class="co">// Create the chart group</span></span>
<span id="cb6-2804"><a href></a> <span class="kw">const</span> g <span class="op">=</span> svg<span class="op">.</span><span class="fu">append</span>(<span class="st">&quot;g&quot;</span>)</span>
<span id="cb6-2805"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;transform&quot;</span><span class="op">,</span> <span class="vs">`translate(</span><span class="sc">${</span>margin<span class="op">.</span><span class="at">left</span><span class="sc">}</span><span class="vs">,</span><span class="sc">${</span>margin<span class="op">.</span><span class="at">top</span><span class="sc">}</span><span class="vs">)`</span>)<span class="op">;</span></span>
<span id="cb6-2806"><a href></a> </span>
<span id="cb6-2807"><a href></a> <span class="co">// Add axes</span></span>
<span id="cb6-2808"><a href></a> <span class="kw">const</span> xAxis <span class="op">=</span> g<span class="op">.</span><span class="fu">append</span>(<span class="st">&quot;g&quot;</span>)</span>
<span id="cb6-2809"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;transform&quot;</span><span class="op">,</span> <span class="vs">`translate(0,</span><span class="sc">${</span>innerHeight<span class="sc">}</span><span class="vs">)`</span>)</span>
<span id="cb6-2810"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;class&quot;</span><span class="op">,</span> <span class="st">&quot;x-axis&quot;</span>)</span>
<span id="cb6-2811"><a href></a> <span class="op">.</span><span class="fu">call</span>(d3<span class="op">.</span><span class="fu">axisBottom</span>(x)<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">10</span>))</span>
<span id="cb6-2812"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;font-size&quot;</span><span class="op">,</span> <span class="st">&quot;20px&quot;</span>)<span class="op">;</span></span>
<span id="cb6-2813"><a href></a> </span>
<span id="cb6-2814"><a href></a> <span class="kw">const</span> yAxis <span class="op">=</span> g<span class="op">.</span><span class="fu">append</span>(<span class="st">&quot;g&quot;</span>)</span>
<span id="cb6-2815"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;class&quot;</span><span class="op">,</span> <span class="st">&quot;y-axis&quot;</span>)</span>
<span id="cb6-2816"><a href></a> <span class="op">.</span><span class="fu">call</span>(d3<span class="op">.</span><span class="fu">axisLeft</span>(y)<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">5</span>))</span>
<span id="cb6-2817"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;font-size&quot;</span><span class="op">,</span> <span class="st">&quot;20px&quot;</span>)<span class="op">;</span></span>
<span id="cb6-2818"><a href></a> </span>
<span id="cb6-2819"><a href></a> <span class="co">// Add a horizontal line at y = 0</span></span>
<span id="cb6-2820"><a href></a> g<span class="op">.</span><span class="fu">append</span>(<span class="st">&quot;line&quot;</span>)</span>
<span id="cb6-2821"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;x1&quot;</span><span class="op">,</span> <span class="dv">0</span>)</span>
<span id="cb6-2822"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;x2&quot;</span><span class="op">,</span> innerWidth)</span>
<span id="cb6-2823"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;y1&quot;</span><span class="op">,</span> <span class="fu">y</span>(<span class="dv">0</span>))</span>
<span id="cb6-2824"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;y2&quot;</span><span class="op">,</span> <span class="fu">y</span>(<span class="dv">0</span>))</span>
<span id="cb6-2825"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;stroke&quot;</span><span class="op">,</span> <span class="st">&quot;#000&quot;</span>)</span>
<span id="cb6-2826"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;stroke-opacity&quot;</span><span class="op">,</span> <span class="fl">0.2</span>)<span class="op">;</span></span>
<span id="cb6-2827"><a href></a> </span>
<span id="cb6-2828"><a href></a> <span class="co">// Add gridlines</span></span>
<span id="cb6-2829"><a href></a> g<span class="op">.</span><span class="fu">append</span>(<span class="st">&quot;g&quot;</span>)</span>
<span id="cb6-2830"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;class&quot;</span><span class="op">,</span> <span class="st">&quot;grid-lines&quot;</span>)</span>
<span id="cb6-2831"><a href></a> <span class="op">.</span><span class="fu">selectAll</span>(<span class="st">&quot;line&quot;</span>)</span>
<span id="cb6-2832"><a href></a> <span class="op">.</span><span class="fu">data</span>(y<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">5</span>))</span>
<span id="cb6-2833"><a href></a> <span class="op">.</span><span class="fu">join</span>(<span class="st">&quot;line&quot;</span>)</span>
<span id="cb6-2834"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;x1&quot;</span><span class="op">,</span> <span class="dv">0</span>)</span>
<span id="cb6-2835"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;x2&quot;</span><span class="op">,</span> innerWidth)</span>
<span id="cb6-2836"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;y1&quot;</span><span class="op">,</span> d <span class="kw">=&gt;</span> <span class="fu">y</span>(d))</span>
<span id="cb6-2837"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;y2&quot;</span><span class="op">,</span> d <span class="kw">=&gt;</span> <span class="fu">y</span>(d))</span>
<span id="cb6-2838"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;stroke&quot;</span><span class="op">,</span> <span class="st">&quot;#ccc&quot;</span>)</span>
<span id="cb6-2839"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;stroke-opacity&quot;</span><span class="op">,</span> <span class="fl">0.5</span>)<span class="op">;</span></span>
<div class="sourceCode cell-code hidden" id="cb6" data-startfrom="2662" data-source-offset="0"><pre class="sourceCode numberSource js number-lines code-with-copy"><code class="sourceCode javascript" style="counter-reset: source-line 2661;"><span id="cb6-2662"><a href></a><span class="co">// Defined above</span></span>
<span id="cb6-2663"><a href></a><span class="co">// function updateChartInner(g, x, y, linesGroup, color, line, data) {</span></span>
<span id="cb6-2664"><a href></a><span class="co">// // Update axes with transitions</span></span>
<span id="cb6-2665"><a href></a><span class="co">// x.domain([0, d3.max(data, d =&gt; d.x)]);</span></span>
<span id="cb6-2666"><a href></a><span class="co">// g.select(&quot;.x-axis&quot;).transition().duration(1500).call(d3.axisBottom(x).ticks(10));</span></span>
<span id="cb6-2667"><a href></a><span class="co">// y.domain([0, d3.max(data, d =&gt; d.y)]);</span></span>
<span id="cb6-2668"><a href></a><span class="co">// g.select(&quot;.y-axis&quot;).transition().duration(1500).call(d3.axisLeft(y).ticks(5));</span></span>
<span id="cb6-2669"><a href></a></span>
<span id="cb6-2670"><a href></a><span class="co">// // Group data by basis function</span></span>
<span id="cb6-2671"><a href></a><span class="co">// const dataByFunction = Array.from(d3.group(data, d =&gt; d.b));</span></span>
<span id="cb6-2672"><a href></a><span class="co">// const keyFn = d =&gt; d[0];</span></span>
<span id="cb6-2673"><a href></a></span>
<span id="cb6-2674"><a href></a><span class="co">// // Update basis function lines</span></span>
<span id="cb6-2675"><a href></a><span class="co">// const u = linesGroup.selectAll(&quot;path&quot;).data(dataByFunction, keyFn);</span></span>
<span id="cb6-2676"><a href></a><span class="co">// u.join(</span></span>
<span id="cb6-2677"><a href></a><span class="co">// enter =&gt; enter.append(&quot;path&quot;).attr(&quot;fill&quot;,&quot;none&quot;).attr(&quot;stroke-width&quot;,3)</span></span>
<span id="cb6-2678"><a href></a><span class="co">// .attr(&quot;stroke&quot;, (_, i) =&gt; color(i)).attr(&quot;d&quot;, d =&gt; line(d[1].map(pt =&gt; ({x: pt.x, y: 0}))))</span></span>
<span id="cb6-2679"><a href></a><span class="co">// .style(&quot;opacity&quot;,0),</span></span>
<span id="cb6-2680"><a href></a><span class="co">// update =&gt; update,</span></span>
<span id="cb6-2681"><a href></a><span class="co">// exit =&gt; exit.transition().duration(1000).style(&quot;opacity&quot;,0).remove()</span></span>
<span id="cb6-2682"><a href></a><span class="co">// )</span></span>
<span id="cb6-2683"><a href></a><span class="co">// .transition().duration(1000)</span></span>
<span id="cb6-2684"><a href></a><span class="co">// .attr(&quot;d&quot;, d =&gt; line(d[1]))</span></span>
<span id="cb6-2685"><a href></a><span class="co">// .attr(&quot;stroke&quot;, (_, i) =&gt; color(i))</span></span>
<span id="cb6-2686"><a href></a><span class="co">// .style(&quot;opacity&quot;,1);</span></span>
<span id="cb6-2687"><a href></a><span class="co">// }</span></span>
<span id="cb6-2688"><a href></a></span>
<span id="cb6-2689"><a href></a>chart0 <span class="op">=</span> {</span>
<span id="cb6-2690"><a href></a> <span class="co">// State variables for selected parameters</span></span>
<span id="cb6-2691"><a href></a> <span class="kw">let</span> selectedMu <span class="op">=</span> <span class="fl">0.5</span><span class="op">;</span></span>
<span id="cb6-2692"><a href></a> <span class="kw">let</span> selectedSig <span class="op">=</span> <span class="dv">1</span><span class="op">;</span></span>
<span id="cb6-2693"><a href></a> <span class="kw">let</span> selectedNonc <span class="op">=</span> <span class="dv">0</span><span class="op">;</span></span>
<span id="cb6-2694"><a href></a> <span class="kw">let</span> selectedTailw <span class="op">=</span> <span class="dv">1</span><span class="op">;</span></span>
<span id="cb6-2695"><a href></a> <span class="kw">const</span> filteredData <span class="op">=</span> () <span class="kw">=&gt;</span> bsplineData<span class="op">.</span><span class="fu">filter</span>(d <span class="kw">=&gt;</span></span>
<span id="cb6-2696"><a href></a> <span class="bu">Math</span><span class="op">.</span><span class="fu">abs</span>(selectedMu <span class="op">-</span> d<span class="op">.</span><span class="at">mu</span>) <span class="op">&lt;</span> <span class="fl">0.001</span> <span class="op">&amp;&amp;</span></span>
<span id="cb6-2697"><a href></a> d<span class="op">.</span><span class="at">sig</span> <span class="op">===</span> selectedSig <span class="op">&amp;&amp;</span></span>
<span id="cb6-2698"><a href></a> d<span class="op">.</span><span class="at">nonc</span> <span class="op">===</span> selectedNonc <span class="op">&amp;&amp;</span></span>
<span id="cb6-2699"><a href></a> d<span class="op">.</span><span class="at">tailw</span> <span class="op">===</span> selectedTailw</span>
<span id="cb6-2700"><a href></a> )<span class="op">;</span></span>
<span id="cb6-2701"><a href></a> <span class="kw">const</span> container <span class="op">=</span> d3<span class="op">.</span><span class="fu">create</span>(<span class="st">&quot;div&quot;</span>)</span>
<span id="cb6-2702"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;max-width&quot;</span><span class="op">,</span> <span class="st">&quot;none&quot;</span>)</span>
<span id="cb6-2703"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;width&quot;</span><span class="op">,</span> <span class="st">&quot;100%&quot;</span>)<span class="op">;;</span></span>
<span id="cb6-2704"><a href></a> <span class="kw">const</span> controlsContainer <span class="op">=</span> container<span class="op">.</span><span class="fu">append</span>(<span class="st">&quot;div&quot;</span>)</span>
<span id="cb6-2705"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;display&quot;</span><span class="op">,</span> <span class="st">&quot;flex&quot;</span>)</span>
<span id="cb6-2706"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;gap&quot;</span><span class="op">,</span> <span class="st">&quot;20px&quot;</span>)<span class="op">;</span></span>
<span id="cb6-2707"><a href></a> <span class="co">// slider controls</span></span>
<span id="cb6-2708"><a href></a> <span class="kw">const</span> sliders <span class="op">=</span> [</span>
<span id="cb6-2709"><a href></a> { <span class="dt">label</span><span class="op">:</span> <span class="st">&#39;Mu&#39;</span><span class="op">,</span> <span class="kw">get</span><span class="op">:</span> () <span class="kw">=&gt;</span> selectedMu<span class="op">,</span> <span class="kw">set</span><span class="op">:</span> v <span class="kw">=&gt;</span> selectedMu <span class="op">=</span> v<span class="op">,</span> <span class="dt">min</span><span class="op">:</span> <span class="fl">0.1</span><span class="op">,</span> <span class="dt">max</span><span class="op">:</span> <span class="fl">0.9</span><span class="op">,</span> <span class="dt">step</span><span class="op">:</span> <span class="fl">0.2</span> }<span class="op">,</span></span>
<span id="cb6-2710"><a href></a> { <span class="dt">label</span><span class="op">:</span> <span class="st">&#39;Sigma&#39;</span><span class="op">,</span> <span class="kw">get</span><span class="op">:</span> () <span class="kw">=&gt;</span> <span class="bu">Math</span><span class="op">.</span><span class="fu">log2</span>(selectedSig)<span class="op">,</span> <span class="kw">set</span><span class="op">:</span> v <span class="kw">=&gt;</span> selectedSig <span class="op">=</span> <span class="dv">2</span> <span class="op">**</span> v<span class="op">,</span> <span class="dt">min</span><span class="op">:</span> <span class="op">-</span><span class="dv">2</span><span class="op">,</span> <span class="dt">max</span><span class="op">:</span> <span class="dv">2</span><span class="op">,</span> <span class="dt">step</span><span class="op">:</span> <span class="dv">1</span> }<span class="op">,</span></span>
<span id="cb6-2711"><a href></a> { <span class="dt">label</span><span class="op">:</span> <span class="st">&#39;Noncentrality&#39;</span><span class="op">,</span> <span class="kw">get</span><span class="op">:</span> () <span class="kw">=&gt;</span> selectedNonc<span class="op">,</span> <span class="kw">set</span><span class="op">:</span> v <span class="kw">=&gt;</span> selectedNonc <span class="op">=</span> v<span class="op">,</span> <span class="dt">min</span><span class="op">:</span> <span class="op">-</span><span class="dv">4</span><span class="op">,</span> <span class="dt">max</span><span class="op">:</span> <span class="dv">4</span><span class="op">,</span> <span class="dt">step</span><span class="op">:</span> <span class="dv">2</span> }<span class="op">,</span></span>
<span id="cb6-2712"><a href></a> { <span class="dt">label</span><span class="op">:</span> <span class="st">&#39;Tailweight&#39;</span><span class="op">,</span> <span class="kw">get</span><span class="op">:</span> () <span class="kw">=&gt;</span> <span class="bu">Math</span><span class="op">.</span><span class="fu">log2</span>(selectedTailw)<span class="op">,</span> <span class="kw">set</span><span class="op">:</span> v <span class="kw">=&gt;</span> selectedTailw <span class="op">=</span> <span class="dv">2</span> <span class="op">**</span> v<span class="op">,</span> <span class="dt">min</span><span class="op">:</span> <span class="op">-</span><span class="dv">2</span><span class="op">,</span> <span class="dt">max</span><span class="op">:</span> <span class="dv">2</span><span class="op">,</span> <span class="dt">step</span><span class="op">:</span> <span class="dv">1</span> }</span>
<span id="cb6-2713"><a href></a> ]<span class="op">;</span></span>
<span id="cb6-2714"><a href></a> <span class="co">// Build slider controls with D3 data join</span></span>
<span id="cb6-2715"><a href></a> <span class="kw">const</span> sliderCont <span class="op">=</span> controlsContainer<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">&#39;div&#39;</span>)<span class="op">.</span><span class="fu">data</span>(sliders)<span class="op">.</span><span class="fu">join</span>(<span class="st">&#39;div&#39;</span>)</span>
<span id="cb6-2716"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;display&#39;</span><span class="op">,</span><span class="st">&#39;flex&#39;</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;align-items&#39;</span><span class="op">,</span><span class="st">&#39;center&#39;</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;gap&#39;</span><span class="op">,</span><span class="st">&#39;10px&#39;</span>)</span>
<span id="cb6-2717"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;flex&#39;</span><span class="op">,</span><span class="st">&#39;1&#39;</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;min-width&#39;</span><span class="op">,</span><span class="st">&#39;0px&#39;</span>)<span class="op">;</span></span>
<span id="cb6-2718"><a href></a> sliderCont<span class="op">.</span><span class="fu">append</span>(<span class="st">&#39;label&#39;</span>)<span class="op">.</span><span class="fu">text</span>(d <span class="kw">=&gt;</span> d<span class="op">.</span><span class="at">label</span> <span class="op">+</span> <span class="st">&#39;:&#39;</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;font-size&#39;</span><span class="op">,</span><span class="st">&#39;20px&#39;</span>)<span class="op">;</span></span>
<span id="cb6-2719"><a href></a> sliderCont<span class="op">.</span><span class="fu">append</span>(<span class="st">&#39;input&#39;</span>)</span>
<span id="cb6-2720"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&#39;type&#39;</span><span class="op">,</span><span class="st">&#39;range&#39;</span>)<span class="op">.</span><span class="fu">attr</span>(<span class="st">&#39;min&#39;</span><span class="op">,</span> d <span class="kw">=&gt;</span> d<span class="op">.</span><span class="at">min</span>)<span class="op">.</span><span class="fu">attr</span>(<span class="st">&#39;max&#39;</span><span class="op">,</span> d <span class="kw">=&gt;</span> d<span class="op">.</span><span class="at">max</span>)<span class="op">.</span><span class="fu">attr</span>(<span class="st">&#39;step&#39;</span><span class="op">,</span> d <span class="kw">=&gt;</span> d<span class="op">.</span><span class="at">step</span>)</span>
<span id="cb6-2721"><a href></a> <span class="op">.</span><span class="fu">property</span>(<span class="st">&#39;value&#39;</span><span class="op">,</span> d <span class="kw">=&gt;</span> d<span class="op">.</span><span class="fu">get</span>())</span>
<span id="cb6-2722"><a href></a> <span class="op">.</span><span class="fu">on</span>(<span class="st">&#39;input&#39;</span><span class="op">,</span> <span class="kw">function</span>(<span class="bu">event</span><span class="op">,</span> d) {</span>
<span id="cb6-2723"><a href></a> <span class="kw">const</span> val <span class="op">=</span> <span class="op">+</span><span class="kw">this</span><span class="op">.</span><span class="at">value</span><span class="op">;</span> d<span class="op">.</span><span class="fu">set</span>(val)<span class="op">;</span></span>
<span id="cb6-2724"><a href></a> d3<span class="op">.</span><span class="fu">select</span>(<span class="kw">this</span><span class="op">.</span><span class="at">parentNode</span>)<span class="op">.</span><span class="fu">select</span>(<span class="st">&#39;span&#39;</span>)<span class="op">.</span><span class="fu">text</span>(d<span class="op">.</span><span class="at">label</span><span class="op">.</span><span class="fu">match</span>(<span class="ss">/Sigma</span><span class="sc">|</span><span class="ss">Tailweight/</span>) <span class="op">?</span> <span class="dv">2</span><span class="op">**</span>val <span class="op">:</span> val)<span class="op">;</span></span>
<span id="cb6-2725"><a href></a> <span class="fu">updateChart</span>(<span class="fu">filteredData</span>())<span class="op">;</span></span>
<span id="cb6-2726"><a href></a> })</span>
<span id="cb6-2727"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;width&#39;</span><span class="op">,</span> <span class="st">&#39;100%&#39;</span>)<span class="op">;</span></span>
<span id="cb6-2728"><a href></a> sliderCont<span class="op">.</span><span class="fu">append</span>(<span class="st">&#39;span&#39;</span>)<span class="op">.</span><span class="fu">text</span>(d <span class="kw">=&gt;</span> (d<span class="op">.</span><span class="at">label</span><span class="op">.</span><span class="fu">match</span>(<span class="ss">/Sigma</span><span class="sc">|</span><span class="ss">Tailweight/</span>) <span class="op">?</span> d<span class="op">.</span><span class="fu">get</span>() <span class="op">:</span> d<span class="op">.</span><span class="fu">get</span>()))</span>
<span id="cb6-2729"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;font-size&#39;</span><span class="op">,</span><span class="st">&#39;20px&#39;</span>)<span class="op">;</span></span>
<span id="cb6-2730"><a href></a> </span>
<span id="cb6-2731"><a href></a> <span class="co">// Add Reset button to clear all sliders to their defaults</span></span>
<span id="cb6-2732"><a href></a> controlsContainer<span class="op">.</span><span class="fu">append</span>(<span class="st">&#39;button&#39;</span>)</span>
<span id="cb6-2733"><a href></a> <span class="op">.</span><span class="fu">text</span>(<span class="st">&#39;Reset&#39;</span>)</span>
<span id="cb6-2734"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;font-size&#39;</span><span class="op">,</span> <span class="st">&#39;20px&#39;</span>)</span>
<span id="cb6-2735"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;align-self&#39;</span><span class="op">,</span> <span class="st">&#39;center&#39;</span>)</span>
<span id="cb6-2736"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&#39;margin-left&#39;</span><span class="op">,</span> <span class="st">&#39;auto&#39;</span>)</span>
<span id="cb6-2737"><a href></a> <span class="op">.</span><span class="fu">on</span>(<span class="st">&#39;click&#39;</span><span class="op">,</span> () <span class="kw">=&gt;</span> {</span>
<span id="cb6-2738"><a href></a> <span class="co">// reset state vars</span></span>
<span id="cb6-2739"><a href></a> selectedMu <span class="op">=</span> <span class="fl">0.5</span><span class="op">;</span></span>
<span id="cb6-2740"><a href></a> selectedSig <span class="op">=</span> <span class="dv">1</span><span class="op">;</span></span>
<span id="cb6-2741"><a href></a> selectedNonc <span class="op">=</span> <span class="dv">0</span><span class="op">;</span></span>
<span id="cb6-2742"><a href></a> selectedTailw <span class="op">=</span> <span class="dv">1</span><span class="op">;</span></span>
<span id="cb6-2743"><a href></a> <span class="co">// update input positions</span></span>
<span id="cb6-2744"><a href></a> sliderCont<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">&#39;input&#39;</span>)<span class="op">.</span><span class="fu">property</span>(<span class="st">&#39;value&#39;</span><span class="op">,</span> d <span class="kw">=&gt;</span> d<span class="op">.</span><span class="fu">get</span>())<span class="op">;</span></span>
<span id="cb6-2745"><a href></a> <span class="co">// update displayed labels</span></span>
<span id="cb6-2746"><a href></a> sliderCont<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">&#39;span&#39;</span>)</span>
<span id="cb6-2747"><a href></a> <span class="op">.</span><span class="fu">text</span>(d <span class="kw">=&gt;</span> d<span class="op">.</span><span class="at">label</span><span class="op">.</span><span class="fu">match</span>(<span class="ss">/Sigma</span><span class="sc">|</span><span class="ss">Tailweight/</span>) <span class="op">?</span> (<span class="dv">2</span><span class="op">**</span>d<span class="op">.</span><span class="fu">get</span>()) <span class="op">:</span> d<span class="op">.</span><span class="fu">get</span>())<span class="op">;</span></span>
<span id="cb6-2748"><a href></a> <span class="co">// redraw chart</span></span>
<span id="cb6-2749"><a href></a> <span class="fu">updateChart</span>(<span class="fu">filteredData</span>())<span class="op">;</span></span>
<span id="cb6-2750"><a href></a> })<span class="op">;</span></span>
<span id="cb6-2751"><a href></a></span>
<span id="cb6-2752"><a href></a> <span class="co">// Build SVG</span></span>
<span id="cb6-2753"><a href></a> <span class="kw">const</span> width <span class="op">=</span> <span class="dv">1200</span><span class="op">;</span></span>
<span id="cb6-2754"><a href></a> <span class="kw">const</span> height <span class="op">=</span> <span class="dv">450</span><span class="op">;</span></span>
<span id="cb6-2755"><a href></a> <span class="kw">const</span> margin <span class="op">=</span> {<span class="dt">top</span><span class="op">:</span> <span class="dv">40</span><span class="op">,</span> <span class="dt">right</span><span class="op">:</span> <span class="dv">20</span><span class="op">,</span> <span class="dt">bottom</span><span class="op">:</span> <span class="dv">40</span><span class="op">,</span> <span class="dt">left</span><span class="op">:</span> <span class="dv">40</span>}<span class="op">;</span></span>
<span id="cb6-2756"><a href></a> <span class="kw">const</span> innerWidth <span class="op">=</span> width <span class="op">-</span> margin<span class="op">.</span><span class="at">left</span> <span class="op">-</span> margin<span class="op">.</span><span class="at">right</span><span class="op">;</span></span>
<span id="cb6-2757"><a href></a> <span class="kw">const</span> innerHeight <span class="op">=</span> height <span class="op">-</span> margin<span class="op">.</span><span class="at">top</span> <span class="op">-</span> margin<span class="op">.</span><span class="at">bottom</span><span class="op">;</span></span>
<span id="cb6-2758"><a href></a></span>
<span id="cb6-2759"><a href></a> <span class="co">// Set controls container width to match SVG plot width</span></span>
<span id="cb6-2760"><a href></a> controlsContainer<span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;max-width&quot;</span><span class="op">,</span> <span class="st">&quot;none&quot;</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;width&quot;</span><span class="op">,</span> <span class="st">&quot;100%&quot;</span>)<span class="op">;</span></span>
<span id="cb6-2761"><a href></a> <span class="co">// Distribute each control evenly and make sliders full-width</span></span>
<span id="cb6-2762"><a href></a> controlsContainer<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">&quot;div&quot;</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;flex&quot;</span><span class="op">,</span> <span class="st">&quot;1&quot;</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;min-width&quot;</span><span class="op">,</span> <span class="st">&quot;0px&quot;</span>)<span class="op">;</span></span>
<span id="cb6-2763"><a href></a> controlsContainer<span class="op">.</span><span class="fu">selectAll</span>(<span class="st">&quot;input&quot;</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;width&quot;</span><span class="op">,</span> <span class="st">&quot;100%&quot;</span>)<span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;box-sizing&quot;</span><span class="op">,</span> <span class="st">&quot;border-box&quot;</span>)<span class="op">;</span></span>
<span id="cb6-2764"><a href></a> </span>
<span id="cb6-2765"><a href></a> <span class="co">// Create scales</span></span>
<span id="cb6-2766"><a href></a> <span class="kw">const</span> x <span class="op">=</span> d3<span class="op">.</span><span class="fu">scaleLinear</span>()</span>
<span id="cb6-2767"><a href></a> <span class="op">.</span><span class="fu">domain</span>([<span class="dv">0</span><span class="op">,</span> <span class="dv">1</span>])</span>
<span id="cb6-2768"><a href></a> <span class="op">.</span><span class="fu">range</span>([<span class="dv">0</span><span class="op">,</span> innerWidth])<span class="op">;</span></span>
<span id="cb6-2769"><a href></a> </span>
<span id="cb6-2770"><a href></a> <span class="kw">const</span> y <span class="op">=</span> d3<span class="op">.</span><span class="fu">scaleLinear</span>()</span>
<span id="cb6-2771"><a href></a> <span class="op">.</span><span class="fu">domain</span>([<span class="dv">0</span><span class="op">,</span> <span class="dv">1</span>])</span>
<span id="cb6-2772"><a href></a> <span class="op">.</span><span class="fu">range</span>([innerHeight<span class="op">,</span> <span class="dv">0</span>])<span class="op">;</span></span>
<span id="cb6-2773"><a href></a> </span>
<span id="cb6-2774"><a href></a> <span class="co">// Create a color scale for the basis functions</span></span>
<span id="cb6-2775"><a href></a> <span class="kw">const</span> color <span class="op">=</span> d3<span class="op">.</span><span class="fu">scaleOrdinal</span>([<span class="st">&quot;#9B26B0FF&quot;</span><span class="op">,</span> <span class="st">&quot;#3F51B4FF&quot;</span><span class="op">,</span> <span class="st">&quot;#02A9F3FF&quot;</span><span class="op">,</span> <span class="st">&quot;#009687FF&quot;</span><span class="op">,</span> <span class="st">&quot;#8BC34AFF&quot;</span><span class="op">,</span> <span class="st">&quot;#FFEB3AFF&quot;</span><span class="op">,</span> <span class="st">&quot;#FF9800FF&quot;</span><span class="op">,</span> <span class="st">&quot;#795447FF&quot;</span>])<span class="op">;</span></span>
<span id="cb6-2776"><a href></a> </span>
<span id="cb6-2777"><a href></a> <span class="co">// Create SVG</span></span>
<span id="cb6-2778"><a href></a> <span class="kw">const</span> svg <span class="op">=</span> d3<span class="op">.</span><span class="fu">create</span>(<span class="st">&quot;svg&quot;</span>)</span>
<span id="cb6-2779"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;width&quot;</span><span class="op">,</span> <span class="st">&quot;100%&quot;</span>)</span>
<span id="cb6-2780"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;height&quot;</span><span class="op">,</span> <span class="st">&quot;auto&quot;</span>)</span>
<span id="cb6-2781"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;viewBox&quot;</span><span class="op">,</span> [<span class="dv">0</span><span class="op">,</span> <span class="dv">0</span><span class="op">,</span> width<span class="op">,</span> height])</span>
<span id="cb6-2782"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;preserveAspectRatio&quot;</span><span class="op">,</span> <span class="st">&quot;xMidYMid meet&quot;</span>)</span>
<span id="cb6-2783"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;style&quot;</span><span class="op">,</span> <span class="st">&quot;max-width: 100%; height: auto;&quot;</span>)<span class="op">;</span></span>
<span id="cb6-2784"><a href></a> </span>
<span id="cb6-2785"><a href></a> <span class="co">// Create the chart group</span></span>
<span id="cb6-2786"><a href></a> <span class="kw">const</span> g <span class="op">=</span> svg<span class="op">.</span><span class="fu">append</span>(<span class="st">&quot;g&quot;</span>)</span>
<span id="cb6-2787"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;transform&quot;</span><span class="op">,</span> <span class="vs">`translate(</span><span class="sc">${</span>margin<span class="op">.</span><span class="at">left</span><span class="sc">}</span><span class="vs">,</span><span class="sc">${</span>margin<span class="op">.</span><span class="at">top</span><span class="sc">}</span><span class="vs">)`</span>)<span class="op">;</span></span>
<span id="cb6-2788"><a href></a> </span>
<span id="cb6-2789"><a href></a> <span class="co">// Add axes</span></span>
<span id="cb6-2790"><a href></a> <span class="kw">const</span> xAxis <span class="op">=</span> g<span class="op">.</span><span class="fu">append</span>(<span class="st">&quot;g&quot;</span>)</span>
<span id="cb6-2791"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;transform&quot;</span><span class="op">,</span> <span class="vs">`translate(0,</span><span class="sc">${</span>innerHeight<span class="sc">}</span><span class="vs">)`</span>)</span>
<span id="cb6-2792"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;class&quot;</span><span class="op">,</span> <span class="st">&quot;x-axis&quot;</span>)</span>
<span id="cb6-2793"><a href></a> <span class="op">.</span><span class="fu">call</span>(d3<span class="op">.</span><span class="fu">axisBottom</span>(x)<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">10</span>))</span>
<span id="cb6-2794"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;font-size&quot;</span><span class="op">,</span> <span class="st">&quot;20px&quot;</span>)<span class="op">;</span></span>
<span id="cb6-2795"><a href></a> </span>
<span id="cb6-2796"><a href></a> <span class="kw">const</span> yAxis <span class="op">=</span> g<span class="op">.</span><span class="fu">append</span>(<span class="st">&quot;g&quot;</span>)</span>
<span id="cb6-2797"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;class&quot;</span><span class="op">,</span> <span class="st">&quot;y-axis&quot;</span>)</span>
<span id="cb6-2798"><a href></a> <span class="op">.</span><span class="fu">call</span>(d3<span class="op">.</span><span class="fu">axisLeft</span>(y)<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">5</span>))</span>
<span id="cb6-2799"><a href></a> <span class="op">.</span><span class="fu">style</span>(<span class="st">&quot;font-size&quot;</span><span class="op">,</span> <span class="st">&quot;20px&quot;</span>)<span class="op">;</span></span>
<span id="cb6-2800"><a href></a> </span>
<span id="cb6-2801"><a href></a> <span class="co">// Add a horizontal line at y = 0</span></span>
<span id="cb6-2802"><a href></a> g<span class="op">.</span><span class="fu">append</span>(<span class="st">&quot;line&quot;</span>)</span>
<span id="cb6-2803"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;x1&quot;</span><span class="op">,</span> <span class="dv">0</span>)</span>
<span id="cb6-2804"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;x2&quot;</span><span class="op">,</span> innerWidth)</span>
<span id="cb6-2805"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;y1&quot;</span><span class="op">,</span> <span class="fu">y</span>(<span class="dv">0</span>))</span>
<span id="cb6-2806"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;y2&quot;</span><span class="op">,</span> <span class="fu">y</span>(<span class="dv">0</span>))</span>
<span id="cb6-2807"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;stroke&quot;</span><span class="op">,</span> <span class="st">&quot;#000&quot;</span>)</span>
<span id="cb6-2808"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;stroke-opacity&quot;</span><span class="op">,</span> <span class="fl">0.2</span>)<span class="op">;</span></span>
<span id="cb6-2809"><a href></a> </span>
<span id="cb6-2810"><a href></a> <span class="co">// Add gridlines</span></span>
<span id="cb6-2811"><a href></a> g<span class="op">.</span><span class="fu">append</span>(<span class="st">&quot;g&quot;</span>)</span>
<span id="cb6-2812"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;class&quot;</span><span class="op">,</span> <span class="st">&quot;grid-lines&quot;</span>)</span>
<span id="cb6-2813"><a href></a> <span class="op">.</span><span class="fu">selectAll</span>(<span class="st">&quot;line&quot;</span>)</span>
<span id="cb6-2814"><a href></a> <span class="op">.</span><span class="fu">data</span>(y<span class="op">.</span><span class="fu">ticks</span>(<span class="dv">5</span>))</span>
<span id="cb6-2815"><a href></a> <span class="op">.</span><span class="fu">join</span>(<span class="st">&quot;line&quot;</span>)</span>
<span id="cb6-2816"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;x1&quot;</span><span class="op">,</span> <span class="dv">0</span>)</span>
<span id="cb6-2817"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;x2&quot;</span><span class="op">,</span> innerWidth)</span>
<span id="cb6-2818"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;y1&quot;</span><span class="op">,</span> d <span class="kw">=&gt;</span> <span class="fu">y</span>(d))</span>
<span id="cb6-2819"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;y2&quot;</span><span class="op">,</span> d <span class="kw">=&gt;</span> <span class="fu">y</span>(d))</span>
<span id="cb6-2820"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;stroke&quot;</span><span class="op">,</span> <span class="st">&quot;#ccc&quot;</span>)</span>
<span id="cb6-2821"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;stroke-opacity&quot;</span><span class="op">,</span> <span class="fl">0.5</span>)<span class="op">;</span></span>
<span id="cb6-2822"><a href></a> </span>
<span id="cb6-2823"><a href></a> <span class="co">// Create a line generator</span></span>
<span id="cb6-2824"><a href></a> <span class="kw">const</span> line <span class="op">=</span> d3<span class="op">.</span><span class="fu">line</span>()</span>
<span id="cb6-2825"><a href></a> <span class="op">.</span><span class="fu">x</span>(d <span class="kw">=&gt;</span> <span class="fu">x</span>(d<span class="op">.</span><span class="at">x</span>))</span>
<span id="cb6-2826"><a href></a> <span class="op">.</span><span class="fu">y</span>(d <span class="kw">=&gt;</span> <span class="fu">y</span>(d<span class="op">.</span><span class="at">y</span>))</span>
<span id="cb6-2827"><a href></a> <span class="op">.</span><span class="fu">curve</span>(d3<span class="op">.</span><span class="at">curveBasis</span>)<span class="op">;</span></span>
<span id="cb6-2828"><a href></a> </span>
<span id="cb6-2829"><a href></a> <span class="co">// Group to contain the basis function lines</span></span>
<span id="cb6-2830"><a href></a> <span class="kw">const</span> linesGroup <span class="op">=</span> g<span class="op">.</span><span class="fu">append</span>(<span class="st">&quot;g&quot;</span>)</span>
<span id="cb6-2831"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;class&quot;</span><span class="op">,</span> <span class="st">&quot;basis-functions&quot;</span>)<span class="op">;</span></span>
<span id="cb6-2832"><a href></a> </span>
<span id="cb6-2833"><a href></a> <span class="co">// Store the current basis functions for transition</span></span>
<span id="cb6-2834"><a href></a> <span class="kw">let</span> currentBasisFunctions <span class="op">=</span> <span class="kw">new</span> <span class="bu">Map</span>()<span class="op">;</span></span>
<span id="cb6-2835"><a href></a> </span>
<span id="cb6-2836"><a href></a> <span class="co">// Function to update the chart with new data</span></span>
<span id="cb6-2837"><a href></a> <span class="kw">function</span> <span class="fu">updateChart</span>(data) {</span>
<span id="cb6-2838"><a href></a> <span class="fu">updateChartInner</span>(g<span class="op">,</span> x<span class="op">,</span> y<span class="op">,</span> linesGroup<span class="op">,</span> color<span class="op">,</span> line<span class="op">,</span> data)<span class="op">;</span></span>
<span id="cb6-2839"><a href></a> }</span>
<span id="cb6-2840"><a href></a> </span>
<span id="cb6-2841"><a href></a> <span class="co">// Create a line generator</span></span>
<span id="cb6-2842"><a href></a> <span class="kw">const</span> line <span class="op">=</span> d3<span class="op">.</span><span class="fu">line</span>()</span>
<span id="cb6-2843"><a href></a> <span class="op">.</span><span class="fu">x</span>(d <span class="kw">=&gt;</span> <span class="fu">x</span>(d<span class="op">.</span><span class="at">x</span>))</span>
<span id="cb6-2844"><a href></a> <span class="op">.</span><span class="fu">y</span>(d <span class="kw">=&gt;</span> <span class="fu">y</span>(d<span class="op">.</span><span class="at">y</span>))</span>
<span id="cb6-2845"><a href></a> <span class="op">.</span><span class="fu">curve</span>(d3<span class="op">.</span><span class="at">curveBasis</span>)<span class="op">;</span></span>
<span id="cb6-2841"><a href></a> <span class="co">// Store the update function</span></span>
<span id="cb6-2842"><a href></a> svg<span class="op">.</span><span class="fu">node</span>()<span class="op">.</span><span class="at">update</span> <span class="op">=</span> updateChart<span class="op">;</span></span>
<span id="cb6-2843"><a href></a> </span>
<span id="cb6-2844"><a href></a> <span class="co">// Initial render</span></span>
<span id="cb6-2845"><a href></a> <span class="fu">updateChart</span>(<span class="fu">filteredData</span>())<span class="op">;</span></span>
<span id="cb6-2846"><a href></a> </span>
<span id="cb6-2847"><a href></a> <span class="co">// Group to contain the basis function lines</span></span>
<span id="cb6-2848"><a href></a> <span class="kw">const</span> linesGroup <span class="op">=</span> g<span class="op">.</span><span class="fu">append</span>(<span class="st">&quot;g&quot;</span>)</span>
<span id="cb6-2849"><a href></a> <span class="op">.</span><span class="fu">attr</span>(<span class="st">&quot;class&quot;</span><span class="op">,</span> <span class="st">&quot;basis-functions&quot;</span>)<span class="op">;</span></span>
<span id="cb6-2850"><a href></a> </span>
<span id="cb6-2851"><a href></a> <span class="co">// Store the current basis functions for transition</span></span>
<span id="cb6-2852"><a href></a> <span class="kw">let</span> currentBasisFunctions <span class="op">=</span> <span class="kw">new</span> <span class="bu">Map</span>()<span class="op">;</span></span>
<span id="cb6-2853"><a href></a> </span>
<span id="cb6-2854"><a href></a> <span class="co">// Function to update the chart with new data</span></span>
<span id="cb6-2855"><a href></a> <span class="kw">function</span> <span class="fu">updateChart</span>(data) {</span>
<span id="cb6-2856"><a href></a> <span class="fu">updateChartInner</span>(g<span class="op">,</span> x<span class="op">,</span> y<span class="op">,</span> linesGroup<span class="op">,</span> color<span class="op">,</span> line<span class="op">,</span> data)<span class="op">;</span></span>
<span id="cb6-2857"><a href></a> }</span>
<span id="cb6-2858"><a href></a> </span>
<span id="cb6-2859"><a href></a> <span class="co">// Store the update function</span></span>
<span id="cb6-2860"><a href></a> svg<span class="op">.</span><span class="fu">node</span>()<span class="op">.</span><span class="at">update</span> <span class="op">=</span> updateChart<span class="op">;</span></span>
<span id="cb6-2861"><a href></a> </span>
<span id="cb6-2862"><a href></a> <span class="co">// Initial render</span></span>
<span id="cb6-2863"><a href></a> <span class="fu">updateChart</span>(<span class="fu">filteredData</span>())<span class="op">;</span></span>
<span id="cb6-2864"><a href></a> </span>
<span id="cb6-2865"><a href></a> container<span class="op">.</span><span class="fu">node</span>()<span class="op">.</span><span class="fu">appendChild</span>(svg<span class="op">.</span><span class="fu">node</span>())<span class="op">;</span></span>
<span id="cb6-2866"><a href></a> <span class="cf">return</span> container<span class="op">.</span><span class="fu">node</span>()<span class="op">;</span></span>
<span id="cb6-2867"><a href></a>}</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<span id="cb6-2847"><a href></a> container<span class="op">.</span><span class="fu">node</span>()<span class="op">.</span><span class="fu">appendChild</span>(svg<span class="op">.</span><span class="fu">node</span>())<span class="op">;</span></span>
<span id="cb6-2848"><a href></a> <span class="cf">return</span> container<span class="op">.</span><span class="fu">node</span>()<span class="op">;</span></span>
<span id="cb6-2849"><a href></a>}</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<div class="cell-output cell-output-display">
<div id="ojs-cell-5" data-nodetype="declaration">