Update app

This commit is contained in:
2025-05-18 20:56:02 +02:00
parent de3f7ca407
commit 56410ce775

44
app.qmd
View File

@@ -78,13 +78,13 @@ chart = {
.attr("style", "max-width: 100%; height: auto;"); .attr("style", "max-width: 100%; height: auto;");
// Add chart title // Add chart title
svg.append("text") // svg.append("text")
.attr("class", "chart-title") // .attr("class", "chart-title")
.attr("x", width / 2) // .attr("x", width / 2)
.attr("y", 20) // .attr("y", 20)
.attr("text-anchor", "middle") // .attr("text-anchor", "middle")
.attr("font-size", "16px") // .attr("font-size", "16px")
.attr("font-weight", "bold"); // .attr("font-weight", "bold");
// Create the chart group // Create the chart group
const g = svg.append("g") const g = svg.append("g")
@@ -101,18 +101,18 @@ chart = {
.call(d3.axisLeft(y).ticks(5)); .call(d3.axisLeft(y).ticks(5));
// Add axis labels // Add axis labels
g.append("text") // g.append("text")
.attr("x", innerWidth / 2) // .attr("x", innerWidth / 2)
.attr("y", innerHeight + 35) // .attr("y", innerHeight + 35)
.attr("text-anchor", "middle") // .attr("text-anchor", "middle")
.text("x"); // .text("x");
g.append("text") // g.append("text")
.attr("transform", "rotate(-90)") // .attr("transform", "rotate(-90)")
.attr("x", -innerHeight / 2) // .attr("x", -innerHeight / 2)
.attr("y", -30) // .attr("y", -30)
.attr("text-anchor", "middle") // .attr("text-anchor", "middle")
.text("y"); // .text("y");
// Add a horizontal line at y = 0 // Add a horizontal line at y = 0
g.append("line") g.append("line")
@@ -165,8 +165,8 @@ chart = {
const dataByFunction = Array.from(d3.group(data, d => d.b)); const dataByFunction = Array.from(d3.group(data, d => d.b));
// Update the chart title // Update the chart title
svg.select(".chart-title") // svg.select(".chart-title")
.text(`B-spline Basis Functions (${selectedKnots} knots, μ = ${selectedMu})`); // .text(`B-spline Basis Functions (${selectedKnots} knots, μ = ${selectedMu})`);
// Create a key function to track basis functions // Create a key function to track basis functions
const keyFn = d => d[0]; const keyFn = d => d[0];
@@ -182,9 +182,9 @@ chart = {
.attr("d", d => line(d[1].map(pt => ({x: pt.x, y: 0})))) .attr("d", d => line(d[1].map(pt => ({x: pt.x, y: 0}))))
.style("opacity", 0), .style("opacity", 0),
update => update, update => update,
exit => exit.transition().duration(750).style("opacity", 0).remove() exit => exit.transition().duration(1000).style("opacity", 0).remove()
) )
.transition().duration(750) .transition().duration(1000)
.attr("d", d => line(d[1])) .attr("d", d => line(d[1]))
.attr("stroke", (_, i) => color(i)) .attr("stroke", (_, i) => color(i))
.style("opacity", 1); .style("opacity", 1);