31:T457,md`# Graphed Linked Inputs ### Exploring functions of multiple parameters In the interactive calculator *["Is It Better to Rent or Buy?"](https://www.nytimes.com/interactive/2014/upshot/buy-rent-calculator.html)* by[ Mike Bostock](https://twitter.com/mbostock), Shan Carter and Archie Tse a powerful user interface allows the user to explore the parameter space of a function with multiple input values. For each input value, an input element allows the user to set the corresponding value within a range, and also plots the function over that range, with all the other values fixed. This notebook attempts to replicate the core mechanics of that user interface. Functions of one and two variables are easily visualized by the traditional xy-plot and heatmaps/contours/similar respectively. Functions of more than two variables are more difficult to visualize, but this method is an interesting option. **Click and drag on the charts below** to explore the height of a projectile as a function of the horizontal distance from the origin (*x*), angle of elevation (*a*) and initial velocity (${tex`v_0`}).`32:Tdc3,createInput = (name, { min = 0, max = 1, step = 0.01, initialValue = 0.5 }) => { const nValues = 100; const innerHeight = height - margins.top - margins.bottom; const innerWidth = width - margins.left - margins.right; const yBase = height - margins.bottom; const values = d3.range(min, max, (max - min) / nValues).concat(max); const bandwidth = Math.max(1, Math.floor(innerWidth / nValues) - 1); const halfMarkerWidth = 3 / 2; const path = svg``; const circle = svg``; const resultMarker = svg``; const span = html``; const inputLabel = html`

`; const resultLabel = html`

`; const theSvg = svg``; const node = html`

${theSvg} ${inputLabel} ${resultLabel}

${tex`${name}`}

`; const xScale = d3 .scaleLinear([min, max], [margins.left, width - margins.right]) .clamp(true); const yScale = d3.scaleLinear().range([height - margins.bottom, margins.top]); const xAxisGenerator = d3.axisBottom(xScale); const xAxisContainer = d3 .select(theSvg) .append('g') .attr("transform", `translate(${0}, ${height - margins.top})`) .call(xAxisGenerator); const yAxisGenerator = d3.axisRight(yScale).ticks(Math.round(height / 30)); const yAxisContainer = d3 .select(theSvg) .append('g') .attr("transform", `translate(${width - margins.right}, ${0})`) .call(yAxisGenerator); function update(event) { const results = values.map(v => computeValueFor(name, v)); yScale.domain(d3.extent(results)); yAxisContainer.call(yAxisGenerator); const value = viewof input.value[name]; const result = computeValueFor(name, value); const x = xScale(value); const y = yScale(result); circle.setAttribute("cx", x); circle.setAttribute("cy", y); resultMarker.setAttribute("x", x - halfMarkerWidth); resultMarker.setAttribute("y", y); resultMarker.setAttribute("height", yBase - y); inputLabel.innerText = value.toFixed(2); inputLabel.style.left = x + "px"; inputLabel.style.top = height + "px"; resultLabel.innerText = result.toFixed(2); resultLabel.style.left = x + "px"; resultLabel.style.top = y + "px"; // If the event originated from this one, we don't need to update the path if (event.detail.name === name) return; path.setAttribute( "d", values .map( (v, i) => `M${xScale(v)},${yBase}v${yScale(computeValueFor(name, v)) - yBase}` ) .join("") //"M" + values.map((v, i) => `${xScale(v)},${yScale(results[i])}`).join("L") ); } const updateByMouse = event => setInputValue(name, quantizeWithStep(xScale.invert(event.x), min, step)); d3.select(theSvg) .call(d3.drag().on("drag", updateByMouse)) .on("pointerdown", updateByMouse); const listenerArgs = [eventName, update]; viewof input.addEventListener(...listenerArgs); invalidation.then(() => viewof input.removeEventListener(...listenerArgs)); update({ detail: { name: null } }); return node; }33:[] 2f:{"title":"Graphed Linked Inputs","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"{\n const entries = Object.entries(settings);\n entries.forEach(([name, { initialValue }]) =>\n setInputValue(name, initialValue)\n );\n return html`${entries.map(([name, variableOptions]) =>\n createInput(name, variableOptions)\n )}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"md`## ${tex`y(x, a, v_0) = x \\cdot tan(a) - \\frac{g \\cdot x^2}{2 v_o^2cos(a)^2}`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":685,"value":"{\n const decimals = 2;\n const x = input.x.toFixed(decimals);\n const a = input.a.toFixed(decimals);\n const v_0 = input.v_0.toFixed(decimals);\n return md`## ${tex`= ${x} \\cdot tan(${a}\\degree) - \\frac{9.82 \\cdot ${x}^2}{2 \\cdot ${v_0}^2cos(${a}\\degree)^2} = `} ${result.toFixed(\n 2\n )}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"md`TODO: Use the same y-scale so that the slopes in the respective charts can be compared visually`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"settings = ({\n x: { min: 0, max: 100, step: 1, initialValue: 32 },\n a: { min: 1, max: 89, step: 0.1, initialValue: 83 },\n v_0: { min: 10, max: 100, step: 1, initialValue: 92 }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"resultColor = \"yellowgreen\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"computeValue = ({ x, a, v_0 }) => {\n const aRad = (a * Math.PI) / 180;\n const cos = Math.cos(aRad);\n const y = x * Math.tan(aRad) - (9.82 * x * x) / (2 * v_0 * v_0 * cos * cos);\n return y;\n}\n// computeValue = ({ v0, a, t }) => (t * (v0 + a * t)) / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":465,"value":"margins = ({ top: 20, left: 40, right: 60, bottom: 20 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"viewof input = Input({})","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"result = computeValue(input)","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"quantizeWithStep = (value, min, step) =>\n Math.round((value - min) / step) * step + min","pinned":true,"hidden":false,"mode":"ojs"},{"id":218,"value":"input","pinned":true,"hidden":false,"mode":"ojs"},{"id":244,"value":"// TODO: refactor so we don't have to create so many objects when evaluating?\ncomputeValueFor = (name, value) =>\n computeValue({ ...viewof input.value, [name]: value })","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"eventName = \"input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"containerColor = (v => `rgb(${v},${v},${v})`)(245)","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"function setInputValue(name, value) {\n const i = viewof input;\n i.value[name] = value;\n i.dispatchEvent(new CustomEvent(eventName, { detail: {name} }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"height = 125","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"import { Range, Input } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}