viewof alpha = Inputs.range([0, 100], {
step: 1,
label: "自我接纳程度 (%)",
value: 70
})
// Third cell - calculate total value
total = {
const socialValue = (socialScore * percentageValue/100)
const soulValue = (100 * (alpha/100) * (100-percentageValue)/100) // 灵魂价值固定为100分
const actualTotal = socialValue + soulValue
return {
social: socialValue,
soul: soulValue,
total: actualTotal,
remaining: Math.max(0, 100 - actualTotal)
}
}
// Fourth cell - create the plot
plot = Plot.plot({
marks: [
Plot.barX(
[
{group: "total", type: "社会价值", value: total.social},
{group: "total", type: "灵魂价值", value: total.soul},
{group: "total", type: "未实现", value: total.remaining}
],
{
y: "group",
x: "value",
fill: "type",
stack: true
}
),
// Add text labels inside bars
Plot.text(
[{group: "total", x: total.social/2, text: `社会价值 ${total.social.toFixed(1)}`}],
{
y: "group",
fill: "white",
fontWeight: "bold"
}
),
Plot.text(
[{group: "total", x: total.social + total.soul/2, text: `灵魂价值 ${total.soul.toFixed(1)}`}],
{
y: "group",
fill: "white",
fontWeight: "bold"
}
)
],
color: {
domain: ["社会价值", "灵魂价值", "待实现"],
range: ["#1f77b4", "#ff7f0e", "#e0e0e0"],
legend: true
},
y: {axis: null},
x: {domain: [0, 100], label: "加权总分"},
width: 600,
height: 100,
marginBottom: 40
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
