2b:null 2c:["$","title",null,{"children":"LyrAIcs - UMAP | Alejandro Benito-Santos | Observable"}] 31:T1920,scatterGLContainer = { const parentElement = DOM.element("div"); parentElement.id = "parent-container"; const leftElement = DOM.element("div"); leftElement.id = "left-element"; parentElement.appendChild(leftElement); const messageElement = DOM.element("div"); messageElement.className = "info-container"; messageElement.style.height = "100px"; messageElement.style.width = "300px"; messageElement.style.position = "absolute"; messageElement.style.top = "20px"; messageElement.innerHTML = ""; leftElement.appendChild(messageElement); const selectionElement = DOM.element("div"); selectionElement.className = "info-container"; selectionElement.style.height = "18px"; selectionElement.style.width = "300px"; selectionElement.style.position = "absolute"; selectionElement.innerHTML = "0 elements selected"; leftElement.appendChild(selectionElement); const containerElement = DOM.element("div"); containerElement.id = "scatter-container"; containerElement.style.position = "relative"; containerElement.style.height = `${height}px`; parentElement.appendChild(containerElement); const bottomElement = DOM.element("div"); bottomElement.id = "bottom-element"; bottomElement.style.height = "340px"; parentElement.appendChild(bottomElement); yield parentElement; let lastSelectedPoints = []; const basePointColorer = (colorData) => (i, selectedIndices, hoverIndex) => { if (selectedIndices.size === 0) { return colorData[i]; } else { if (selectedIndices.has(i)) { return colorData[i]; } else { return "rgba(120, 120, 120, 0.7)"; } } }; let hoverPointColorer = (colorData, siblingIndices) => (i, selectedIndices, hoverIndex) => { if ( i == hoverIndex || siblingIndices.includes(i) // selectedIndices.size === 0 ) { return colorData[i]; } else return "rgba(0, 0, 0, 0.0)"; }; const scatterGL = new ScatterGL(containerElement, { onHover: function (pointIndex) { if (pointIndex) { const dataPoint = data.at(pointIndex); const siblingsIndices = data .map((p, i) => p.title == dataPoint.title && i != pointIndex ? i : undefined ) .filter((x) => x); const threePoints = [ dataPoint, data.at(siblingsIndices[0]), data.at(siblingsIndices[1]) ]; let lyricsLength = -1; let stanzasLength = -1; let sentencesLength = -1; for (let point of threePoints) { if (point.meta_granularity == "lyrics") { lyricsLength = point["length"]; } else if (point.meta_granularity == "stanzas") { stanzasLength = point["length"]; } else { sentencesLength = point["length"]; } } // Set the custom colorer according to the point being hovered this.setPointColorer(hoverPointColorer(colors, siblingsIndices)); const threeIndices = [...siblingsIndices, pointIndex]; this.setSequences( this.baseLineData.filter((s) => { return s.indices.some((item) => threeIndices.includes(item)); }) ); messageElement.innerHTML = `

Granularity: ${dataPoint.meta_granularity}
` + `# Lyrics: ${lyricsLength}
` + `# Stanzas: ${stanzasLength}
` + `# Sentences: ${sentencesLength}
` + `Artist: ${dataPoint.artist}
` + `Song Title: ${dataPoint.title}

`; } else { this.setPointColorer(scatterGL.basePointColorer); this.setSequences(this.baseLineData); messageElement.innerHTML = ""; } }, onClick: (point) => { // mutable point = Object.assign(mutable point, { click: point }); while (bottomElement.firstChild) { bottomElement.removeChild(bottomElement.lastChild); } }, onSelect: (points) => { updateTable(points); while (bottomElement.firstChild) { bottomElement.removeChild(bottomElement.lastChild); } let message = ""; if (points.length === 0 && lastSelectedPoints.length === 0) { message = "no selection"; } else if (points.length === 0 && lastSelectedPoints.length > 0) { message = "deselected"; } else if (points.length === 1) { message = `selected ${points}`; } else { message = `selected ${points.length} points`; } selectionElement.innerHTML = message; let dataPoints = data.filter( (p, i) => points.indexOf(i) !== -1 && (p.meta_granularity == "sentences" || p.meta_granularity == "stanzas") ); const pointTitles = dataPoints.map((p) => p.title); dataPoints = dataPoints.concat( data.filter( (p) => pointTitles.indexOf(p.title) !== -1 && (p.meta_granularity == "sentences" || p.meta_granularity == "stanzas") ) ); vl.markBar() .data(dataPoints) .width(360) .height(260) .encode( vl.x().fieldQ("length"), vl.y().aggregate("count"), vl.column().fieldN("meta_granularity") ) .render() .then((chart) => { bottomElement.appendChild(chart); }); }, renderMode: "POINT", styles: { point: { scaleDefault: 1.2, scaleSelected: 1.2 } } }); function update(dataset) { scatterGL.render(dataset); if (scatterGL.isOrbiting()) { scatterGL.stopOrbitAnimation(); } } function setColor(colorData) { scatterGL.basePointColorer = basePointColorer(colorData); scatterGL.setPointColorer(scatterGL.basePointColorer); } function setLines(lineData) { scatterGL.baseLineData = lineData; scatterGL.setSequences(scatterGL.baseLineData); } function setInteractionMode(pan) { pan ? scatterGL.setPanMode() : scatterGL.setSelectMode(); } yield Object.assign(parentElement, { update, setColor, setLines, setInteractionMode }); }32:[{"id":"fd7f8e7d24d66fa3e2434c11971f661827b3dfad2486c246be2bb6bb804dddf18f26310d3ca6ac1f9419379cddcfbb7f9534d7a81f796bbe8a30dc861f94aaef","href":"https://static.observableusercontent.com/files/fd7f8e7d24d66fa3e2434c11971f661827b3dfad2486c246be2bb6bb804dddf18f26310d3ca6ac1f9419379cddcfbb7f9534d7a81f796bbe8a30dc861f94aaef","name":"all_models@12.csv","type":"text/csv","lastModified":1670420215086.748,"size":6285299}] 2f:{"id":"8cb3b46c9d6d951f","slug":null,"title":"LyrAIcs - UMAP","thumbnail":"c8b4388876b48bdab87ba9c4dd97a003f9a5f51d61f8fdf66fd96bcb726f3dcf","access_level":"public","create_time":"$D2022-11-04T10:35:00.811Z","update_time":"$D2022-12-12T14:37:14.782Z","view_time":null,"first_public_time":"$D2022-12-02T10:15:14.166Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"66257f7c1d7525fe","login":"alexbensan","name":"Alejandro Benito-Santos","avatar_url":"https://avatars-next.observableusercontent.com/b9bde40a4c4f6f53ee5a7c0bca8a5bc71ed92f6d58c1556eed4a2338c4e959e4","tier":"starter_2024"},"version":806,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"901c0c91b87a136d","login":"alexbensan","name":"Alejandro Benito-Santos","avatar_url":"https://avatars-next.observableusercontent.com/b9bde40a4c4f6f53ee5a7c0bca8a5bc71ed92f6d58c1556eed4a2338c4e959e4","tier":null}],"members":[{"type":"individual","id":"901c0c91b87a136d","login":"alexbensan","name":"Alejandro Benito-Santos","avatar_url":"https://avatars-next.observableusercontent.com/b9bde40a4c4f6f53ee5a7c0bca8a5bc71ed92f6d58c1556eed4a2338c4e959e4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"LyrAIcs - UMAP","cells":[{"id":0,"value":"# LyrAIcs - UMAP ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":130,"value":"Swatches(colorScale)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"viewof selectedModel = Inputs.select(modelNames, { label: \"Model name:\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"viewof selectedCompFunc = Inputs.select(compFuncNames, {\n label: \"Composition function:\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"viewof selectedLayer = Inputs.select(layerNames, { label: \"Layer\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"viewof pan = Inputs.toggle({ label: \"Pan/Select\", value: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"viewof is3d = Inputs.toggle({\n label: \"3D\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"updateTable([1, 2])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"updateTable = {\n return (indices) => {\n return sortedData.filter((d, i) => indices.indexOf(i) == -1);\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"height = 691.1999999999999","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"dataset = new ScatterGL.Dataset(fixed)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"{\n scatterGLContainer.update(dataset);\n scatterGLContainer.setColor(colors);\n scatterGLContainer.setLines(sequences);\n scatterGLContainer.setInteractionMode(pan);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"allModels = FileAttachment(\"all_models@12.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"stsbXlmRMultilingualSum07681 = await FileAttachment(\"all_models@12.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"stsbXlmRMultilingualSum07681","database":"$undefined"},{"id":256,"value":"modelNames = [...new Set(allModels.map((d) => d.meta_model))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"allModelsFilteredByModel = allModels.filter(\n (d) => d.meta_model == selectedModel\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"compFuncNames = [...new Set(allModelsFilteredByModel.map((d) => d.comp_func))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"allModelsFilteredByCompFunc = allModelsFilteredByModel.filter(\n (d) => d.comp_func == selectedCompFunc\n) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"layerNames = [...new Set(allModelsFilteredByCompFunc.map((d) => d.layer))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"data = allModelsFilteredByCompFunc.filter((d) => d.layer == selectedLayer)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"sortedData = data.sort((a, b) => b[\"meta_id-song\"] - a[\"meta_id-song\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"selectedIndices = {\n return [];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"// parsedData = data.map((d, i) => {\n// console.log(i);\n// d.vector = JSON.parse(d.vector);\n// d.umap_2d = JSON.parse(d.umap_2d.replace(/\\s/g, \"\"));\n// d.umap_3d = JSON.parse(d.umap_3d.replace(/\\s/g, \"\"));\n// return d;\n// })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"// vectors = data.map((d) => d.vector)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"// typeof vectors[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"fixed = sortedData.map((d) =>\n !is3d\n ? [parseFloat(d.feat_umap_2d_0), parseFloat(d.feat_umap_2d_1)]\n : [\n parseFloat(d.feat_umap_3d_0),\n parseFloat(d.feat_umap_3d_1),\n parseFloat(d.feat_umap_3d_2)\n ]\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"// metadata = sortedData.map((d) => ({ label: d[\"meta_id-song\"] }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"// fixed = new UMAP({\n// nComponents: !is3d ? 2 : 3,\n// minDist: 0.1,\n// nNeighbors: 10\n// }).fit(vectors)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"colorScale = d3.scaleOrdinal(\n [...new Set(sortedData.map((d) => d.meta_granularity))],\n [d3[\"schemeSet1\"][1], d3[\"schemeSet1\"][4], d3[\"schemeSet1\"][0]]\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"colors = sortedData.map((d) => d3.color(colorScale(d.meta_granularity)).formatRgb())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"indices = Array.from(Array(fixed.length).keys())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"//Create sequences for showing lines connecting the three\n//embeddings of a song(lyrics, stanzas, sentences).\n//First, group the 225 elements into 75 triplets.\nsequences = [...Array(Math.ceil(indices.length / 3))]\n .map((_, i) => indices.slice(i * 3, i * 3 + 3))\n .map((a) => ({ indices: a }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"## Styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":415,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"ScatterGL = {\n const { ScatterGL } = await require.alias({\n THREE: \"three@0.126/build/three.min.js\"\n })(\"scatter-gl@0.0.13\");\n return ScatterGL;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"import { Swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"embed = require(\"vega-embed\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"