2f:null 30:["$","title",null,{"children":"O*Net Career Constellations with THREE.js | Zach Pino | Observable"}] 35:T448,container = { const container = html`

`; container.appendChild(renderer.domElement); d3.select(container) .append("div") .style("position", "absolute") .style("z-index", 100) .attr("id", "tooltip") .text("") .style("padding", "5px") .style("pointer-events", "none") .style("color", "#181842") .style("background-color", "white") .style("font-family", "courier") .style("font-size", "12px") .style("display", "none"); let closest = d3 .select(container) .append("div") .style("width", width + "px") .style("position", "absolute") .style("top", "0px") .style("left", "10px") .style("z-index", 100) .attr("id", "closestPoints") .style("color", "white") .style("font-family", "courier") .style("font-size", "12px"); closest.append("p").text("Closest Careers"); closestPoints.forEach((cp, i) => closest .append("p") .style("position", "absolute") .style("top", 20 + i * 10 + "px") .text(i + 1 + ". " + cp.title) ); return container; }36:Tb27,shortestPath = { // Helper function to calculate Euclidean distance function euclideanDistance(point1, point2) { return Math.sqrt( Math.pow(point2[0] - point1[0], 2) + Math.pow(point2[1] - point1[1], 2) + Math.pow(point2[2] - point1[2], 2) ); } // Function to find k-nearest neighbors function findKNearestNeighbors(points, k) { const neighbors = []; for (let i = 0; i < points.length; i++) { const distances = points .map((point, j) => ({ index: j, distance: euclideanDistance(points[i], point) })) .filter((_, j) => j !== i); distances.sort((a, b) => a.distance - b.distance); neighbors[i] = distances.slice(0, k).map((d) => d.index); } return neighbors; } // Helper function to create the graph function buildGraph(points, k) { const graph = {}; // Initialize the graph points.forEach((_, index) => { graph[index] = {}; }); const neighbors = findKNearestNeighbors(points, k); // Add edges based on k-nearest neighbors for (let i = 0; i < neighbors.length; i++) { neighbors[i].forEach((j) => { const distance = euclideanDistance(points[i], points[j]); graph[i][j] = distance; graph[j][i] = distance; }); } return graph; } // Dijkstra's algorithm function dijkstra(graph, start, end) { const distances = {}; const visited = {}; const previous = {}; const queue = [start]; Object.keys(graph).forEach((node) => { distances[node] = Infinity; previous[node] = null; }); distances[start] = 0; while (queue.length > 0) { const current = queue.reduce((minNode, node) => distances[node] < distances[minNode] ? node : minNode ); if (current == end) { const path = []; let temp = current; while (temp !== null) { path.unshift(temp); temp = previous[temp]; } return path; } queue.splice(queue.indexOf(current), 1); visited[current] = true; Object.keys(graph[current]).forEach((neighbor) => { if (!visited[neighbor]) { const newDist = distances[current] + graph[current][neighbor]; if (newDist < distances[neighbor]) { distances[neighbor] = newDist; previous[neighbor] = current; queue.push(neighbor); } } }); } return []; } const startIdx = data.findIndex((t) => t.title == closestPoints[0].title); const endIdx = data.findIndex((t) => t.title == targetCareer); const k = 5; const graph = buildGraph(clamped, k); const shortestPath = dijkstra(graph, startIdx, endIdx); return shortestPath.map((d) => parseInt(d)); return shortestPath.map((d) => data[parseInt(d)].title); }37:T8af,tetraShortestPath = { // Helper function to calculate Euclidean distance function euclideanDistance(point1, point2) { return Math.sqrt( Math.pow(point2[0] - point1[0], 2) + Math.pow(point2[1] - point1[1], 2) + Math.pow(point2[2] - point1[2], 2) ); } // Helper function to create the graph function buildGraph(points, edges) { const graph = {}; // Initialize the graph points.forEach((_, index) => { graph[index] = {}; }); // Add edges with distances as weights edges.forEach(([start, end]) => { const distance = euclideanDistance(points[start], points[end]); graph[start][end] = distance; graph[end][start] = distance; // Assuming undirected graph }); return graph; } // Dijkstra's algorithm function dijkstra(graph, start, end) { const distances = {}; const visited = {}; const previous = {}; const queue = [start]; Object.keys(graph).forEach((node) => { distances[node] = Infinity; previous[node] = null; }); distances[start] = 0; while (queue.length > 0) { const current = queue.reduce((minNode, node) => distances[node] < distances[minNode] ? node : minNode ); if (current == end) { const path = []; let temp = current; while (temp !== null) { path.unshift(temp); temp = previous[temp]; } return path; } queue.splice(queue.indexOf(current), 1); visited[current] = true; Object.keys(graph[current]).forEach((neighbor) => { if (!visited[neighbor]) { const newDist = distances[current] + graph[current][neighbor]; if (newDist < distances[neighbor]) { distances[neighbor] = newDist; previous[neighbor] = current; queue.push(neighbor); } } }); } return []; } const startIdx = data.findIndex((t) => t.title == closestPoints[0].title); const endIdx = data.findIndex((t) => t.title == targetCareer); const graph = buildGraph(clamped, tetraEdges); const shortestPath = dijkstra(graph, startIdx, endIdx); return shortestPath.map((d) => parseInt(d)); }38:[{"id":"c48677062861e75f6606bd9a8d9e213abe10b1074d50cd71695e50be44d97c9442a93a9fa69c8bb2c22d6f56f54c7f49500c0445e20a5b9ce1277566a536b0af","href":"https://static.observableusercontent.com/files/c48677062861e75f6606bd9a8d9e213abe10b1074d50cd71695e50be44d97c9442a93a9fa69c8bb2c22d6f56f54c7f49500c0445e20a5b9ce1277566a536b0af","name":"allIDs.json","type":"application/json","lastModified":1719538474475.403,"size":6381},{"id":"54e971c81b32f9c6102185c56009a1ab6ae6483ad2ae8be9ca79089eb6ca5a3761542bfeda85fd3b1f9686639ca4e7a9dcb8bdfe4cb8f1c870dc64a48f5be6d0","href":"https://static.observableusercontent.com/files/54e971c81b32f9c6102185c56009a1ab6ae6483ad2ae8be9ca79089eb6ca5a3761542bfeda85fd3b1f9686639ca4e7a9dcb8bdfe4cb8f1c870dc64a48f5be6d0","name":"apiData@1.json","type":"application/json","lastModified":1719538430294.762,"size":3901901}] 33:{"id":"00f9478f344a9b19","slug":"o-net-embedding-career-constellation-three-js","title":"O*Net Career Constellations with THREE.js","thumbnail":"9585357b91083830394cfde7660640663e47bec9030d655462c90b70963fb103","access_level":"public","create_time":"$D2024-06-27T23:29:38.632Z","update_time":"$D2024-07-09T15:25:22.364Z","view_time":null,"first_public_time":"$D2024-07-01T17:40:26.522Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e13322fbaa35cc24","login":"zachpino","name":"Zach Pino","avatar_url":"https://avatars-next.observableusercontent.com/f70bf2a8b5c385b3d78c000b2635e8f37388d805fbc2986968496928347bc0e1","tier":"starter_2024"},"version":1737,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"90c59c5f3ef39e0a","login":"zachpino","name":"Zach Pino","avatar_url":"https://avatars-next.observableusercontent.com/f70bf2a8b5c385b3d78c000b2635e8f37388d805fbc2986968496928347bc0e1","tier":null}],"members":[{"type":"individual","id":"90c59c5f3ef39e0a","login":"zachpino","name":"Zach Pino","avatar_url":"https://avatars-next.observableusercontent.com/f70bf2a8b5c385b3d78c000b2635e8f37388d805fbc2986968496928347bc0e1","tier":null,"role":"editor"},{"type":"team","id":"e13322fbaa35cc24","login":"zachpino","name":"Zach Pino","avatar_url":"https://avatars-next.observableusercontent.com/f70bf2a8b5c385b3d78c000b2635e8f37388d805fbc2986968496928347bc0e1","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"bb2dff7e753e4004","slug":"northstar","title":"NorthStar","owner":{"id":"e13322fbaa35cc24","login":"zachpino","name":"Zach Pino"}},"type":"notebook","body":{"title":"O*Net Career Constellations with THREE.js","cells":[{"id":0,"value":"# O*Net Career Constellations with THREE.js\n\nThis page collects data from the [O*Net Career Database](https://www.onetonline.org), and uses the [UMAP dimensionality reduction algorithm](https://en.wikipedia.org/wiki/Nonlinear_dimensionality_reduction) to reduce 105 unique career characteristics into 3 dimensions for career similarity and trajectory visualization. \n\nThe visualization takes a moment to load, please be patient while the 3D embeddings are calculated.\n\nScroll to the bottom of the page for the many libraries and resources used.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1190,"value":"-----\n### Self-Evaluation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1369,"value":"viewof preloadCareer = Inputs.select(\n data.map((d) => d.title),\n {\n label: \"Preload Career\",\n value: \"Art, Drama, & Music Teachers, Postsecondary\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1173,"value":"viewof skillCount = Inputs.range([0, 100], {\n label: \"How many skills do you want to declare?\",\n step: 1,\n value: data.find((d) => d.title == preloadCareer).IDs.length\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1193,"value":"*What are your top ${skillCount} characteristics?*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1146,"value":"viewof characteristics = {\n let preloaded = data.find((d) => d.title == preloadCareer);\n\n return Inputs.form(\n d3.range(skillCount).map((d, i) =>\n Inputs.select(sortedLut, {\n value: preloaded.IDs[i]\n })\n )\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1221,"value":"*How would you score your top characteristics?*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1185,"value":"viewof characteristicConfidences = Inputs.form(\n d3\n .range(skillCount)\n .map((d) =>\n Inputs.range([0, 1], {\n value: 1,\n step: 0.01,\n label: characteristics[d]\n })\n )\n .reduce((a, v, i) => {\n a[characteristics[i]] = v;\n return a;\n }, {})\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1268,"value":"-----\n### Visualization Options\n\n*Would you like to see any visualization supports?*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1274,"value":"viewof displayClusters = Inputs.toggle({ value: true, label: \"Draw clusters?\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1037,"value":"viewof clusterCount = Inputs.range([0, 10], {\n label: \"Cluster Count\",\n value: 5,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1283,"value":"viewof displayClosest = Inputs.toggle({\n value: true,\n label: \"Draw lines to closest careers?\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1291,"value":"viewof closestCount = Inputs.range([0, 10], {\n label: \"Closest Career Count\",\n value: 5,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1515,"value":"viewof displayPath = Inputs.toggle({\n value: true,\n label: \"Draw shortest path to target career?\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1526,"value":"viewof targetCareer = Inputs.select(\n data.map((d) => d.title),\n {\n label: \"Target Career\",\n value: data[Math.floor(Math.random() * data.length)].title\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1392,"value":"---\n### Career Constellation Visualization\n- Each sphere is a career, mouse over it to view its name.\n- The cube is the student characterized by the sliders above.\n- The white sphere is the preloaded career.\n- If enabled, the translucent polyhedra are K-Means clustered careers, with each polyhedron containing a natural grouping of careers.\n- If enabled, the white tubes connect the student to the nearest careers based on the self-evaluation above. These are enumerated in the top left of the visualization.\n- If enabled, the cyan polyline is the shortest path from the student to the target career given [5 nearest neighbor connectivity](https://en.wikipedia.org/wiki/K-nearest_neighbors_algorithm). The magenta polyline is the same but uses [Delaunay tetrahedralization](https://en.wikipedia.org/wiki/Delaunay_triangulation). See below for the steps enumerated as well as the characteristics required of each career along the KNN path.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":867,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1537,"value":"md`\n\n${shortestPath\n .map(\n (d, i) =>\n i +\n 1 +\n \". \" +\n data[d].title +\n \"\\n\" +\n data[d].IDs.map((e) => \"\\t - \" + e).join(\"\\n\")\n )\n .join(\"\\n\")}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1201,"value":"----\n### Data Loading","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"data = (await FileAttachment(\"apiData@1.json\").json()).map((d) => {\n delete d.embeddings;\n return d;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1359,"value":"sortedLut = lut.slice().sort()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"lut = await FileAttachment(\"allIDs.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1153,"value":"studentData = lut.map((l) =>\n characteristicConfidences[l] ? characteristicConfidences[l] : 0\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"---\n### Data Processing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"viewof nNeighbors = Inputs.range([3, 30], {\n step: 1,\n value: 15,\n label: \"Number of nearest neighbors to consider\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"viewof minDist = Inputs.range([0, 1], {\n step: 0.01,\n value: 0.15,\n label: \"Minimum distance between nodes \"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"umap = await new UMAP({\n nComponents: parseInt(3),\n minDist: minDist,\n nNeighbors: nNeighbors,\n random: rng\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"embeddings = await umap.fitAsync(data.map((d) => d.booleanArrays))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"student = {\n await clamped;\n return await umap.transform([studentData])[0];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"xX = d3.scaleLinear().domain(d3.extent(embeddings.map((e) => e[0]).flat()))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"xCentroid = xX.domain()[1] - xX.domain()[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"yX = d3.scaleLinear().domain(d3.extent(embeddings.map((e) => e[1]).flat()))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"yCentroid = yX.domain()[1] - yX.domain()[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"zX = d3.scaleLinear().domain(d3.extent(embeddings.map((e) => e[2]).flat()))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"zCentroid = zX.domain()[1] - zX.domain()[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"translated = embeddings.map((e) => [\n e[0] - xX.domain()[0] - xCentroid / 2,\n e[1] - yX.domain()[0] - yCentroid / 2,\n e[2] - zX.domain()[0] - zCentroid / 2\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"uX = d3.extent(translated.flat())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"uScale = d3.scaleLinear().domain(uX)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"clamped = translated.map((d) => [uScale(d[0]), uScale(d[1]), uScale(d[2])])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"studentClamped = [\n uScale(student[0] - xX.domain()[0] - xCentroid / 2),\n uScale(student[1] - yX.domain()[0] - yCentroid / 2),\n uScale(student[2] - zX.domain()[0] - zCentroid / 2)\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1056,"value":"closestPoints = {\n let distances = clamped.map((pt) => {\n let x = pt[0] - studentClamped[0];\n let y = pt[1] - studentClamped[1];\n let z = pt[2] - studentClamped[2];\n\n return Math.sqrt(x * x + y * y + z * z);\n });\n\n const distanced = data.map((e, i) => ({\n ...e,\n distance: distances[i],\n index: i,\n point: clamped[i]\n }));\n\n distanced.sort((a, b) => d3.ascending(a.distance, b.distance));\n\n return distanced.slice(0, closestCount);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"---\n### 3D Visualization\nVia [THREE.js](https://threejs.org)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1506,"value":"path = {\n const material = new THREE.LineBasicMaterial({\n color: 0x00ffff\n });\n\n const points = shortestPath.map(\n (ptx) =>\n new THREE.Vector3(\n clamped[ptx][0] - 0.5,\n clamped[ptx][1] - 0.5,\n clamped[ptx][2] - 0.5\n )\n );\n\n const geometry = new THREE.BufferGeometry().setFromPoints(points);\n\n return new THREE.Line(geometry, material);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1627,"value":"tetras = {\n const material = new THREE.LineBasicMaterial({\n color: 0x00ff00\n });\n\n return tetrahedra.map((verts) => {\n let vs = verts.map(\n (ptx) =>\n new THREE.Vector3(\n clamped[ptx][0] - 0.5,\n clamped[ptx][1] - 0.5,\n clamped[ptx][2] - 0.5\n )\n );\n\n let points = [vs[0], vs[1], vs[2], vs[0], vs[3], vs[1], vs[2], vs[3]];\n\n const geometry = new THREE.BufferGeometry().setFromPoints(points);\n\n return new THREE.Line(geometry, material);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1677,"value":"tetraPath = {\n const material = new THREE.LineBasicMaterial({\n color: 0xff00ff\n });\n\n const points = tetraShortestPath.map(\n (ptx) =>\n new THREE.Vector3(\n clamped[ptx][0] - 0.5,\n clamped[ptx][1] - 0.5,\n clamped[ptx][2] - 0.5\n )\n );\n\n const geometry = new THREE.BufferGeometry().setFromPoints(points);\n\n return new THREE.Line(geometry, material);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1089,"value":"lines = {\n return closestPoints.map((pt) => {\n let start = new THREE.Vector3(\n studentClamped[0] - 0.5,\n studentClamped[1] - 0.5,\n studentClamped[2] - 0.5\n );\n\n let end = new THREE.Vector3(\n pt.point[0] - 0.5,\n pt.point[1] - 0.5,\n pt.point[2] - 0.5\n );\n\n const line = new THREE.LineCurve3(start, end);\n\n const geometry = new THREE.TubeGeometry(line, 10, 0.001, 5, false);\n const material = new THREE.MeshBasicMaterial({ color: 0xffffff });\n return new THREE.Mesh(geometry, material);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":991,"value":"hulls = clusters.map((c, i) => {\n const points = c.points.map(\n (p) => new THREE.Vector3(p[0] - 0.5, p[1] - 0.5, p[2] - 0.5)\n );\n\n const geom = new THREE.ConvexGeometry(points);\n\n const material = new THREE.MeshStandardMaterial({\n color: d3.color(d3.interpolateViridis((i + 1) / clusterCount)).formatHex(),\n transparent: true,\n opacity: 0.15\n });\n\n const mesh = new THREE.Mesh(geom, material);\n return mesh;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1422,"value":"preloadedPoint = {\n let index = data.findIndex((d) => d.title == preloadCareer);\n const geometry = new THREE.IcosahedronGeometry(0.008, 3);\n\n const material = new THREE.MeshStandardMaterial({ color: 0xffffff });\n\n const mesh = new THREE.Mesh(geometry, material);\n\n mesh.position.set(\n clamped[index][0] - 0.5,\n clamped[index][1] - 0.5,\n clamped[index][2] - 0.5\n );\n\n material.needsUpdate = true;\n\n return mesh;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"points = {\n const geometry = new THREE.IcosahedronGeometry(0.005, 3);\n\n const material = new THREE.MeshBasicMaterial({ color: 0xffffff });\n\n const mesh = new THREE.InstancedMesh(geometry, material, embeddings.length);\n\n mesh.setColorAt(0, new THREE.Color()); // add this line\n const matrix = new THREE.Matrix4();\n\n clamped.forEach((d, i) => {\n matrix.setPosition(d[0] - 0.5, d[1] - 0.5, d[2] - 0.5);\n\n const color = new THREE.Color().setRGB(d[0], d[1], d[2]);\n\n mesh.setMatrixAt(i, matrix);\n mesh.setColorAt(i, color);\n });\n\n material.needsUpdate = true;\n mesh.needsUpdate = true;\n\n return mesh;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"cube = {\n const material = new THREE.MeshNormalMaterial();\n const geometry = new THREE.BoxGeometry(1, 1, 1);\n const cube = new THREE.Mesh(geometry, material);\n cube.position.set(\n studentClamped[0] - 0.5,\n studentClamped[1] - 0.5,\n studentClamped[2] - 0.5\n );\n cube.scale.set(0.02, 0.02, 0.02);\n\n return cube;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1023,"value":"light = new THREE.HemisphereLight(0xffffff, 0xffffff, 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"axesHelper = new THREE.AxesHelper(0.5).setColors(0xff0000, 0x00ff00, 0x0000ff)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x181842);\n scene.add(preloadedPoint);\n scene.add(points);\n scene.add(axesHelper);\n scene.add(cube);\n scene.add(light);\n\n if (displayClusters) hulls.map((d) => scene.add(d));\n\n if (displayClosest) lines.map((d) => scene.add(d));\n\n if (displayPath) scene.add(path);\n\n if (false) tetras.map((d) => scene.add(d));\n\n if (true) scene.add(tetraPath);\n\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"camera = {\n const fov = 45;\n const aspect = 1;\n const near = 0.01;\n const far = 1000;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n camera.position.set(1, 1, 1);\n camera.lookAt(new THREE.Vector3(0, 0, 0));\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"renderer = {\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(width, width);\n renderer.setPixelRatio(devicePixelRatio);\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n controls.addEventListener(\"change\", () => renderer.render(scene, camera));\n invalidation.then(() => (controls.dispose(), renderer.dispose()));\n\n renderer.domElement.onmousemove = (event) => {\n event.preventDefault();\n mouse.x = (event.layerX / width) * 2 - 1;\n mouse.y = -(event.layerY / width) * 2 + 1;\n };\n\n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"mouse = new THREE.Vector2()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":862,"value":"raycaster = new THREE.Raycaster()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"function raycast() {\n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObjects(scene.children);\n\n try {\n let pointIntersects = intersects.filter((d) =>\n d.hasOwnProperty(\"instanceId\")\n );\n\n if (pointIntersects.length > 0) {\n //console.log(pointIntersects);\n //console.log(data[pointIntersects[0].instanceId].title);\n d3.select(container)\n .select(\"#tooltip\")\n .text(data[pointIntersects[0].instanceId].title)\n .style(\"top\", width - (mouse.y / 2 + 0.5) * width - 7 + \"px\")\n .style(\"left\", (mouse.x / 2 + 0.5) * width + 15 + \"px\")\n .style(\"display\", \"block\");\n } else {\n d3.select(container).select(\"#tooltip\").text(\"\").style(\"display\", \"none\");\n }\n } catch {}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"// Continuously updates\n{\n while (true) {\n \n // points.rotation.y += 0.001;\n raycast();\n renderer.render(scene, camera);\n\n yield \"raycasting\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":961,"value":"---\n### K-Means Clustering\nVia [Clusters](https://www.npmjs.com/package/clusters).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":751,"value":"viewof seed = Inputs.text({\n label: \"Random Number Generator Seed\",\n value: \"Seed\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":965,"value":"clusters = {\n //number of clusters, defaults to undefined\n cluster.k(clusterCount);\n\n cluster.iterations(1000);\n\n cluster.data(clamped);\n\n return cluster\n .clusters()\n .sort((a, b) => d3.descending(a.centroid[2], b.centroid[2]));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1503,"value":"----\n### Shortest Path via KNN and Djikstra","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1447,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1585,"value":"-----\n### Delaunay Tetrahedralization\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1587,"value":"tetrahedra = {\n let tetrahedrons = del.triangulate(clamped);\n\n return tetrahedrons.reduce((all, one, i) => {\n const ch = Math.floor(i / 4);\n all[ch] = [].concat(all[ch] || [], one);\n return all;\n }, []);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1648,"value":"tetraEdges = {\n return tetrahedra\n .map((verts) => {\n // let vs = verts.map((ptx) => [\n // clamped[ptx][0] - 0.5,\n // clamped[ptx][1] - 0.5,\n // clamped[ptx][2] - 0.5\n // ]);\n\n let points = [\n [verts[0], verts[1]],\n [verts[1], verts[2]],\n [verts[2], verts[0]],\n [verts[0], verts[3]],\n [verts[1], verts[3]],\n [verts[2], verts[3]]\n ];\n\n return points;\n })\n .flat(1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1654,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1590,"value":"del = import(\"https://cdn.skypack.dev/delaunay@0.4.0?min\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"---\n### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":957,"value":"cluster = (await import(\"https://cdn.skypack.dev/clusters@0.0.4?min\")).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"UMAP = (await require(\"umap-js@1.4.0/lib/umap-js.min.js\")).UMAP","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"THREE = {\n const THREE = (window.THREE =\n await require(\"three@0.130.0/build/three.min.js\"));\n\n await require(\"three@0.130.0/examples/js/controls/OrbitControls.js\").catch(\n () => {}\n );\n await require(\"three@0.130.0/examples/js/geometries/ConvexGeometry.js\").catch(\n () => {}\n );\n await require(\"three@0.130.0/examples/js/math/ConvexHull.js\").catch(() => {});\n\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"rng = new sr(seed)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"sr = require(\"seedrandom@3.0.5/seedrandom.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1296,"value":"---\n### To Do\n\n- Click to highlight career\n- Characteristics shown for mouseover, clicked, closest, etc\n- Select career to highlight\n- Window resize fix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 34:"$33:body"