31:Tef2,{ const radarData = radarCareers .map((d) => data.find((e) => d == e.title)) .concat([ { title: "Self-Evaluation", labels: riasec, values: Object.values(studentData) } ]); const width = 800; const margin = 75; const bottomPad = (radarCount + 1) * 20; const radiusScale = d3 .scaleLinear() .domain([1, 7]) .range([0, width / 2 - margin]); const angleScale = d3 .scaleLinear() .domain([0, 6]) .range([Math.PI * 1.5, 3.5 * Math.PI]); const line = d3 .line() .x((d, i) => Math.cos(angleScale(i)) * radiusScale(d) + width / 2) .y((d, i) => Math.sin(angleScale(i)) * radiusScale(d) + width / 2) .curve(d3.curveLinearClosed); const svg = d3 .create("svg") .attr("width", width) .attr("height", width + bottomPad) .attr("font-family", "Courier"); const tickData = d3 .range(5) .map((d) => d3.range(6).map((e) => (7 * d) / 4)) .slice(1); svg .append("rect") .attr("width", width) .attr("height", width + bottomPad) .attr("fill", "#181842"); svg .append("g") .selectAll(".ticks") .data(tickData) .join("path") .attr("d", (d, i) => line(d, i)) .attr("stroke", "white") .attr("fill", "none") .attr("stroke-width", 1) .attr("stroke-dasharray", "1 4"); svg .append("g") .selectAll(".majorTick") .data([[7, 7, 7, 7, 7, 7]]) .join("path") .attr("d", (d, i) => line(d, i)) .attr("stroke", "white") .attr("stroke-width", 3) .attr("fill", "none"); svg .append("g") .selectAll(".labels") .data(radarData[0].labels) .join("text") .attr("x", (d, i) => Math.cos(angleScale(i)) * radiusScale(7.5) + width / 2) .attr("y", (d, i) => Math.sin(angleScale(i)) * radiusScale(7.5) + width / 2) .attr("fill", "white") .text((d) => d.slice(0, 1)) .attr("text-anchor", "middle") .attr("dominant-baseline", "central"); radarData.forEach((rD, i) => { svg .append("g") .selectAll(".radars") .data([rD.values]) .join("path") .attr("d", (d, i) => line(d, i)) .attr("stroke", (d) => d3.interpolateSpectral(i / radarCount)) .attr("stroke-width", 4) .attr("fill", (d) => d3.interpolateSpectral(i / radarCount)) .attr("fill-opacity", 0.2) .attr("stroke-linejoin", "miter") .attr("stroke-miterlimit", "1"); svg .append("g") .selectAll(".dots") .data(rD.values) .join("circle") .attr( "cx", (d, i) => Math.cos(angleScale(i)) * radiusScale(d) + width / 2 ) .attr( "cy", (d, i) => Math.sin(angleScale(i)) * radiusScale(d) + width / 2 ) .attr("r", 5) .attr("fill", d3.interpolateSpectral(i / radarCount)); }); svg .append("g") .selectAll(".radars") .data(radarData) .join("circle") .attr("cx", 20) .attr("cy", (d, i) => width + i * 20) .attr("r", 7.5) .attr("fill", (d, i) => d3.interpolateSpectral(i / radarCount)); svg .append("g") .selectAll(".keys") .data(radarData) .join("text") .attr("y", (d, i) => width + i * 20) .attr("x", 40) .attr("fill", (d) => "white") .attr("font-size", 12) .attr("dominant-baseline", "central") .text((d) => d.title.length > 45 ? d.title.slice(0, 45) + "..." : d.title ); svg .append("g") .selectAll(".keyValues") .data(radarData) .join("text") .attr("y", (d, i) => width + i * 20) .attr("x", width / 2) .attr("fill", (d) => "white") .attr("font-size", 12) .attr("dominant-baseline", "central") .text((d) => d3 .range(6) .map((e) => d.labels[e].slice(0, 1) + ":" + d.values[e].toFixed(2)) .join(" | ") ); return svg.node(); }32:T4ca,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"); d3.select(container) .append("div") .attr("id", "title") .style("pointer-events", "none") .style("width", width + "px") .style("position", "absolute") .style("top", "5px") .style("left", "10px") .style("z-index", 100) .style("color", "white") .style("font-family", "courier") .style("font-size", "14px"); d3.select(container) .append("div") .attr("id", "RIASEC") .style("pointer-events", "none") .style("width", width + "px") .style("position", "absolute") .style("top", "20px") .style("left", "10px") .style("z-index", 100) .style("color", "white") .style("font-family", "courier") .style("font-size", "12px"); return container; }33:Tdab,{ const svg = d3.create("svg").attr("width", width).attr("height", width); svg .append("rect") .attr("width", width) .attr("height", width) .attr("fill", "#181842") .style("cursor", "crosshair"); // Define the corner colors const topLeft = "#ff0000"; const topRight = "#ff00ff"; const bottomLeft = "#00ff00"; const bottomRight = "#00ffff"; // Yellow // Function to get the color for given x and y (both between 0 and 1) function getColor(x, y) { const leftInterpolator = d3.interpolateHsl(topLeft, bottomLeft); const rightInterpolator = d3.interpolateHsl(topRight, bottomRight); const topColor = d3.rgb(leftInterpolator(y)); const bottomColor = d3.rgb(rightInterpolator(y)); return d3.interpolateRgb(topColor, bottomColor)(x); } svg .selectAll(".lines") .data(closestPoints2D.slice(0, closestCount)) .join("line") .attr("x1", (d) => d.point[0]) .attr("y1", (d) => d.point[1]) .attr("x2", student2Dscaled[0]) .attr("y2", student2Dscaled[1]) .attr("stroke", "white") .attr("stroke-width", 2); svg .append("g") .selectAll(".points") .data(data) .join("circle") .attr("r", 4) .attr("cx", (d) => points2D[d.index][0]) .attr("cy", (d) => points2D[d.index][1]) .attr("fill", (d) => { return d3.rgb( getColor(points2D[d.index][0] / width, points2D[d.index][1] / width) ); }) .style("cursor", "crosshair") .on("mouseover", (e, d) => { const xOffset = points2D[d.index][0] > width / 2 ? -510 : 10; const yOffset = -25; d3.select(e.currentTarget) .raise() .attr("stroke", "white") .attr("stroke-width", 2); tooltip .attr("opacity", 1) .attr( "transform", "translate(" + (points2D[d.index][0] + xOffset) + "," + (points2D[d.index][1] + yOffset) + ")" ); ttText.text( d.title.length > 55 ? d.title.substring(0, 50).trim() + "..." : d.title ); ttSubtext.text( d.values.map((e, i) => d.labels[i][0] + ":" + e).join(" | ") ); ttDistance.text( "Match: " + ( 100 - (closestPoints2D.find((f) => f.title == d.title).distance / width) * 100 ).toFixed(2) + "%" ); }) .on("mouseout", (e, d) => { d3.select(e.currentTarget) .attr("stroke", "white") .attr("stroke-width", 0); tooltip.attr("opacity", 0); }); svg .append("rect") .attr("width", 10) .attr("height", 10) .attr("x", student2Dscaled[0] - 5) .attr("y", student2Dscaled[1] - 5) .attr("fill", "white") .style("transform-box", "fill-box") .style("transform-origin", "center") .style("transform", "rotate(45deg)"); const tooltip = svg .append("g") .attr("opacity", 0) .attr("pointer-events", "none") .attr("font-family", "courier"); tooltip .append("rect") .attr("width", 500) .attr("height", 50) .attr("fill", "white") .attr("opacity", 0.9); const ttText = tooltip .append("text") .attr("x", 5) .attr("y", 15) .attr("font-size", 14); const ttSubtext = tooltip .append("text") .attr("x", 5) .attr("y", 30) .attr("font-size", 10); const ttDistance = tooltip .append("text") .attr("x", 5) .attr("y", 42) .attr("font-size", 10); return svg.node(); }34:T4f3,function raycast() { raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObjects(scene.children); try { let pointIntersects = intersects.filter((d) => d.hasOwnProperty("instanceId") ); if (pointIntersects.length > 0) { //console.log(pointIntersects); //console.log(data[pointIntersects[0].instanceId].title); d3.select(container) .select("#tooltip") .text(data[pointIntersects[0].instanceId].title) .style("top", width - (mouse.y / 2 + 0.5) * width - 7 + "px") .style("left", (mouse.x / 2 + 0.5) * width + 15 + "px") .style("display", "block"); d3.select(container) .select("#title") .text(data[pointIntersects[0].instanceId].title); d3.select(container) .select("#RIASEC") .selectAll("p") .data(data[pointIntersects[0].instanceId].values) .join("p") .text( (e, i) => data[pointIntersects[0].instanceId].labels[i] + " : " + e ); } else { d3.select(container).select("#tooltip").text("").style("display", "none"); d3.select(container).select("#title").text(""); d3.select(container).select("#RIASEC").selectAll("p").text(""); } } catch {} }35:[{"id":"93948fbb5a6aaeb0ff273a6fbb88bb60006037778058f47a56288da22576e0d7cec3356b140203fe1591d4e455f41f95a2d83255edd775560573bce1531759de","href":"https://static.observableusercontent.com/files/93948fbb5a6aaeb0ff273a6fbb88bb60006037778058f47a56288da22576e0d7cec3356b140203fe1591d4e455f41f95a2d83255edd775560573bce1531759de","name":"Interests.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1720535188129.151,"size":302353}] 2f:{"title":"Holland Code/RIASEC/OIP Career Constellations","cells":[{"id":0,"value":"# Holland Code/RIASEC/OIP Career Constellations\n## with THREE.js, UMAP, and Clusters\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 the 6 career [Holland Codes](https://en.wikipedia.org/wiki/Holland_Codes) into 2 and 3 dimensions for visualizing career similarity and trajectory visualization. \n\nThe visualizations take a moment to load, please be patient while the 2D and 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"},{"id":180,"value":"---\n### Load Data\nUse the tables below to see how different careers are scored in O*NET. ","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"data = (await FileAttachment(\"Interests.xlsx\").xlsx())\n .sheet(\"Interests\", {\n headers: true\n })\n .reduce((all, one, i) => {\n const ch = Math.floor(i / 9);\n all[ch] = [].concat(all[ch] || [], one);\n return all;\n }, [])\n .map((d) =>\n d.reduce(\n (a, v, i) => {\n a.code = v[\"O*NET-SOC Code\"];\n a.title = v[\"Title\"];\n a[v[\"Element Name\"]] = v[\"Data Value\"];\n if (i < 6) {\n a.values.push(v[\"Data Value\"]);\n a.labels.push(v[\"Element Name\"]);\n }\n return a;\n },\n { values: [], labels: [] }\n )\n )\n .map((d, i) => ({ ...d, index: i }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"Inputs.table(\n structuredClone(data).map((d) => {\n delete d.code;\n delete d.values;\n delete d.labels;\n delete d.index;\n delete d[\"First Interest High-Point\"];\n delete d[\"Second Interest High-Point\"];\n delete d[\"Third Interest High-Point\"];\n return d;\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"And some summary statistics on the Holland Codes themselves...","pinned":false,"hidden":false,"mode":"md"},{"id":59,"value":"Inputs.table(\n d3\n .range(6)\n .map((d) => data.map((e) => e.values[d]))\n .map((d, i) => ({\n title: data[0].labels[i],\n\n min: d3.min(d),\n max: d3.max(d),\n mean: d3.mean(d),\n median: d3.median(d),\n mode: d3.mode(d)\n }))\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":796,"value":"---\n### Career Holland Code Radar Plots","pinned":false,"hidden":false,"mode":"md"},{"id":819,"value":"viewof radarCount = Inputs.range([0, 10], { value: 3, label: \"Radar Count\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":816,"value":"viewof radarCareers = Inputs.form(\n d3.range(radarCount).map((d) =>\n Inputs.select(\n data.map((d) => d.title),\n { value: data[Math.floor(Math.random() * data.length)].title }\n )\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":798,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"---\n### Self-Evaluation","pinned":false,"hidden":false,"mode":"md"},{"id":302,"value":"viewof studentData = Inputs.form(\n riasec.reduce((a, v) => {\n a[v] = Inputs.range([1, 7], { label: v, value: 3, step: 0.01 });\n return a;\n }, {})\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"*You may be an excellent future ${closestPoints.map((d,i)=> i < closestPoints.length - 1 ? d.title+ \"^{\" + (i+1) + \"}\" : \"or \" + d.title + \"^{\" + (i+1) + \"}\").join(', ')}.*","pinned":false,"hidden":false,"mode":"md"},{"id":238,"value":"---\n### 3D Constellation\n- Click and drag to orbit, and scroll to zoom.\n- Each sphere is a career, mouse over it to view its name and RIASEC values.\n- The cube is placed according to self-evaluation above.\n If enabled, the white lines connect the self-evaluation cube to its closest careers, enumerated below.\n- If enabled, the translucent polyhedra are K-Means clustered careers, with each polyhedron containing a natural grouping of careers.\n\n*If the mouse tracking feels misaligned, make sure you are viewing this page at 100% browser zoom level.*","pinned":false,"hidden":false,"mode":"md"},{"id":76,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"### Closest Careers \n

${d.title}

","pinned":false,"hidden":false,"mode":"md"},{"id":767,"value":"---\n### 2D Constellation\n- Each circle is a career, mouse over it to view its name, RIASEC values, and match to the self-evaluation above.\n- The diamond is placed according to self-evaluation score.\n- The white lines connect the self-evaluation diamond to its closest careers.\n","pinned":false,"hidden":false,"mode":"md"},{"id":528,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"---\n### Generate 2D and 3D Positions with UMAP","pinned":false,"hidden":false,"mode":"md"},{"id":37,"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"},{"id":39,"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"},{"id":45,"value":"viewof seed = Inputs.text({\n label: \"Random Number Generator Seed\",\n value: \"Seed\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"umap3D = await new UMAP({\n nComponents: 3,\n minDist: minDist,\n nNeighbors: nNeighbors,\n random: rng\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"embeddings = await umap3D.fitAsync(data.map((d) => d.values))","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"umap2D = await new UMAP({\n nComponents: 2,\n minDist: minDist,\n nNeighbors: nNeighbors,\n random: rng\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"embeddings2D = await umap2D.fitAsync(data.map((d) => d.values))","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"---\n### Place Self-Evaluation in Constellation","pinned":false,"hidden":false,"mode":"md"},{"id":295,"value":"riasec = [\n \"Realistic\",\n \"Investigative\",\n \"Artistic\",\n \"Social\",\n \"Enterprising\",\n \"Conventional\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"student = {\n await clamped;\n return await umap3D.transform([Object.values(studentData)])[0];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"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"},{"id":330,"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"},{"id":376,"value":"---\n### Closest Careers\n","pinned":false,"hidden":false,"mode":"md"},{"id":391,"value":"viewof displayLines = Inputs.toggle({\n value: true,\n label: \"Draw lines to closest careers?\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"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"},{"id":380,"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"},{"id":386,"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"},{"id":501,"value":"---\n### 2D Scale and Center Points","pinned":false,"hidden":false,"mode":"md"},{"id":552,"value":"margin = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"xScale = d3\n .scaleLinear()\n .domain(d3.extent(embeddings2D.map((d) => d[0])))\n .range([margin, width - margin])","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"yScale = d3\n .scaleLinear()\n .domain(d3.extent(embeddings2D.map((d) => d[1])))\n .range([margin, width - margin])","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"aspect = (d3.max(embeddings2D, (d) => d[0]) -\n d3.min(embeddings2D, (d) => d[0])) /\n (d3.max(embeddings2D, (d) => d[1]) - d3.min(embeddings2D, (d) => d[1]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"points2D = embeddings2D.map((d) => [xScale(d[0]), yScale(d[1]) / aspect])","pinned":false,"hidden":false,"mode":"ojs"},{"id":685,"value":"---\n### Place Self-Evaluation in 2D","pinned":false,"hidden":false,"mode":"md"},{"id":689,"value":"student2D = {\n await points2D;\n return await umap2D.transform([Object.values(studentData)])[0];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":692,"value":"student2Dscaled = [xScale(student2D[0]), yScale(student2D[1]) / aspect]","pinned":false,"hidden":false,"mode":"ojs"},{"id":719,"value":"closestPoints2D = points2D\n .map((pt) =>\n Math.sqrt(\n (pt[0] - student2Dscaled[0]) ** 2 + (pt[1] - student2Dscaled[1]) ** 2\n )\n )\n .map((d, i) => ({ ...data[i], distance: d, point: points2D[i] }))\n .sort((a, b) => d3.ascending(a.distance, b.distance))","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"---\n### 3D Scale and Center Points to 1x1x1 Cube Centered on Origin","pinned":false,"hidden":false,"mode":"md"},{"id":136,"value":"xX = d3.scaleLinear().domain(d3.extent(embeddings.map((e) => e[0]).flat()))","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"xCentroid = xX.domain()[1] - xX.domain()[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"yX = d3.scaleLinear().domain(d3.extent(embeddings.map((e) => e[1]).flat()))","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"yCentroid = yX.domain()[1] - yX.domain()[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"zX = d3.scaleLinear().domain(d3.extent(embeddings.map((e) => e[2]).flat()))","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"zCentroid = zX.domain()[1] - zX.domain()[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"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"},{"id":150,"value":"uX = d3.extent(translated.flat())","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"uScale = d3.scaleLinear().domain(uX)","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"clamped = translated.map((d) => [uScale(d[0]), uScale(d[1]), uScale(d[2])])","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"---\n### THREE.js Geometry and Scene Construction","pinned":false,"hidden":false,"mode":"md"},{"id":116,"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());\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"},{"id":119,"value":"light = new THREE.HemisphereLight(0xffffff, 0xffffff, 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"axesHelper = new THREE.AxesHelper(0.5).setColors(0xff0000, 0x00ff00, 0x0000ff)","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"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"},{"id":103,"value":"scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x181842);\n scene.add(points);\n //scene.add(axesHelper);\n scene.add(cube);\n scene.add(light);\n\n if (displayLines) lines.map((d) => scene.add(d));\n if (displayClusters) hulls.map((d) => scene.add(d));\n\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"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"},{"id":256,"value":"---\n### THREE.js Interaction Handlers","pinned":false,"hidden":false,"mode":"md"},{"id":100,"value":"mouse = new THREE.Vector2()","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"raycaster = new THREE.Raycaster()","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"// Continuously updates\n{\n while (true) {\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"},{"id":264,"value":"---\n### K-Means Clustering\nVia [Clusters](https://www.npmjs.com/package/clusters).","pinned":false,"hidden":false,"mode":"md"},{"id":125,"value":"viewof displayClusters = Inputs.toggle({ value: true, label: \"Draw clusters?\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"viewof clusterCount = Inputs.range([0, 10], {\n label: \"Cluster Count\",\n value: 6,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"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"},{"id":161,"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.ascending(a.centroid[2], b.centroid[2]));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"cluster = (await import(\"https://cdn.skypack.dev/clusters@0.0.4?min\")).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"---\n### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":80,"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"},{"id":33,"value":"UMAP = (await require(\"umap-js@1.4.0/lib/umap-js.min.js\")).UMAP","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"sr = require(\"seedrandom@3.0.5/seedrandom.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"rng = new sr(seed)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}