Published
Edited
Jun 1, 2022
2 stars
test Feder And Observable
FederModule = import("https://unpkg.com/@zilliz/feder")
Feder = FederModule.Feder
containerId = `container-132568`
initDiv_html = {
return html`
<div style="width: 300px; height: 50px; background: blue; color: white;">
generate a new div
</div>
`
}
initDiv_d3 = {
const div = d3.create('div');
div.style("width", "300px")
.style("height", "50px")
.style("background", "red")
.style("color", "white")
const text = div.append("text")
text.text("hello~~~")
return div.node()
}
initDiv_element = {
const div = document.createElement('div');
div.style.width = '300px';
div.style.height = '50px';
div.style.background = "green";
div.style.color = "white";
div.innerHTML = `hi~~~`
return div
}
testDiv_feder = {
return html`
<div id="${containerId}" style="width: 300px; height: 100px; color: red;">
new div
</div>
`
}
// test_dom
d3.select(`#${containerId}`).style('color', 'blue')
// d3.select(`#${containerId}`).style('background', 'yellow')
test_dom_func = {
d3.select(`#${containerId}`).style('color', 'red');
d3.select(`#${containerId}`).style('background', 'yellow');
}
feder = new Feder({
filePath: 'https://assets.zilliz.com/faiss_ivf_flat_voc_17k_ab112eec72.index',
source: 'faiss',
domSelector: `#${containerId}`,
viewParams: {
mediaType: 'img',
mediaCallback,
projectSeed: 1235,
projectMethod: 'umap',
},
});
feder.overview()
// feder.searchRandTestVec()
runFeder = {
const { containerId } = params;
const div = d3.create("div");
div.attr("id", containerId);
setTimeout(() => {
const feder = new Feder(params);
// feder.overview();
feder.searchRandTestVec();
}, 0);
return div.node();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
