2c:["$","title",null,{"children":"Direct Manipulation Plot | Tom Larkworthy | Observable"}] 31:T5f5,viewof plot_trajectory = Plot.plot({ aspectRatio: 1, x: { domain: [0, 300] }, y: { domain: [0, 150] }, marks: [ Plot.dot( x_trajectory, Plot.pointer({ x: "i", y: "j", fill: "red", r: 20, maxRadius: 100 }) ), Plot.dot(x_trajectory, { x: "i", y: "j", value: true, r: 20 }), Plot.line(arc, { strokeDasharray: [1, 20] }), Plot.link([max_arc], { x1: max_arc[0], y1: (d) => 40, x2: (d) => max_arc[0], y2: (d) => 0, stroke: "red" }), Plot.link([max_arc], { x1: 0, y1: (d) => d[1], x2: (d) => d[0] / 2, y2: (d) => d[1], stroke: "blue" }), Plot.text(x_trajectory, { x: 5, y: max_arc[1], text: (d) => `${max_arc[1].toFixed(1)}`, textAnchor: "start", fontSize: 12, fill: "blue", dy: -10 }), Plot.text(x_trajectory, { x: d3.max(arc, (d) => d[0]), y: 5, text: (d) => `${max_arc[0].toFixed(1)}`, textAnchor: "end", fontSize: 12, fill: "red", dy: -10 }), Plot.text(x_trajectory, { x: 20, y: 5, text: (d) => `${((Math.atan(d.j / d.i) * 180) / Math.PI).toFixed(0)}°`, textAnchor: "start", fontSize: 24 }), Plot.arrow([{}], { x1: 0, y1: 0, x2: arc.at(-1)[0], y2: 0 }), Plot.arrow(x_trajectory, { x1: 0, y1: 0, x2: "i", y2: "j", stroke: "green" }) ] })32:T4c9,## Inverting scales Given a dataset, ${tex`X`}, each Plot creates scales, ${tex`S`}, that map data space to pixel space, ${tex`P`}:

${tex`XS = P`}

When we click the mouse, ${tex`m`}, at time ${tex`t`}, we indicate a position in pixel space, ${tex`u`}:

${tex`u \in P \times P := m_t`}

When we drag the mouse, ${tex`m`}, on the screen, we express a vector action, ${tex`\bar{u}`}, in pixel space. This vector is the difference between the starting and ending positions:

${tex`\bar{u} \in P \times P := m_t - u`}

To invert the mapping:

${tex`(X + x)S = P + \bar{u}`}

If ${tex`S`} is linear, inversion is straightforward. However, for general cases, we minimize the following objective:

${tex`\min_x \| (X + x)S - (P + \bar{u}) \|^2`}

This ensures we find ${tex`x`} such that the adjusted dataset maps to the perturbed pixel space, accounting for the drag action. The minimisation approach generalizes to ordinal and categorical variables.33:T5d4,## Manipulate Manipulate is the userspace function to update the data from manipulations of the [Plot pointer](https://observablehq.com/plot/interactions/pointer). There is quite a lot of state tracking going on, so it is vitally important the result of manipulate is returned from the enclosing cell, so that next tick, `this` is initialised to the previous result. ~~~js manipulate({ this: this, // important! It juggles the viewofData: viewof x_trajectory, // the data the pointer is drawn from viewofPlot: viewof plot_trajectory, // a plot that contains a pointer invalidation, onInteraction: ({ event, // triggering DOM event, event.preventDefault() to stop scrolling pixelStart, // start pointer position in pixel space pixelCurrent, // current pointer position in pixel space dataStart, // shallow copy of selected data when drag began dataCurrent, // live reference to selected data viewofPlot // reference to viewofPlot }) => { // your custom code here // typically you will read the scale from viewofPlot // convert the delta in pixel space to a delta in data space using invert // then set dataCurrent to be dataStart + delta data space // but you can also apply any domain constraints programatically // or change a different dataset, or do nothing. // its a good ideal to call event.preventDefault() if you have served an interaction // as this prevents scrolling on mobile. } ); ~~~34:T9ec,interactions = { const listeners = new Set(); const register = (callback) => { listeners.add(callback); return () => listeners.delete(callback); }; const notify = (event) => { listeners.forEach((callback) => { try { callback(event); } catch (err) { console.error(err); } }); }; const position = (evt) => evt.clientX ? [evt.clientX, evt.clientY] : [evt.touches[0].clientX, evt.touches[0].clientY]; let start = undefined; let current = undefined; const emit = (event) => { if (start && current) notify({ event, pixelCurrent: current, pixelStart: start }); else { notify({ event, pixelCurrent: undefined, pixelStart: undefined }); } //event.preventDefault(); }; function pointerdown(evt) { start = current = position(evt); evt.target.addEventListener("touchmove", move, { passive: false }); evt.target.addEventListener("touchend", pointerup); emit(evt); } function pointerup(evt) { start = current = undefined; evt.target.removeEventListener("touchmove", move, { passive: false }); evt.target.removeEventListener("touchend", pointerup); emit(evt); } function move(evt) { if (evt instanceof MouseEvent) { const flags = evt.buttons !== undefined ? evt.buttons : evt.which; const primaryMouseButtonDown = (flags & 1) === 1; if (primaryMouseButtonDown) current = position(evt); else start = current = undefined; } else { // touch current = position(evt); } emit(evt); } //overlay.addEventListener("pointerdown", pointerdown); swallowed by plot document.addEventListener("mousedown", pointerdown); document.addEventListener("touchstart", pointerdown, { passive: false }); document.addEventListener("pointerup", pointerup); document.addEventListener("pointermove", move, { passive: false }); document.addEventListener("touchend", pointerup); invalidation.then(() => { //overlay.removeEventListener("pointerdown", pointerdown); document.removeEventListener("mousedown", pointerdown); document.removeEventListener("touchstart", pointerdown, { passive: false }); document.removeEventListener("pointerup", pointerup); document.removeEventListener("pointermove", move, { passive: false }); document.removeEventListener("touchmove", move, { passive: false }); document.removeEventListener("touchend", pointerup); }); return register; }35:[] 2f:{"id":"e627aaaaa9857257","slug":"manipulate","title":"Direct Manipulation Plot","thumbnail":"28a0a7329a65f21b6c6c5d1f27f979a4d4d051498557878266c5b4ab2ddb7c98","access_level":"public","create_time":"$D2024-07-19T18:01:09.894Z","update_time":"$D2025-02-02T09:31:20.284Z","view_time":null,"first_public_time":"$D2025-01-14T20:25:15.444Z","has_unpublished_edits":null,"fork":false,"stars":18,"starred":false,"owner":{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024"},"version":1727,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}],"members":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null,"role":"editor"},{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Direct Manipulation Plot","cells":[{"id":0,"value":"# Direct Manipulation Plot\n\n\nIn a [Future of Coding conversation](https://akkartik.name/archives/foc/linking-together/1721317807.883659.html) provoked by the blog [Where Should Visual Programming Go?](https://tonsky.me/blog/diagrams/) I argued that great visualization tools like `Plot` were the Future of Coding. However, some disagreed becuase it is _\"only\"_ a data -> viz transformation, and *true* Future of Code tools would support direct manipulation for the inverse. That made we wonder if it is possible to \"invert\" visual tools to generate direct manipulation tools in a methodical way?\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1689,"value":"~~~js\nimport {manipulate, invert} from '@tomlarkworthy/manipulate'\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1444,"value":"## Plot is extremely flexible\n\nYou might not appreciate how flexible plot is at illustrating technical and spatial concepts. What the optimal angle to throw a ball to make it travel furthest? ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1447,"value":"viewof x_trajectory = Inputs.input([{ j: 40, i: 20 }])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1450,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1542,"value":"trajectory_manipulate = manipulate({\n this: this,\n viewofData: viewof x_trajectory,\n viewofPlot: viewof plot_trajectory,\n invalidation,\n onInteraction: ({\n event,\n pixelStart,\n pixelCurrent,\n dataStart,\n dataCurrent,\n viewofPlot\n }) => {\n // Adjust control surface\n const scaleX = viewofPlot.scale(\"x\");\n const scaleY = viewofPlot.scale(\"y\");\n dataCurrent.i = Math.max(\n invert(\n scaleX,\n scaleX.apply(dataStart.i) + pixelCurrent[0] - pixelStart[0]\n ),\n 0.1\n );\n dataCurrent.j = Math.max(\n invert(\n scaleY,\n scaleY.apply(dataStart.j) + pixelCurrent[1] - pixelStart[1]\n ),\n 0.1\n );\n\n // fix velocity\n const magnitude = Math.sqrt(\n dataCurrent.i * dataCurrent.i + dataCurrent.j * dataCurrent.j\n );\n if (magnitude > 50) {\n const scale = 50 / magnitude;\n dataCurrent.i *= scale;\n dataCurrent.j *= scale;\n }\n event.preventDefault(); // prevents scrolling on mobile\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1478,"value":"arc = {\n const g = 9.81; // acceleration due to gravity in m/s^2\n\n // Initial velocity components\n const v = Math.sqrt(\n Math.pow(x_trajectory[0].i, 2) + Math.pow(x_trajectory[0].j, 2)\n );\n const thetaRad = Math.atan2(x_trajectory[0].j, x_trajectory[0].i);\n\n const points = [];\n\n // Function to calculate y for a given x using the parabolic motion formula\n function getY(x) {\n return (\n x * Math.tan(thetaRad) -\n (g * x * x) / (2 * v * v * Math.pow(Math.cos(thetaRad), 2))\n );\n }\n\n // Calculate the range of the projectile\n const range = (v * v * Math.sin(2 * thetaRad)) / g;\n const step = range / 200; // dividing the range into 100 steps\n\n // Generate points for the arc\n for (let x = 0; x <= range; x += step) {\n const y = getY(x);\n points.push([x, y]);\n }\n\n return points;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1510,"value":"max_arc = [d3.max(arc, (d) => d[0]), d3.max(arc, (d) => d[1])]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1683,"value":"# Theory\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":183,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":519,"value":"invert = (scale, point) => {\n if (scale.type === \"linear\") {\n // easy case\n return scale.invert(point);\n } else if (scale.type === \"point\") {\n // nearest neighbour search\n let nearestSq = Number.MAX_VALUE;\n let nearest = undefined;\n for (let i = 0; i < scale.domain.length; i++) {\n const candidate = scale.apply(scale.domain[i]);\n const distSq = (point - candidate) * (point - candidate);\n if (distSq < nearestSq) {\n nearestSq = distSq;\n nearest = scale.domain[i];\n }\n }\n return nearest;\n } else {\n throw new Error(`Can't invert '${scale.type}'`);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1228,"value":"Generators.observe((notify) => {\n invalidation.then(\n interactions(({ event, pixelStart, pixelCurrent }) => {\n notify({ event, pixelStart, pixelCurrent });\n })\n );\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1432,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1280,"value":"function manipulate({\n this: state,\n viewofData,\n viewofPlot, // or anything that can select\n invalidation,\n onInteraction = undefined\n}) {\n state = state || {};\n if (onInteraction) {\n if (state.interactor) state.interactor();\n state.interactor = interactions((interaction) => {\n if (!interaction.pixelCurrent) {\n state.dataCurrent = undefined;\n state.dataStart = undefined;\n } else if (!state.dataCurrent) {\n state.dataCurrent = viewofData.value.find((x) => x == viewofPlot.value);\n state.dataStart = { ...state.dataCurrent };\n }\n\n if (state.dataCurrent) {\n onInteraction({\n ...interaction,\n ...state,\n dataStart: state.dataStart,\n dataCurrent: state.dataCurrent,\n viewofPlot,\n viewofData\n });\n viewofData.dispatchEvent(new Event(\"input\"));\n }\n });\n }\n return state;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"## Interaction\n\nWe listen to DOM events and pipe the pixel change *synchronously* to a callback. We include the triggering events, so that downstream listeners can conditionally cancel the DOM event to prevent unwanted scrolling on mobile.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1217,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1672,"value":"# MORE EXAMPLES","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":199,"value":"## Continuous Linear case ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"viewof x_simple = Inputs.input([\n { x: 0.1, y: 0.1 },\n { x: 0.9, y: 0.1 },\n { x: 0.1, y: 0.9 },\n { x: 0.5, y: 0.5 }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1361,"value":"manipulate({\n this: this,\n viewofData: viewof x_simple,\n viewofPlot: viewof plot_simple,\n invalidation,\n onInteraction: ({\n event,\n pixelStart,\n pixelCurrent,\n dataStart,\n dataCurrent,\n viewofPlot\n }) => {\n const scaleX = viewofPlot.scale(\"x\");\n const scaleY = viewofPlot.scale(\"y\");\n dataCurrent.x = invert(\n scaleX,\n scaleX.apply(dataStart.x) + pixelCurrent[0] - pixelStart[0]\n );\n dataCurrent.y = invert(\n scaleY,\n scaleY.apply(dataStart.y) + pixelCurrent[1] - pixelStart[1]\n );\n event.preventDefault(); // prevents scrolling on mobile\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"viewof plot_simple = Plot.plot({\n marks: [\n Plot.density(x_simple, {\n x: \"x\",\n y: \"y\",\n stroke: \"blue\",\n fill: \"#fefeff\",\n thresholds: 5,\n bandwidth: 70,\n strokeWidth: 0.25\n }),\n Plot.dot(x_simple, { x: \"x\", y: \"y\", value: true, r: 20 }),\n Plot.dot(\n x_simple,\n Plot.pointer({\n x: \"x\",\n y: \"y\",\n fill: \"red\",\n r: 20,\n maxRadius: Infinity\n })\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"todo: its pretty trivial to add points with a click, and remove the last selected point with a key press","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":474,"value":"## Ordinal/Categorical Data\n\nNot all data domains are continuous","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":477,"value":"viewof x_ordcat = Inputs.input([\n { ordinal: \"small\", categorical: \"a\" },\n { ordinal: \"medium\", categorical: \"b\" },\n { ordinal: \"large\", categorical: \"c\" }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1380,"value":"manipulate({\n this: this,\n viewofData: viewof x_ordcat,\n viewofPlot: viewof plot_ordcat,\n invalidation,\n onInteraction: ({\n event,\n pixelStart,\n pixelCurrent,\n dataStart,\n dataCurrent,\n viewofPlot\n }) => {\n const scaleX = viewofPlot.scale(\"x\");\n const scaleY = viewofPlot.scale(\"y\");\n dataCurrent.ordinal = invert(\n scaleX,\n scaleX.apply(dataStart.ordinal) + pixelCurrent[0] - pixelStart[0]\n );\n dataCurrent.categorical = invert(\n scaleY,\n scaleY.apply(dataStart.categorical) + pixelCurrent[1] - pixelStart[1]\n );\n event.preventDefault(); // prevents scrolling on mobile\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"non-linear scales aren't directly invertible, so we do nearest neighbour instead. You achieve a nice snapping effect.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":479,"value":"viewof plot_ordcat = Plot.plot({\n x: {\n type: \"point\",\n domain: [\"small\", \"medium\", \"large\"],\n grid: true\n },\n y: {\n type: \"point\",\n domain: [\"a\", \"b\", \"c\"],\n grid: true\n },\n marks: [\n Plot.dot(x_ordcat, {\n x: \"ordinal\",\n y: \"categorical\",\n value: true,\n r: 10\n }),\n Plot.dot(\n x_ordcat,\n Plot.pointer({\n x: \"ordinal\",\n y: \"categorical\",\n fill: \"red\",\n r: 10,\n maxRadius: Infinity\n })\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"## Clamping\n\n`Plot` provides a ton of flexibility when going from data space to visualisation. These features carry over to derived manipulations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":578,"value":"viewof x_sliders = Inputs.input([\n { value: 0 },\n { value: 1 },\n { value: 0.5 },\n { value: -0.1 },\n { value: -0.1 }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1256,"value":"manipulate({\n this: this,\n viewofData: viewof x_sliders,\n viewofPlot: viewof plot_sliders,\n invalidation,\n onInteraction: ({\n event,\n pixelStart,\n pixelCurrent,\n dataStart,\n dataCurrent,\n viewofPlot\n }) => {\n const y_scale = viewofPlot.scale(\"y\");\n dataCurrent.value = invert(\n y_scale,\n y_scale.apply(dataStart.value) + pixelCurrent[1] - pixelStart[1]\n );\n event.preventDefault(); // prevents scrolling on mobile\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"viewof plot_sliders = Plot.plot({\n height: 200,\n y: {\n type: \"linear\",\n domain: [-1, 1],\n clamp: true,\n grid: true\n },\n x: {\n domain: [-0.5, 4.5],\n axis: null\n }, // hide axis\n marks: [\n Plot.ruleX(x_sliders, {\n x: (d, i) => i,\n strokeWidth: 2,\n strokeLinecap: \"round\",\n stroke: \"#aaa\"\n }),\n Plot.dot(x_sliders, {\n symbol: \"square2\",\n r: 25,\n x: (d, i) => i,\n y: \"value\",\n stroke: \"black\",\n fill: \"#eee\"\n }),\n Plot.text(x_sliders, {\n x: (d, i) => i,\n y: \"value\",\n text: \"value\"\n }),\n Plot.dot(\n x_sliders,\n Plot.pointer({\n x: (d, i) => i,\n y: \"value\",\n symbol: \"square2\",\n stroke: \"red\",\n r: 25,\n maxRadius: Infinity\n })\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"## References\n\nSome types of data points need to reference to others, think arrows or edges on graphs.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":662,"value":"viewof x_nodes = Inputs.input([\n {\n id: \"node1\",\n x: 0,\n y: 1\n },\n {\n id: \"node2\",\n x: 1,\n y: 0\n },\n {\n id: \"node3\",\n x: 0,\n y: 0.2\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"viewof x_edges = Inputs.input([\n {\n start: \"node1\",\n end: \"node2\"\n },\n {\n start: \"node2\",\n end: \"node3\"\n },\n {\n start: \"node3\",\n end: \"node2\"\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1402,"value":"manipulate({\n this: this,\n viewofData: viewof x_nodes,\n viewofPlot: viewof plot_graph,\n invalidation,\n onInteraction: ({\n event,\n pixelStart,\n pixelCurrent,\n dataStart,\n dataCurrent,\n viewofPlot\n }) => {\n const x_scale = viewofPlot.scale(\"x\");\n const y_scale = viewofPlot.scale(\"y\");\n dataCurrent.x = invert(\n x_scale,\n x_scale.apply(dataStart.x) + pixelCurrent[0] - pixelStart[0]\n );\n dataCurrent.y = invert(\n y_scale,\n y_scale.apply(dataStart.y) + pixelCurrent[1] - pixelStart[1]\n );\n event.preventDefault(); // prevents scrolling on mobile\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"viewof plot_graph = Plot.plot({\n width: 400,\n aspectRatio: 1,\n x: {\n domain: [-0.2, 1.2]\n },\n y: {\n domain: [-0.2, 1.2]\n },\n axis: false,\n marks: [\n Plot.frame(),\n Plot.dot(x_nodes, { x: \"x\", y: \"y\", r: 40 }),\n Plot.text(x_nodes, { x: \"x\", y: \"y\", text: \"id\" }),\n Plot.arrow(x_edges, {\n x1: (d) => x_nodes.find((n) => n.id == d.start).x,\n x2: (d) => x_nodes.find((n) => n.id == d.end).x,\n y1: (d) => x_nodes.find((n) => n.id == d.start).y,\n y2: (d) => x_nodes.find((n) => n.id == d.end).y,\n inset: 40,\n bend: true\n }),\n Plot.dot(\n x_nodes,\n Plot.pointer({\n x: \"x\",\n y: \"y\",\n r: 40,\n stroke: \"red\",\n maxRadius: Infinity\n })\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"We can consider the references as a separate categorical map. You can mix and match multiple manipulations targeting the same data and plots freely.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":735,"value":"viewof x_edges_domain = Inputs.input(\n Array.from({ length: x_nodes.length * x_nodes.length }).flatMap((_, i) =>\n i % x_nodes.length != Math.floor(i / x_nodes.length)\n ? {\n start: x_nodes[i % x_nodes.length].id,\n end: x_nodes[Math.floor(i / x_nodes.length)].id\n }\n : []\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":717,"value":"viewof plot_edges = Plot.plot({\n x: {\n type: \"point\",\n domain: x_nodes.map((n) => n.id),\n grid: true\n },\n y: {\n type: \"point\",\n domain: x_nodes.map((n) => n.id),\n grid: true\n },\n marks: [\n Plot.dot(x_edges, {\n x: \"start\",\n y: \"end\",\n r: 5,\n fill: \"black\"\n }),\n Plot.dot(\n x_edges_domain,\n Plot.pointer({\n x: \"start\",\n y: \"end\",\n r: 7,\n stroke: (d) => (x_edges.find((e) => _.isEqual(d, e)) ? \"red\" : \"blue\")\n })\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1410,"value":"manipulate({\n this: this,\n viewofData: viewof x_edges_domain,\n viewofPlot: viewof plot_edges,\n invalidation,\n onInteraction: ({\n event,\n pixelStart,\n pixelCurrent,\n dataStart,\n dataCurrent,\n viewofPlot\n }) => {\n if (!_.isEqual(pixelStart, pixelCurrent)) return; // only trigger for click\n const edgeIndex = viewof x_edges.value.findIndex((x) =>\n _.isEqual(x, dataCurrent)\n );\n if (edgeIndex != -1) {\n viewof x_edges.value.splice(edgeIndex, 1);\n } else {\n viewof x_edges.value.push({ ...dataCurrent });\n }\n viewof x_edges.dispatchEvent(new Event(\"input\"));\n event.preventDefault(); // prevents scrolling on mobile\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":995,"value":"## Non linear Spaces (projections)\n\nDOES NOT WORK waiting on https://github.com/observablehq/plot/issues/1191","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1007,"value":"// import { land } from \"@observablehq/plot-world-map\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1001,"value":"viewof longitude = Inputs.range([-180, 180])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1013,"value":"viewof x_location = Inputs.input([\n {\n longitude: 0,\n latitude: 0\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":999,"value":"viewof plot_location = Plot.plot({\n width: 300,\n projection: { type: \"orthographic\", rotate: [-longitude, 0] },\n r: { transform: (d) => Math.pow(10, d) }, // convert Richter to amplitude\n marks: [\n Plot.geo(land, { fill: \"currentColor\", fillOpacity: 0.2 }),\n Plot.sphere(),\n Plot.dot(x_location, {\n x: \"longitude\",\n y: \"latitude\",\n stroke: \"blue\",\n fill: \"blue\",\n r: 10,\n fillOpacity: 0.2\n }),\n Plot.dot(\n x_location,\n Plot.pointer({\n x: \"longitude\",\n y: \"latitude\",\n stroke: \"red\",\n fill: \"red\",\n r: 10,\n fillOpacity: 0.2\n })\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1686,"value":"## Editable Text\n\nNot sure if its possible, ideally we would use https://github.com/observablehq/plot/issues/1213","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body" 2b:E{"digest":"NEXT_REDIRECT;replace;/@tomlarkworthy/manipulate;307;"}