31:Td5d,{ const height = width * 0.5; const svg = d3.create("svg").attr("width", width).attr("height", height); const bg = svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#f4f4f6"); const hullG = svg.append("g"); const circleG = svg.append("g"); const ttG = svg .append("g") .attr("opacity", 0) .attr("font-family", "courier") .attr("pointer-events", "none"); const ttBg = ttG .append("rect") .attr("width", 250) .attr("height", 60) .attr("fill", "white") .attr("opacity", 0.5); const ttText = ttG.append("text").attr("fill", "black"); const ttTitle = ttText .append("tspan") .attr("x", 10) .attr("dy", 25) .attr("font-size", 14) .text("Udemy"); const ttBody = ttText .append("tspan") .attr("x", 10) .attr("dy", 20) .attr("font-size", 13) .text("Landing screen in Udemy"); const umap = new UMAP({ nComponents: 2, minDist: 0.2, nNeighbors: 15 }); const nEpochs = umap.initializeFit(data); const scaleC = d3.scaleOrdinal(d3.schemeObservable10); const scaleCH = d3.scaleOrdinal(d3.schemeAccent); const scaleX = d3.scaleLinear(); const scaleY = d3.scaleLinear(); const circles = circleG .selectAll("circle") .data(platforms) .join("circle") .attr("cx", (d) => Math.random() * width) .attr("cy", (d) => Math.random() * height) .attr("r", 5) .attr("fill", (d, i) => scaleC(d)) .on("mouseover", (e, d) => { const ix = positions.findIndex( (f) => String(f[0]) + String(f[1]) == String(d[0]) + String(d[1]) ); const ttWidth = d3.max([ platforms[ix].length, rawData[ix]["NAME OF TRANSITION + PLATFORM"].length ]) * 9; ttBg.attr("width", ttWidth); ttTitle.text(platforms[ix]); ttBody.text(rawData[ix]["NAME OF TRANSITION + PLATFORM"]); ttG.attr("opacity", 1).attr( "transform", `translate(${ scaleX(d[0]) < width / 2 ? scaleX(d[0]) : scaleX(d[0]) - ttWidth }, ${scaleY(d[1]) < height / 2 ? scaleY(d[1]) : scaleY(d[1]) - 60} )` ); }) .on("mouseout", (e, d) => ttG.attr("opacity", 0)); let positions; const lineGen = d3.line(); for (let i = 0; i < nEpochs; i++) { umap.step(); positions = umap.getEmbedding(); scaleX .domain(d3.extent(positions.map((d) => d[0]))) .range([30, width - 30]); scaleY .domain(d3.extent(positions.map((d) => d[1]))) .range([30, height - 30]); circles .data(positions) .attr("cx", (d) => scaleX(d[0])) .attr("cy", (d) => scaleY(d[1])); cluster.k(clusterCount); cluster.iterations(500); cluster.data(positions); const clusters = cluster .clusters() .sort((a, b) => d3.ascending(a.centroid[2], b.centroid[2])) .map((c) => c.points); const hulls = clusters .map((c) => convex.default(c)) .map((h, i) => h.map((s) => [clusters[i][s[0]], clusters[i][s[1]]])) .map((h) => h.map((s) => s[0])); lineGen.x((d) => scaleX(d[0])).y((d) => scaleY(d[1])); hullG .selectAll("path") .data(hulls) .join("path") .attr("d", (d) => lineGen(d)) .attr("fill", (d, i) => scaleCH(i)) .attr("opacity", 0.25); if (i % 2 == 0) { yield svg.node(); } } yield svg.node(); }32:T87e,// Copyright 2021, Observable Inc. // Released under the ISC license. // https://observablehq.com/@d3/color-legend function Swatches( color, { columns = null, format, unknown: formatUnknown, swatchSize = 15, swatchWidth = swatchSize, swatchHeight = swatchSize, marginLeft = 0 } = {} ) { const id = `-swatches-${Math.random().toString(16).slice(2)}`; const unknown = formatUnknown == null ? undefined : color.unknown(); const unknowns = unknown == null || unknown === d3.scaleImplicit ? [] : [unknown]; const domain = color.domain().concat(unknowns); if (format === undefined) format = (x) => (x === unknown ? formatUnknown : x); function entity(character) { return `&#${character.charCodeAt(0).toString()};`; } if (columns !== null) return htl.html`

${domain.map((value) => { const label = `${format(value)}`; return htl.html`

${label}

`; })}

`; return htl.html`

${domain.map( (value) => htl.html`${format( value )}` )}

`; }33:[{"id":"cf1edbd706c286be11343dee553d9eb460e63e792a4ab7e17f1b6ff2520554446fd1ba0b6dcd89ac30df11b63ec16e88a15f40883c7120a87847e7b7b89f0cee","href":"https://static.observableusercontent.com/files/cf1edbd706c286be11343dee553d9eb460e63e792a4ab7e17f1b6ff2520554446fd1ba0b6dcd89ac30df11b63ec16e88a15f40883c7120a87847e7b7b89f0cee","name":"taxonomy.csv","type":"text/csv","lastModified":1749776205614.432,"size":16199}] 2f:{"title":"Learning Platform Taxonomy Clustering","cells":[{"id":0,"value":"# Learning Platform Taxonomy Clustering\n\nPlease wait for up to thirty seconds after the page loads for the UMAP algorithm to converge. Mouseover the circles to see information about each transition experience. Change the *Number of Clusters* slider below to recalculate the UMAP placement and generate different groupings of experiences.","pinned":false,"hidden":false,"mode":"md"},{"id":268,"value":"viewof clusterCount = Inputs.range([0, 10], {\n value: 5,\n label: \"Number of Clusters\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"Swatches(d3.scaleOrdinal(platforms, d3.schemeObservable10), {\n columns: \"100px\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"Inputs.table(rawData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"rawData = (await FileAttachment(\"taxonomy.csv\").csv()).filter(\n (d) => d[\"NAME OF TRANSITION + PLATFORM\"]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"platforms = [\n \"Udemy\",\n \"Udemy\",\n \"Udemy\",\n \"Udemy\",\n \"Udemy\",\n \"Udemy\",\n \"Udemy\",\n \"Udemy\",\n \"Udemy\",\n \"Udemy\",\n \"learnHTMLCSS\",\n \"learnHTMLCSS\",\n \"learnHTMLCSS\",\n \"learnHTMLCSS\",\n \"learnHTMLCSS\",\n \"learnHTMLCSS\",\n \"learnHTMLCSS\",\n \"learnHTMLCSS\",\n \"Coursera\",\n \"Coursera\",\n \"Coursera\",\n \"Coursera\",\n \"Coursera\",\n \"Coursera\",\n \"Coursera\",\n \"Coursera\",\n \"Coursera\",\n \"Speak\",\n \"Speak\",\n \"Speak\",\n \"Speak\",\n \"Speak\",\n \"Speak\",\n \"Speak\",\n \"Khan Academy\",\n \"Khan Academy\",\n \"Khan Academy\",\n \"Khan Academy\",\n \"Khan Academy\",\n \"\",\n \"Code in Place\",\n \"Code in Place\",\n \"Code in Place\",\n \"Code in Place\",\n \"Code in Place\",\n \"Code in Place\",\n \"\",\n \"Duolingo\",\n \"Duolingo\",\n \"Duolingo\",\n \"Duolingo\",\n \"Duolingo\",\n \"Duolingo\",\n \"Duolingo\",\n \"Duolingo\",\n \"Duolingo\",\n \"Duolingo\",\n \"YouTube\",\n \"YouTube\",\n \"YouTube\",\n \"YouTube\",\n \"YouTube\",\n \"YouTube\",\n \"YouTube\",\n \"YouTube\",\n \"YouTube\",\n \"YouTube\"\n].filter((d) => d)","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"data = rawData.map((d) =>\n Object.values(d)\n .slice(4)\n .map((d) => parseInt(d))\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"UMAP = import(\"https://cdn.skypack.dev/umap-js@1.3.3\").then((d) => d.UMAP)","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"cluster = (await import(\"https://cdn.skypack.dev/clusters@0.0.4?min\")).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"convex = await import(\"https://cdn.skypack.dev/convex-hull@1.0.3?min\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}