决策模型演示

viewof thre = Inputs.range([0, 100], {step: 1, label: "决策阈值"})
viewof beta = Inputs.range([0.01, 10], {step: 0.01, label: "随机性"})
viewof alpha = Inputs.range([0, 1], {step: 0.01, value: 0.5, label: "新颖性权重"})
viewof b = Inputs.range([0.1, 10], {step: 0.1, value: 1, label: "替代弹性"})
viewof ori = Inputs.range([0, 100], {step: 1, label: "新颖性"})
viewof eff = Inputs.range([0, 100], {step: 1, label: "有效性"})

选择还是拒绝？

function ces(ori, eff, alpha, b) {
  return 100 * Math.pow(alpha * Math.pow(ori/100, b) + (1 - alpha) * Math.pow(eff/100, b), 1/b);
}

function prob(L, thre, beta) {
  return 1 / (1 + Math.exp(-beta * (L - thre)));
}

L = ces(ori, eff, alpha, b)
P = prob(L, thre, beta)

{
  const width = 100;
  const height = 50;
  const y = d3.scaleLinear([100, 0], [0, height]);
  
  const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);

  svg.append("rect")
    .attr("x", width / 3)
    .attr("y", 0)
    .attr("width", width / 3)
    .attr("height", height)
    .attr("fill", "#eee")
    .attr("stroke", "none");
  
  const water = svg.append("rect")
    .attr("x", width / 3)
    .attr("width", width / 3)
    .attr("fill", "steelblue");
  
  water.attr("y", y(L))
    .attr("height", height - y(L));
  
  svg.append("line")
    .attr("x1", width / 3)
    .attr("x2", width * 2 / 3) 
    .attr("y1", y(thre))
    .attr("y2", y(thre))
    .attr("stroke", "red")
    .attr("stroke-width", 2);
  
  svg.append("text")
    .text(d3.format(".2f")(P))
    .attr("x", width / 6)
    .attr("y", height / 2)
    .attr("text-anchor", "middle")
    .attr("font-size", 14)
    .attr("fill", "black");

  
  return svg.node();
}

img1Path = "images/截屏2024-06-11 18.00.47.png";
img2Path = "images/截屏2024-06-11 18.06.42.png";

htl.html`<img src="${P > 0.5 ? img1Path : img2Path}" 
              style="max-width: 100%; max-height: 100%;">`