33:T511,create_parameter_form = (dr_method => { switch (dr_method) { case "TSNE": return html``; break; case "UMAP": return html``; break; case "TriMap": return html``; break; default: return html`` } })34:[] 32:{"title":"Hello, DruidJS!","cells":[{"id":0,"value":"md`\n# Hello, DruidJS!\n### The generator function`","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"md`[DruidJS](https://github.com/saehm/druidjs) is a JavaScript library for Dimensionality Reduction.\n\nEach object, derived from a dimensionality reduction classes which implements a iterative method, has a generator function. The function creates a JavaScript iterator, which allows to *iterate* through the dimensionality reduction process. You can follow how the dimensionality reduction method transforms the data given in the constructor to a lower dimensional space. Here, the result gets drawn as Scatterplot.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":671,"value":"md`### Dataset`","pinned":false,"hidden":false,"mode":"ojs"},{"id":522,"value":"{\n console.log(data2)\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":718,"value":"viewof data2;","pinned":false,"hidden":false,"mode":"ojs"},{"id":723,"value":"viewof normalize;","pinned":false,"hidden":false,"mode":"ojs"},{"id":725,"value":"data2","pinned":false,"hidden":false,"mode":"ojs"},{"id":731,"value":"data","pinned":false,"hidden":false,"mode":"ojs"},{"id":595,"value":"md`Select one of the dimensionality reduction algorithms below, to see the generator function in action.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"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: [\"UMAP\", \"TSNE\", \"TriMap\", \"TopoMap\", \"SAMMON\", \"SQDMDS\"],\n value: \"TSNE\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":878,"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":650,"value":"md `### Parameterization for ${dr_method}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"viewof parameterization","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"md`${Object.keys(parameterization).map(key => {\n return `${key} = ${parameterization[key]}`\n }).join(\"
\")}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":660,"value":"md`## Result of the Dimensionality Reduction Method`","pinned":false,"hidden":false,"mode":"ojs"},{"id":885,"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. After creating the object, you can obtain the [generator](https://observablehq.com/@observablehq/introduction-to-generators?collection=@observablehq/generators) by calling the following method:\n```javascript \ndr.generator()\n``` ","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"dr = {\n const X = druid.Matrix.from(data);\n const DR = druid[dr_method];\n return new DR(X, parameterization);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":875,"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 const generator = dr.generator(); \n for (const result of generator) {\n const [x, y] = get_scales(result);\n const gs = svg.selectAll(\".point\")\n .data(result)\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(result)\n .attr(\"transform\", (([px, py], i) => `translate(${x(px)}, ${y(py)})`));\n \n yield svg.node()\n }\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":867,"value":"## Example using Plot","pinned":false,"hidden":false,"mode":"md"},{"id":870,"value":"Using DruidJS, DR methods can be employed in a concise form, i.e. for ${dr_method}:\n```javascript\ndruid.${dr_method}.generator(, )\n```","pinned":false,"hidden":false,"mode":"md"},{"id":794,"value":"plotData = druid[dr_method].generator(data, parameterization)","pinned":true,"hidden":false,"mode":"ojs"},{"id":847,"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 };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":799,"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":6,"value":"originalData = penguins_without_nan\n .map(({bill_length_mm, bill_depth_mm, flipper_length_mm, body_mass_g, species, island}) => [+bill_length_mm, +bill_depth_mm, +flipper_length_mm, +body_mass_g])\n .map(row => row.map((value, i) => value / maxes[i]));","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"shape = d3.scaleOrdinal(d3.symbols.map(s => d3.symbol().size(50).type(s)()))","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"color = d3.scaleOrdinal(d3.schemeDark2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":742,"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 return [\n d3\n .scaleLinear()\n .domain(x_extent)\n .rangeRound([20, W - 20])\n .nice(),\n d3\n .scaleLinear()\n .domain(y_extent)\n .rangeRound([20, W - 20])\n .nice()\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"W = Math.min(500, width);","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"penguins","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"$33","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":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"druid.version","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"d3 = require(\"d3@6\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"import {slider, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"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":704,"value":"import {viewof parameterization} with {dr_method} from \"@saehrimnir/hello-druidjs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":711,"value":"import {viewof data2, viewof normalize, data, classes, classes2, penguins_without_nan} from \"@saehrimnir/hello-druidjs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}