31:Tc48,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; } }32:[{"id":"12dfe34b39062185eccb40d841448bd2389abcbeb9f0b424840f5dc407accc1a2fbef1eae9600733d13fb1333c9b82807438bf3a5c4b8637d7b27c6a906b0af2","href":"https://static.observableusercontent.com/files/12dfe34b39062185eccb40d841448bd2389abcbeb9f0b424840f5dc407accc1a2fbef1eae9600733d13fb1333c9b82807438bf3a5c4b8637d7b27c6a906b0af2","name":"nutrients.csv","type":"text/csv","lastModified":1603903718724.986,"size":1146289}] 2f:{"title":"DruidJS Generator","cells":[{"id":0,"value":"md`# DruidJS Generator\n\nA convenient generator that computes dimensionality reduction using [DRUID.js](https://github.com/saehm/DruidJS) in a web worker\n\n## Usage\n\n~~~js\nimport { DruidGenerator, viewof druid_method, viewof druid_params} from \"@john-guerra/druidjs-generator\"\n\ndrData = DruidGenerator(dataAsMatrix, druid_method, druid_params)\n~~~\n\nKudos to [@fil](/@fil) for his worker library and [@saehrimnir](/saehrimnir) for DruidJS\n\n**Test it with your own data**\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"viewof data = {\n const target = await dataInput({\n initialValue: await FileAttachment(\"nutrients.csv\")\n .text()\n .then((res) => d3.csvParse(res, d3.autoType)),\n format: fileType // Optional, one of MongoExport, JSON, CSV, CSVNoAutoType\n });\n\n return target;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"viewof fileType = Inputs.select(\n [\"CSV\", \"JSON\", \"CSVNoAutoType\", \"MongoExport\", \"auto\"],\n {\n label: \"File Type\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":759,"value":"## Dimensionality Reduction","pinned":false,"hidden":false,"mode":"md"},{"id":415,"value":"viewof druid_method = Inputs.select(\n [\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 {\n label: \"Dimensionality Reduction Method\",\n value: default_method\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"viewof druid_params = form(create_parameter_form(druid_method))","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"viewof filteredData = conditionalShow(\n await navio(dataWithID, { height: 300 }),\n { label: \"Filter Data\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":715,"value":"viewof interactive = Inputs.toggle({label: \"Interactive\", value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"viewof show_dynamic = Inputs.toggle({\n label: \"Show DR steps\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":596,"value":"viewof chart = drData.length ? BrushableScatterPlot(dataToPlot, {\n color: colorCol,\n size: sizeCol,\n colorSchemeCategorical: \"spectral\",\n width: (width * 2) / 3,\n height: (width * 2) / 3,\n interactive\n}): htl.html`Processing...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":713,"value":"## Brushed","pinned":false,"hidden":false,"mode":"md"},{"id":705,"value":"Inputs.table(chart.brushed)","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"md`## Choose which attributes to feed to UMAP`","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"viewof selectedColumns = searchCheckbox(numericColumns, {\n label: \"Select Attributes\", \n value: numericColumns\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"md`## Visualization parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"viewof sizeCol = Inputs.select(selectedColumns, {\n label: \"Attribute for Size\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"viewof colorCol = Inputs.select(columns, {\n label: \"Attribute for Color\",\n value: columns.indexOf(\"group\") !== -1 ? \"group\" : numericColumns[0]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"dataToPlot = dataWithID.map((row, id) => ({\n ...row,\n x: drData[row.__id] && drData[row.__id][0],\n y: drData[row.__id] && drData[row.__id][1]\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":774,"value":"## Generator Example\n\nBelow you can find an example of how you can use DruidJS as a generator function. The generator will yield the iterations of the algorithm as it seems them.","pinned":false,"hidden":false,"mode":"md"},{"id":564,"value":"drData = DruidGenerator(\n dataAsMatrix,\n druid_method,\n druid_params,\n { dynamic: show_dynamic }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":948,"value":"druid_params.prevent","pinned":true,"hidden":false,"mode":"ojs"},{"id":900,"value":"{\n // let next, \n // gen = DruidGenerator(dataAsMatrix, druid_method, druid_params, {\n // dynamic: show_dynamic\n // }); \n\n // // gen = druid[druid_method].generator(dataAsMatrix, druid_params);\n \n // while (!(next= gen.next()).done ) {\n // console.log(\"g\", next);\n // yield next.value;\n // }\n // console.log(\"done\");\n\n // try {\n // yield* druid[druid_method].generator(dataAsMatrix, druid_params);\n // } finally {\n // console.log(\"Done!\");\n // }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":408,"value":"function DruidGenerator(\n dataAsMatrix,\n druid_method,\n reducerParams,\n { dynamic = true } = {}\n) {\n return Generators.observe(\n worker(\n function* dr({ method, data, parameters, dynamic }) {\n console.log(\"👉🏼 Initializing druid...\", data.length, dynamic);\n yield [];\n if (dynamic) {\n yield* druid[method].generator(data, parameters); // show the steps;\n } else {\n return druid[method].transform(data, parameters); // return the final result;\n }\n },\n {\n method: druid_method,\n data: dataAsMatrix,\n parameters: reducerParams,\n dynamic: dynamic\n },\n `\nimportScripts(\"https://cdn.observableusercontent.com/npm/@saehrimnir/druidjs@0.7.3/dist/druid.min.js\")\n`\n // `\n // importScripts(${JSON.stringify(\n // await require.resolve(\"@saehrimnir/druidjs@^0.7.3\")\n // )});\n // `\n )\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":267,"value":"md`---\n## Data\nFormat data for UMAP, it expects a matrix of numbers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"dataAsMatrix = {\n return filteredData.map(d => selectedColumns.map(c => d[c]))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"numericColumns = columns.filter(\n (c) => typeof data[0][c] === \"number\" && c !== \"__id\" && c !== \"id\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"columns = data.length > 0 ? Object.keys(data[0]) : []","pinned":true,"hidden":false,"mode":"ojs"},{"id":731,"value":"dataWithID = data.map((d, i) => {\n d.__id = i;\n return d;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":795,"value":"default_method = \"FASTMAP\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":322,"value":"md`---\n## Imports\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"d3 = require(\"d3-dsv\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"import {vl} from \"@vega/vega-lite-api\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"import {checkbox, number, slider, select} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":181,"value":"import {dataInput} from \"@john-guerra/file-input-with-default-value\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":212,"value":"import {worker} from \"@fil/worker\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":287,"value":"import {navio} from \"@john-guerra/navio\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":375,"value":"// druid = require(\"@saehrimnir/druidjs\")\ndruid = \"🌶\" // fake symbol to make Observable happy (the real druid is loaded inside the worker)","pinned":true,"hidden":false,"mode":"ojs"},{"id":804,"value":"// druid2 = require(\"@saehrimnir/druidjs\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":529,"value":"import {searchCheckbox} from \"@john-guerra/search-checkbox\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":420,"value":"import { form } from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":592,"value":"import { BrushableScatterPlot } from \"@john-guerra/brushable-scatterplot\";","pinned":true,"hidden":false,"mode":"ojs"},{"id":746,"value":"import {conditionalShow} from \"@john-guerra/conditional-show\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":423,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":984,"value":"require.resolve(\"@saehrimnir/druidjs@^0.8.0\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}