I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
drData = DruidGenerator(
dataAsMatrix,
druid_method,
druid_params,
{ dynamic: show_dynamic }
)
druid_params.prevent
{
// let next,
// gen = DruidGenerator(dataAsMatrix, druid_method, druid_params, {
// dynamic: show_dynamic
// });
// // gen = druid[druid_method].generator(dataAsMatrix, druid_params);
// while (!(next= gen.next()).done ) {
// console.log("g", next);
// yield next.value;
// }
// console.log("done");
// try {
// yield* druid[druid_method].generator(dataAsMatrix, druid_params);
// } finally {
// console.log("Done!");
// }
}
function DruidGenerator(
dataAsMatrix,
druid_method,
reducerParams,
{ dynamic = true } = {}
) {
return Generators.observe(
worker(
function* dr({ method, data, parameters, dynamic }) {
console.log("👉🏼 Initializing druid...", data.length, dynamic);
yield [];
if (dynamic) {
yield* druid[method].generator(data, parameters); // show the steps;
} else {
return druid[method].transform(data, parameters); // return the final result;
}
},
{
method: druid_method,
data: dataAsMatrix,
parameters: reducerParams,
dynamic: dynamic
},
`
importScripts("https://cdn.observableusercontent.com/npm/@saehrimnir/druidjs@0.7.3/dist/druid.min.js")
`
// `
// importScripts(${JSON.stringify(
// await require.resolve("@saehrimnir/druidjs@^0.7.3")
// )});
// `
)
);
}
dataAsMatrix = {
return filteredData.map(d => selectedColumns.map(c => d[c]))
}
numericColumns = columns.filter(
(c) => typeof data[0][c] === "number" && c !== "__id" && c !== "id"
)
columns = data.length > 0 ? Object.keys(data[0]) : []
dataWithID = data.map((d, i) => {
d.__id = i;
return d;
})
default_method = "FASTMAP"
d3 = require("d3-dsv")
import {vl} from "@vega/vega-lite-api"
import {checkbox, number, slider, select} from "@jashkenas/inputs"
import {dataInput} from "@john-guerra/file-input-with-default-value"
import {worker} from "@fil/worker"
import {navio} from "@john-guerra/navio"
// druid = require("@saehrimnir/druidjs")
druid = "🌶" // fake symbol to make Observable happy (the real druid is loaded inside the worker)
// druid2 = require("@saehrimnir/druidjs")
import {searchCheckbox} from "@john-guerra/search-checkbox"
import { form } from "@mbostock/form-input"
import { BrushableScatterPlot } from "@john-guerra/brushable-scatterplot";
import {conditionalShow} from "@john-guerra/conditional-show"
create_parameter_form = (dr_method) => {
switch (dr_method) {
case "ISOMAP":
case "LLE":
case "LTSA":
return html`<form>
<label><input name="neighbors" type="range" min=10 max=300 value=30 /> neighbors <i>k</i></label><br />
<label><input name="seed" type="number" value=1212 /> seed <i>seed</i></label>
</form>`;
break;
case "TSNE":
return html`<form>
<label><input name="perplexity" type="range" min=2 max=100 value=50 /> <i>perplexity</i></label><br>
<label><input name="epsilon" type="range" min=1 max=100 value=5 /> <i>epsilon</i></label><br />
<label><input name="seed" type="number" value=1212 /> seed <i>seed</i></label>
</form>`;
break;
case "UMAP":
return html`<form>
<label><input name="n_neighbors" type="range" min=2 max=100 value=10 /> number of neighbors <i>n_neighbors</i></label><br>
<label><input name="local_connectivity" type="range" min=1 max=10 value=1 /> local connectivity <i>local_conn</i></label><br>
<label><input name="min_dist" type="range" min=0.05 max=1.5 step=.05 value=0.2 /> minimum distance <i>min_dist</i></label><br />
<label><input name="seed" type="number" value=1212 /> seed <i>seed</i></label>
</form>`;
break;
case "TriMap":
return html`<form>
<label><input name="weight_adj" type="range" min=100 max=100000 value=100 /> scaling factor <i>weight_adj</i></label><br>
<label><input name="c" type="range" min=1 max=10 value=5 /> number of triplets multiplier <i>c</i></label><br />
<label><input name="seed" type="number" value=1212 /> seed <i>seed</i></label>
</form>`;
break;
case "LSP":
return html`<form>
<label><input name="neighbors" type="range" min=10 max=300 value=30 /> number of neighbors to consider <i>k</i></label><br>
<label><input name="control_points" type="range" min=10 max=100 value=20 /> number of controlpoints <i>c</i></label><br />
<label><input name="seed" type="number" value=1212 /> seed <i>seed</i></label>
</form>`;
case "SQDMDS":
return html`<form>
<label><input name="decay_start" type="range" min=0 max=1 step=.01 value="0.1" /> Percentage of iterations using exaggeration phase</label><br>
<label><input name="decay_cte" type="range" min=0 max=1 step=.01 value="0.31" /> Controls the decay of the learning parameter</label><br />
<label><input name="seed" type="number" value=1212 /> seed <i>seed</i></label>
</form>`;
break;
case "LDA":
return html`<form>
<label>
<select name="clusters">
<option value="group">group</option>
</select>
<i>class labels</i>
</label>
<br />
<label><input name="seed" type="number" value=1212 /> seed <i>seed</i></label>
</form>`;
break;
default:
return html`<form>
<label><input name="seed" type="number" value=1212 /> seed <i>seed</i></label>
</form>`;
break;
}
}
require.resolve("@saehrimnir/druidjs@^0.7.3")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.