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

Adjust input size.

Browse Source
This commit is contained in:
Jonathan Berrisch
2025-05-18 21:07:24 +02:00
parent 7a0c64676c
commit 9a2cef25df
1 changed files with 24 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
app.qmd
View File

@@ -36,21 +36,34 @@ chart = {
const filteredData = () => bsplineData.filter(d => selectedKnots == d.knots && Math.abs(selectedMu - d.mu) < 0.001); const filteredData = () => bsplineData.filter(d => selectedKnots == d.knots && Math.abs(selectedMu - d.mu) < 0.001);
const container = d3.create("div").style("margin-bottom", "20px"); const container = d3.create("div").style("margin-bottom", "20px");
// Knots slider control // Knots slider control
const knotsControl = container.append("div").style("display","flex").style("align-items","center").style("gap","10px"); const knotsControl = container
knotsControl.append("label").text("Knots:"); .append("div")
knotsControl.append("input") .style("display","flex")
.attr("type","range").attr("min",minKnots).attr("max",maxKnots).attr("step",1) .style("align-items","center")
.style("gap","10px");
knotsControl
.append("label")
.text("Knots:")
.style("font-size","16px");
knotsControl
.append("input")
.attr("type","range")
.attr("min",minKnots)
.attr("max",maxKnots)
.attr("step",1)
.property("value",selectedKnots) .property("value",selectedKnots)
.style("width","100px") // narrower slider
.style("height","10px") // thinner track
.on("input", function() { selectedKnots = +this.value; knotsControl.select("span").text(selectedKnots); updateChart(filteredData()); }); .on("input", function() { selectedKnots = +this.value; knotsControl.select("span").text(selectedKnots); updateChart(filteredData()); });
knotsControl.append("span").text(selectedKnots); knotsControl.append("span").text(selectedKnots).style("font-size","16px");;
// μ slider control // μ slider control
const muControl = container.append("div").style("display","flex").style("align-items","center").style("gap","10px"); const muControl = container.append("div").style("display","flex").style("align-items","center").style("gap","10px");
muControl.append("label").text("μ:"); muControl.append("label").text("μ:").style("font-size","16px");
muControl.append("input") muControl.append("input")
.attr("type","range").attr("min",minMu).attr("max",maxMu).attr("step",0.1) .attr("type","range").attr("min",minMu).attr("max",maxMu).attr("step",0.1)
.property("value",selectedMu) .property("value",selectedMu)
.on("input", function() { selectedMu = +this.value; muControl.select("span").text(selectedMu); updateChart(filteredData()); }); .on("input", function() { selectedMu = +this.value; muControl.select("span").text(selectedMu); updateChart(filteredData()); });
muControl.append("span").text(selectedMu); muControl.append("span").text(selectedMu).style("font-size","16px");
// Build SVG // Build SVG
const width = 800; const width = 800;
const height = 400; const height = 400;
@@ -94,11 +107,13 @@ chart = {
const xAxis = g.append("g") const xAxis = g.append("g")
.attr("transform", `translate(0,${innerHeight})`) .attr("transform", `translate(0,${innerHeight})`)
.attr("class", "x-axis") .attr("class", "x-axis")
.call(d3.axisBottom(x).ticks(10)); .call(d3.axisBottom(x).ticks(10))
.style("font-size", "16px");
const yAxis = g.append("g") const yAxis = g.append("g")
.attr("class", "y-axis") .attr("class", "y-axis")
.call(d3.axisLeft(y).ticks(5)); .call(d3.axisLeft(y).ticks(5))
.style("font-size", "16px");
// Add axis labels // Add axis labels
// g.append("text") // g.append("text")