2b:null 2c:["$","title",null,{"children":"Brushable ScatterPlot (Reactive Widget) | John Alexis Guerra Gómez | Observable"}] 31:T10c9,async function BrushableScatterPlot(dataToPlot, options) { options = { interactive: true, colorScheme: undefined, colorSchemeNominal: "tableau20", colorSchemeQuantitative: "brownbluegreen", colorType: undefined, x: "x", y: "y", color: null, // null for no color, you can also pass an attribute name size: null, // null for no size, you can also pass an attribute name shape: null, // null for no shape, you can also pass an attribute name id: null, // null will use the index, you can also pass an attribute name for id tooltip: undefined, colorDomain: null, // e.g. [-0.2, 7] title: `${dataToPlot.length} documents by similarity`, //adjusts size of graph based on the size of the screen width: 600, height: 500, sizeRange: undefined, // e.g. [0, 100] vegaSpecWrapper: (d) => d, // Use it to enhance the vega spec, e.g. to add layers to it colorOnHover: true, shapeDomain: undefined, // provide a custom array of values from the domain if you want ...options }; if (!options.id) { if (dataToPlot?.length && "id" in dataToPlot[0]) { options.id = "id"; } else { // If no id, use the index as id dataToPlot.map((d, i) => (d.id = i)); options.id = "id"; } } // options.tooltip = options.tooltip || [ // options.id, // options.x, // options.y, // options.color, // options.size // ].filter(d => !!isNaN(d)); if (!options.tooltip) { options.tooltip = [options.id, options.x, options.y]; if (options.color) options.tooltip.push(options.color); if (options.size && typeof options.size === "string") options.tooltip.push(options.size); } const vegaView = options.vegaSpecWrapper(getVegaView(dataToPlot, options)); let brushed = dataToPlot; let clicked = []; //stores data for double click let previousClickedIds = []; // *** Get Vega *** const vegaReactiveChart = await (options.interactive ? vegaSelected(vegaView.toSpec(), { renderer: "canvas" }) : vegaView.render()); const target = html`${vegaReactiveChart}`; // console.log("🗺️ new Brushablescatterplot", options.interactive, vegaReactiveChart, options); function setValue(brushed, clicked) { target.value = { brushed, clicked }; // No need to disptach the input event as the one from the inner widget will bubble out // target.dispatchEvent(new CustomEvent("input", { bubbles: true })); } // Added a single event listener to handle interactions, simplifying the logic by adding both drag and click handling here vegaReactiveChart.addEventListener("input", (evt) => { // console.log("🔢 Brushable scatterplot input", evt); evt.stopPropagation(); //Drag interaction: Filters the data points within the drag selection region if (vegaReactiveChart.value.drag) { brushed = vegaReactiveChart.value.drag ? dataToPlot.filter( (d) => d.x >= vegaReactiveChart.value.drag.x[0] && d.x <= vegaReactiveChart.value.drag.x[1] && d.y >= vegaReactiveChart.value.drag.y[0] && d.y <= vegaReactiveChart.value.drag.y[1] ) : dataToPlot; } // Double-click interaction: Handles clicks on the chart to open a URL if the item was already clicked if (vegaReactiveChart.value.click) { const newlyClicked = dataToPlot.filter((d) => vegaReactiveChart.value.click?.id.includes(d.id) ); const newlyClickedIds = newlyClicked.map((d) => d.id); // Checks if the clicked item was already selected (double-click logic) const wasAlreadySelected = newlyClickedIds.some((id) => previousClickedIds.includes(id) ); if (wasAlreadySelected) { const paper = dataToPlot.find((d) => d.id === newlyClickedIds[0]); // Opens the URL of the double-clicked item in a new tab or window if (paper?.url) window.open(paper.url, "_blank"); } // Updates clicked and brushed states to reflect the new selection clicked = newlyClicked; previousClickedIds = newlyClickedIds; brushed = dataToPlot; // Clears brush on a click interaction } setValue(brushed, clicked); }); setValue(brushed, clicked); return target; }32:Te45,function getVegaView(dataToPlot, options) { let { interactive, colorScheme, color, shape, x, y, size, id, tooltip, colorDomain, title, shapeDomain } = options; let colorField = vl.color(); if (dataToPlot.length && isNaN(dataToPlot[0][color])) { options.colorType = options.colorType || "nominal"; } else { options.colorType = options.colorType || "quantitative"; } colorScheme = colorScheme || (options.colorType === "quantitative" ? options.colorSchemeQuantitative : options.colorSchemeNominal); colorField = colorField .field(color) .type(options.colorType) .scale({ scheme: colorScheme }); let chart = vl .markPoint({ opacity: 0.6, filled: true, size: 100, // tooltip: true }) // Changed size to a default value of 100 for all points .encode(vl.x().fieldQ(x).axis(null), vl.y().fieldQ(y).axis(null)) .width(options.width) .height(options.height) .data(dataToPlot); if (color) chart = chart.encode(colorField); if (size) { if (typeof size === "number") { chart = chart.encode(vl.size().value(size)); } else { chart = chart.encode( vl.size().fieldQ(size).scale({ range: options.sizeRange }), vl.order().fieldQ(size) ); } } if (shape) { let shapeEncoding = vl.shape().fieldN(shape); if (shapeDomain) { shapeEncoding = shapeEncoding.scale({ domain: shapeDomain }); } chart = chart.encode(shapeEncoding); } const events = "mouseover,pointerover,touchmove,touchend,click"; // Added touch events to improve mobile interactions if (interactive) { // console.log("vega interactive!", interactive); const hover = vl .selectPoint("hover") // .nearest(true) .on(events) .clear("none") .init({ x: [], y: [] }); //added functionality on mobile devices enabling dragging interactions using mouse or touch events const drag = vl // Creates an interval selection named "drag" to allow users to interact with the chart by defining a rectangular selection .selectInterval("drag") // Configures the drag behavior to work with both mouse and mobile devices. // Listens for drag initiation via mousedown or touchstart, // drag movement via mousemove or touchmove, // and drag completion via mouseup or touchend events. .on( "[mousedown, window:mouseup] > window:mousemove!, [touchstart, window:touchend] > window:touchmove!" ) .translate( "[mousedown, window:mouseup] > window:mousemove!, [touchstart, window:touchend] > window:touchmove!" ); const click = vl .selectPoint("click") .fields([id]) // .nearest(true) .on("click, touchend") .init({ id: [] }); if (tooltip) { console.log("🤙🏼 getvegaView tooltip", tooltip, dataToPlot); chart = chart.encode(vl.tooltip(tooltip)); } chart = chart .encode( vl .stroke() // .condition({ param: "click", value: "black", empty: false }) .condition({ param: "hover", value: "grey", empty: false }) .value(null) // vl.size().if(vl.or(hover, drag), vl.value(80)).value(50) ) .params(click, hover, drag); if (color) { const colorCondition = options.colorOnHover ? vl.or(hover, drag) : drag; chart = chart.encode( vl.color().if(colorCondition, colorField).value("grey") ); } } console.log("chart", chart.toSpec()); return chart.title(title).width(options.width).height(options.height); }33:[{"id":"5ef5c2660ea942b5c6ec07266ce30d4f45b1ed5b36e40878fd53df0efa42c852e49293dab19dac384a58ec0864ec103cd464d5ff08506149b7ee95ebfc42a3c9","href":"https://static.observableusercontent.com/files/5ef5c2660ea942b5c6ec07266ce30d4f45b1ed5b36e40878fd53df0efa42c852e49293dab19dac384a58ec0864ec103cd464d5ff08506149b7ee95ebfc42a3c9","name":"dataToPlot.json","type":"application/json","lastModified":1721084525073.597,"size":10405622}] 2f:{"id":"cb912116cc3f5c34","slug":"brushable-scatterplot","title":"Brushable ScatterPlot (Reactive Widget)","thumbnail":"210d221cdf5564f64b408f28f31f16910feed2a136c01616c202e9d8152c1c84","access_level":"public","create_time":"$D2024-07-15T22:54:59.113Z","update_time":"$D2025-11-05T13:14:03.274Z","view_time":null,"first_public_time":"$D2024-07-17T22:09:58.933Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":"starter_2024"},"version":517,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null}],"members":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null,"role":"editor"},{"type":"team","id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":{"id":"4fff0797efc0b59f","slug":"visualization-widgets","title":"Reactive Widgets and Inputs","owner":{"id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez"}},"type":"notebook","body":{"title":"Brushable ScatterPlot (Reactive Widget)","cells":[{"id":0,"value":"# Brushable ScatterPlot (Reactive Widget)\n\nA reactive widget for an interactive scatterplot for dimensionality reduction using vega\nlite. Features: \n\n* Brushing. \n* Nearest hover\n* Nearest click\n* Auto zoom to fit the x,y domain\n* Color by selected.\n* Quant vs Categorical color scales\n* Mobile interaction\n\nReturns a reactive widget that easily lets you get the selected document. Triggers the input event on interactions.\n\n## Usage\n\n```js\nimport { BrushableScatterPlot } from \"@john-guerra/brushable-scatterplot\";\n\nviewof selected = BrushableScatterPlot(dataToPlot, {\n color: \"score\",\n x: \"x\",\n y: \"y\",\n size: \"score\",\n id: \"id\", \n})\n\nselected.clicked;\nselected.brushed;\n```\n\nwhere dataToPlot is a tidy array of objects containing an id, and x,y positions\n\n\n\nThanks Moritz Kohlenz and Edison Chen for help with Mobile support\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"viewof interactive = Inputs.toggle({\n // label: htl.html`Make chart interactive.
Disable to speed up animation`,\n label: \"Interactive chart\",\n value: true,\n width: 600\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"viewof colorScheme = Inputs.select(\n [\n \"brownbluegreen\",\n \"blueorange\",\n \"blues\", \n \"purples\",\n \"redyellowblue\", \n \"spectral\",\n \"turbo\",\n \"cividis\",\n \"rainbow\",\n \"category20\",\n \"category10\",\n \"tableau20\",\n \n ],\n { label: \"Color scheme\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"viewof colorBy = Inputs.select(\n // attrs,\n [\n \"id\",\n \"typeId\",\n // \"title\",\n // \"addons\",\n // \"recognitionIds\",\n // \"isBreak\",\n // \"importedId\",\n // \"source\",\n // \"trackId\",\n // \"tags\",\n // \"keywords\",\n // \"sessionIds\",\n // \"eventIds\",\n // \"abstract\",\n // \"authors\",\n // \"sessions\",\n \"firstSessionName\",\n \"firstSessionNameWord\",\n \"track\",\n // \"authorNames\",\n // \"url\",\n \"score\"\n ],\n { label: \"Color by\", value: \"score\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"viewof drSelection = BrushableScatterPlot(dataToPlot, {\n color: colorBy,\n size: colorBy,\n interactive,\n colorOnHover: true,\n tooltip: [\n \"title\",\n \"award\",\n \"score\",\n \"track\",\n \"firstSessionName\",\n \"authorNames\",\n \"abstract\"\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":486,"value":"dataToPlot","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":108,"value":"papersHighlighted = drSelection.brushed;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"paperClicked = drSelection.clicked;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":243,"value":"Array.from({ length: 100 }).map(() => ({\n x: Math.random(),\n y: Math.random()\n }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":232,"value":"BrushableScatterPlot(\n Array.from({ length: 100 }).map(() => ({\n x: Math.random(),\n y: Math.random(),\n type: [\"a\", \"b\", \"c\"][Math.floor(Math.random() * 3)]\n })),\n {\n shape: \"type\",\n shapeDomain: [\"c\", \"b\", \"a\"],\n size: 100,\n vegaSpecWrapper: (spec) => {\n const hello = vl\n .markText()\n .encode(\n vl.text().fieldN(\"text\"),\n vl.x().fieldQ(\"x\"),\n vl.y().fieldQ(\"y\")\n )\n .data([{ text: \"Hello\", type: \"text\", x: 0, y: 0 }]);\n return vl.layer(spec, hello);\n }\n }\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":113,"value":"viewof maxPapers = Inputs.range([0, dataToPlot.length], {\n label: \"Papers to show\",\n step: 1,\n value: 20\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"selectedPapers = htl.html` \n

CHI 2024 artifacts selected

\n ${\n paperClicked.length\n ? htl.html`Clicked:${paperClicked.map(renderItem)}`\n : \"\"\n }\n

\n \n ${papersHighlighted\n .sort((a, b) => b.score - a.score)\n .slice(0, maxPapers)\n .map(renderItem)}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":111,"value":"function renderItem(p) {\n return htl.html`\n

\n ${p.title} \n

Similarity score: ${(p.score * 100).toFixed(2)}% ${\n p.awards ? p.awards : \"\"\n }

${p.authorsExpanded\n .map((a) => `${a.firstName} ${a.lastName}`)\n .join(\", \")}

${p.track} - ${p.firstSessionName}

${\n p.abstract\n }

\n`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"dataToPlot = FileAttachment(\"dataToPlot.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"import {vegaSelected} from \"@john-guerra/vega-selected\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":257,"value":"// import { vl } from \"@john-guerra/vega-lite-api-v5\"\nimport { vl } from \"@john-guerra/vega-lite-api-v6\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"