Published unlisted
Edited
Aug 2, 2022
PSCI 107, Lesson 1, Effort to Utility
effToUtility = htl.html`
<div> ${viewof controls} </div>
<div> ${etoUChart} </div>
`
maxOtherEffort = 10
viewof controls = Inputs.form({
otherEfforts: Inputs.number([0,maxOtherEffort], {step: 0.1, label: md`Set ${tex`E_{-i}`}`, value: 0}),
showMax: Inputs.toggle({label: md`Show ${tex`e_i`} at which ${tex`i`}'s utility is highest'`, value: false})
})
md`Chosen effort is ${controls.otherEfforts}. Show max setting is ${controls.showMax}`
etoUChart = {
let otherEfforts = controls.otherEfforts;
let maxEffort = 10;
let U = (x,otherEfforts) => 100*(x + otherEfforts)/(x + otherEfforts + 1) - x;
let points = [...Array(1000)].map((el,idx) => ({
x: idx*maxEffort/1000,
y: U(idx*maxEffort/1000,otherEfforts)
}))
let lp = Plot.plot({
x: {
domain: [0,10],
grid: true,
label: null,
},
y: {
domain: [0,100*10/(11)],
grid: true,
label: null,
},
marginLeft: 60,
marginBottom: 60,
marginRight: 100,
marks: [
Plot.line(points, {
x: "x",
y: "y"
}),
Plot.ruleX([Math.max(0,9-otherEfforts)], {
strokeDasharray: [10,1],
strokeWidth: 2,
stroke: controls.showMax ? "orange" : null
}),
Plot.ruleY([0]),
Plot.ruleX([0])
]
})
let xLab = MathJax.tex2svg(
String.raw`e_i`
);
d3.select(lp).select("svg > g[aria-label='x-axis']")
.append("g")
.attr("transform", `translate(300,30) scale(1.5)`)
.append(() => xLab.querySelector("svg"))
let yLab = MathJax.tex2svg(
String.raw`\text{$i$'s utility level}`
)
d3.select(lp).select("svg > g[aria-label='y-axis']")
.append("g")
.attr("transform", `translate(-50,240) scale(1.5) rotate(270)`)
.append(() => yLab.querySelector("svg"))
if (controls.showMax){
let argMaxLabel1 = MathJax.tex2svg(
String.raw`\begin{align*}&\text{Effort level for $i$} \\ &\text{at which $i$'s utility} \\ &\text{is highest}& \end{align*}`,
{
display: true,
}
)
let argMaxLabel1x = d3.select(lp).select("svg > g[aria-label='rule'][stroke='orange'] > line").attr("x1")
let argMaxLabel1y = 0.5*d3.select(lp).select("svg > g[aria-label='rule'][stroke='orange'] > line").attr("y1") + 0.5*d3.select(lp).select("svg > g[aria-label='rule'][stroke='orange'] > line").attr("y2")
d3.select(lp).append("g")
.attr('transform', `translate(${Number(argMaxLabel1x)+5},${argMaxLabel1y}) scale(1.5)`)
.append(() => argMaxLabel1.querySelector("svg"));
}
return lp;
}
MathJax = require('https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js').catch(
() => window['MathJax']
)
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.
