31:T65d,scatterGLContainer = { const containerElement = DOM.element("div"); containerElement.style.position = "relative"; containerElement.style.height = `${height}px`; yield containerElement; const scatterGL = new ScatterGL(containerElement, { onHover: (point) => { mutable point = Object.assign(mutable point, { hover: point }); }, onClick: (point) => { mutable point = Object.assign(mutable point, { click: point }); }, renderMode: "POINT", styles: { backgroundColor: "rgba(0,0,0,1)", point: { colorUnselected: "rgba(120, 120, 120, 0.7)", colorNoSelection: "rgba(51, 51, 51, 0.7)", colorSelected: "rgba(255, 10, 10, 0.7)", colorHover: "rgba(255, 11, 79, 0.7)", showLabelsOnHover: true, scaleDefault: 0.5, scaleSelected: 1.5, scaleHover: 1 } } }); function update(dataset) { scatterGL.render(dataset); } function setColor(data) { scatterGL.setPointColorer((i) => { if (colorBy == "role") { return Number( "0x" + d3 .color( colorScale( (Number(data[i].is_designer == "True") << 2) + (Number(data[i].is_strategic_designer == "True") << 1) + Number(data[i].is_product_manager == "True") - 1 ) ) .formatHex() .substring(1) ); } else { return parseInt(data[i].cluster) * 42949600; } }); } return Object.assign(containerElement, { update, setColor }); }32:T752,point.click ? html`

" + e[0] + " : " + e[1] + "

` : ""33:[] 2f:{"title":"Designer + Product Manager Job Posting Embeddings","cells":[{"id":0,"value":"# Designer + Product Manager Job Posting Embeddings","pinned":false,"hidden":false,"mode":"md"},{"id":241,"value":"---\n## Data Upload\n*Upload `3-job_embeddings_3d.csv` with the button below. The embeddings take some time to load, please be patient.*","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"viewof file = await Inputs.file()","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"---\n- Click and drag to orbit the origin.\n- Two-finger drag to pan and zoom.\n- Click on a circle to see details about the job posting in the list below.","pinned":false,"hidden":false,"mode":"md"},{"id":190,"value":"viewof colorBy = Inputs.radio([\"cluster\", \"role\"], {\n label: \"Color by...\",\n value: \"role\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"viewof refresh = Inputs.button(\"Refresh\", {\n label: \"If the visualization is not showing...\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"html`

\" +\n d.title +\n \"\" +\n \" ●\" +\n \"

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"---\n## Reference \n\n","pinned":false,"hidden":false,"mode":"md"},{"id":354,"value":"#### Data Flow Summary\n\n| Stage | Input | Process | Output |\n|-------|-------|---------|--------|\n| **Filter** | 5GB raw data | Role matching | 98MB filtered |\n| **Text** | Job descriptions | Clean & combine | Processed text |\n| **TF-IDF** | Clean text | Term frequency | 1000-dim vectors |\n| **Semantic** | Clean text | Neural encoding | 384-dim vectors |\n| **Combine** | Both embeddings | Standardize & concat | 1384-dim vectors |\n| **Reduce** | High-dim vectors | PCA | ≤50-dim vectors |\n| **Export** | Final embeddings | Save files | Ready for t-SNE |","pinned":false,"hidden":false,"mode":"md"},{"id":348,"value":"--- \n## Processing","pinned":false,"hidden":false,"mode":"md"},{"id":490,"value":"roles = [\n \"Product Manager\",\n \"Strategic Designer\",\n \"Strategic Designer + Product Manager\",\n \"Designer\",\n \"Designer + Product Manager\",\n \"Designer + Strategic Designer\",\n \"Designer + Strategic Designer + Product Manager\"\n].map((d, i) => ({ title: d, binary: i, color: colorScale(i) }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"data = (await file.csv()).slice(0, 5000)","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"embeddings = data.map((d) =>\n d3\n .range(50)\n .map((i) => \"dim_\" + i)\n .map((k) => parseFloat(d[k]))\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"dynamic = {\n colorBy;\n refresh;\n const umap = new UMAP({\n nComponents: 3,\n minDist: 0.5,\n nNeighbors: 50\n }),\n nEpochs = umap.initializeFit(embeddings);\n\n for (let i = 0; i < nEpochs; i++) {\n umap.step();\n if (i % 5 === 0) yield umap.getEmbedding();\n }\n yield umap.getEmbedding();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"roleCounts = [\n { title: \"Designer\", count: 5299, color: \"red\" },\n { title: \"Strategic Designer\", count: 2489, color: \"green\" },\n { title: \"Product Manager\", count: 9666, color: \"blue\" }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"height = width * 0.6","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"colorScale = d3.scaleOrdinal().domain(d3.range(8)).range(d3.schemeObservable10)\n//.range(d3.range(8).map((d) => d3.interpolateRainbow(d / 16)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"loop = {\n colorBy;\n const points = data;\n const positions = dynamic;\n const dataset = new ScatterGL.Dataset(positions);\n\n scatterGLContainer.update(dataset);\n scatterGLContainer.setColor(data);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"mutable point = ({})","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"---\n## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"UMAP = (await require(\"umap-js@1.3.1\")).UMAP","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"ScatterGL = {\n const { ScatterGL } = await require.alias({\n THREE: \"three@0.126/build/three.min.js\"\n })(\"scatter-gl@0.0.12\");\n return ScatterGL;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}