30:Tc5b,create_parameter_form = (dr_method) => { switch (dr_method) { case "ISOMAP": case "LLE": case "LTSA": return html``; break; case "TSNE": return html``; break; case "UMAP": return html``; break; case "TriMap": return html``; break; case "LSP": return html``; case "SQDMDS": return html``; break; case "LDA": return html``; break; default: return html``; break; } }31:[] 2e:{"title":"Hello, DruidJS!","cells":[{"id":1010,"value":"# Hello, DruidJS!\n### The transform function","pinned":false,"hidden":false,"mode":"md"},{"id":201,"value":"md`[DruidJS](https://github.com/saehm/druidjs) is a JavaScript library for Dimensionality Reduction.\n\nEach object, derived from the dimensionality reduction classes, has a transform function. The function *transforms* the data given in the constructor to a lower dimensional space, also specified in the constructor. The function does the actual dimensional reduction, and returns its result. Here, the result gets drawn as Scatterplot.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":865,"value":"md`## Dataset`","pinned":false,"hidden":false,"mode":"ojs"},{"id":522,"value":"{\n return data2 === penguins_without_nan ? md`\nThe *Palmer Penguins* dataset consists of ${data.length} specimens of three different species (${Array.from(new Set(classes)).map(d => ` ${d}`).join(\", \")}) of penguins living on one of the islands Torgersen, Biscoe, or Dream. See ${await linkDelayed('@enjalot/palmer-penguins')}}` : md`\nThe dataset consists of ${data.length} elements of ${(new Set(classes)).size} (${Array.from(new Set(classes)).map(d => ` ${d}`).join(\", \")}).`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":821,"value":"viewof data2 = dataInput({ initialValue: penguins_without_nan })","pinned":false,"hidden":false,"mode":"ojs"},{"id":855,"value":"viewof normalize = checkbox({\n description: \"Normalize data values?\",\n options: [{ value: \"normalize\", label: \"Normalize\" }],\n value: \"normalize\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":820,"value":"data2","pinned":false,"hidden":false,"mode":"ojs"},{"id":819,"value":"data = {\n const attrs = Object.keys(data2[0]).filter((a) => {\n return (\n typeof data2[0][a] === \"number\" &&\n ![\"name\", \"class\", \"label\", \"species\", \"island\"].includes(a)\n );\n });\n\n if (normalize === \"normalize\") {\n const maxes = attrs.map((a) => {\n return d3.max(data2, (d) => d[a]);\n });\n\n return data2.map((d) => attrs.map((a, i) => d[a] / maxes[i]));\n } else {\n return data2.map((d) => attrs.map((a, i) => d[a]));\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"classes = data2.map(d => d?.species ?? d?.class ?? d?.label)","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"classes2 = data2.map(d => d?.island ?? \"none\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":595,"value":"md`Select one of the dimensionality reduction algorithms below, to see the **transform** function in action.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":770,"value":"md`### Dimensionality Reduction Method`","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"viewof dr_method = select({\n description: \"Please pick a Dimensionality Reduction Method.\",\n options: [\n \"UMAP\",\n \"TSNE\",\n \"TriMap\",\n \"PCA\",\n \"LLE\",\n \"LTSA\",\n \"ISOMAP\",\n \"FASTMAP\",\n \"MDS\",\n \"LSP\",\n \"LDA\",\n \"TopoMap\",\n \"SAMMON\",\n \"SQDMDS\"\n ].sort(d3.ascending),\n value: \"FASTMAP\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1081,"value":"html`For more information about how to use this method and the available parameters, please refer to the documentation: ${dr_method}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"md `### Parameterization for ${dr_method}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"viewof parameterization = form(create_parameter_form(dr_method))","pinned":false,"hidden":false,"mode":"ojs"},{"id":694,"value":"md`${Object.keys(parameterization).map(key => {\n return `${key} = ${parameterization[key]}`\n }).join(\"
\") || (dr_method + \" has no parameters!\")}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"md`## Result of the Dimensionality Reduction Method`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1097,"value":"To create a Dimensionality Reduction (DR) object, use the following code, i.e. for ${dr_method}:\n\n```javascript\nlet dr = new druid.${dr_method}(, );\n```\n\nThe `data` parameter can either be a `druid.Matrix` object or a 2D array of numbers. Once the object is created, you can apply the transformation using the \n```javascript \ndr.transform()\n``` \nmethod.","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"dr = {\n const X = druid.Matrix.from(data); // X is the data as object of the Matrix class.\n const DR = druid[dr_method]; // DR is the selected DR class\n return new DR(X, get_parameters(parameterization));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":893,"value":"Y = dr.transform()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1070,"value":"When drawing projections, it is crucial to maintain a 1:1 aspect ratio for the projection; otherwise, the distances between points may become distorted.","pinned":false,"hidden":false,"mode":"md"},{"id":425,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", W)\n .attr(\"viewBox\", [0, 0, W, W])\n \n let [x, y] = await new Promise(res => res(get_scales(Y)));\n const gs = svg.selectAll(\".point\")\n .data(Y)\n .enter()\n .append(\"g\")\n .attr(\"class\", \"point\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", (d, i) => color(classes[i]))\n\n gs.append(\"path\")\n .attr(\"d\", (d, i) => shape(classes2[i]))\n\n svg.selectAll(\".point\")\n .data(Y)\n .attr(\"transform\", (([px, py], i) => `translate(${x(px)}, ${y(py)})`))\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1064,"value":"## Example using Plot","pinned":false,"hidden":false,"mode":"md"},{"id":1066,"value":"Using DruidJS, DR methods can be employed in a concise form as, i.e. for ${dr_method}:\n```javascript\ndruid.${dr_method}.transform(, )\n```\n","pinned":false,"hidden":false,"mode":"md"},{"id":1073,"value":"plotData = druid[dr_method].transform(data, get_parameters(parameterization))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1075,"value":"extents = {\n let x_extent = d3.extent(plotData, (d) => d[0]);\n let y_extent = d3.extent(plotData, (d) => d[1]);\n let x_span = x_extent[1] - x_extent[0];\n let y_span = y_extent[1] - y_extent[0];\n const offset = Math.abs(x_span - y_span) / 2;\n\n let x;\n let y;\n\n if (x_span > y_span) {\n x_extent[0] -= offset;\n x_extent[1] += offset;\n } else {\n y_extent[0] -= offset;\n y_extent[1] += offset;\n }\n return { x: x_extent, y: y_extent.reverse() };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1077,"value":"Plot.plot({\n x: {\n domain: extents.x,\n axis: null\n },\n y: {\n domain: extents.y,\n axis: null\n },\n color: {\n scheme: \"Dark2\",\n legend: true\n },\n symbol: {\n legend: true\n },\n inset: 20,\n width: W,\n height: W,\n marks: [\n Plot.dot(plotData, {\n x: (d) => d[0],\n y: (d) => d[1],\n r: 4,\n stroke: (d, i) => classes[i],\n symbol: (d, i) => classes2[i]\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"function wait(t) {\n return new Promise(resolve => setTimeout(resolve, t))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":887,"value":"viewof shape_size = slider({\n min: 10, \n max: 100, \n step: 1, \n value: 50, \n title: \"Shape size\", \n //description: \"Integers from zero through 100\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"shape = d3.scaleOrdinal(d3.symbols.map(s => d3.symbol().size(shape_size).type(s)()))","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"color = d3.scaleOrdinal(d3.schemeDark2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"get_scales = function(data) {\n let x_extent = d3.extent(data, d => d[0]);\n let y_extent = d3.extent(data, d => d[1]);\n let x_span = x_extent[1] - x_extent[0];\n let y_span = y_extent[1] - y_extent[0];\n const offset = Math.abs(x_span - y_span) / 2;\n \n let x;\n let y;\n \n if (x_span > y_span) {\n x_extent[0] -= offset;\n x_extent[1] += offset;\n } else {\n y_extent[0] -= offset;\n y_extent[1] += offset;\n }\n \n return [\n d3.scaleLinear().domain(x_extent).rangeRound([20, W - 20]).nice(),\n d3.scaleLinear().domain(y_extent).rangeRound([20, W - 20]).nice(),\n ]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"W = Math.min(500, width);","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"penguins_without_nan = penguins.filter(\n ({ culmen_length_mm, culmen_depth_mm, flipper_length_mm, body_mass_g }) => {\n return (\n !isNaN(culmen_length_mm) &&\n !isNaN(culmen_depth_mm) &&\n !isNaN(flipper_length_mm) &&\n !isNaN(body_mass_g)\n );\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":756,"value":"function get_parameters(parameterization) {\n if (dr_method == \"LDA\") {\n return {\n labels: parameterization.clusters == \"islands\" ? classes2 : classes\n };\n } else {\n return parameterization;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"maxes = druid\n .linspace(0, 3)\n .map((i) =>\n d3.max(\n penguins,\n ({ culmen_length_mm, culmen_depth_mm, flipper_length_mm, body_mass_g }) =>\n [+culmen_length_mm, +culmen_depth_mm, +flipper_length_mm, +body_mass_g][\n i\n ]\n )\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"druid = import(\"@saehrimnir/druidjs@0.9\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":929,"value":"druid.version","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"d3 = require(\"d3@6\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":763,"value":"import {slider, select, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"import {linkDelayed} from \"@mootari/dynamic-notebook-links\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":810,"value":"import { dataInput } from \"@john-guerra/file-input-with-default-value\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}