Public
Edited
Nov 30, 2022
FederModule = import("https://unpkg.com/@zilliz/feder")
d3 = require("d3")
FederIndex = FederModule.FederIndex
filePath = "https://assets.zilliz.com/faiss_ivf_flat_voc_17k_ab112eec72.index"
sourceType = "faiss"
arrayBuffer = await fetch(filePath).then(res => res.arrayBuffer())
test_id = Math.ceil(Math.random() * 10000)
test_q = federIndex.getVectorById(test_id)
searchParams = {
return { nprobe: 6, k: 8 };
}
visitedRecords = federIndex.getSearchRecords(test_q, searchParams)
nodes = visitedRecords.fineSearchRecords.map(({ id, distance }) => ({
id,
distance
})).filter(node => node.distance > 0)
width = 800
height = 400
r = 3
x = d3.scaleLinear(d3.extent(nodes, node => node.distance), [0, width])
y = height / 2
svg(nodes)
svg = (nodes) => {
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height]);
nodes.forEach((node) => {
node._x = x(node.distance);
node._y = y;
node.x = x(node.distance);
node.y = node.type > 0 ? y : y / 2;
node.type = Math.floor(Math.random() * 3);
});
const colors = ["#66c2a5", "#fc8d62", "#8da0cb"];
const nodesCircle = svg
.selectAll("circle")
.data(nodes)
.join("circle")
.attr("cx", (node) => node.x)
.attr("cy", (node) => node.y)
.attr("r", r)
.attr("fill", (node) => colors[node.type])
.attr("opacity", 0.5);
const simulation = d3
.forceSimulation(nodes)
.force(
"collision",
d3
.forceCollide()
.radius(r + 0.5)
.strength(1)
)
.force(
"y",
d3
.forceY()
.y((d) => d._y)
.strength((d) => 0.02 + 0.3 * d.type)
)
.force(
"x",
d3
.forceX()
.x((d) => d._x)
.strength(1)
)
.on("tick", () => {
nodes.forEach((node) => {
if (node.type <= 1) node.y = Math.min(node.y, y - 0.5 * r);
else node.y = Math.max(node.y, y + 0.5 * r);
});
nodesCircle.attr("cx", (d) => d.x);
nodesCircle.attr("cy", (d) => d.y);
})
.on("end", () => {
// const max_y =
// d3.min(
// nodes.filter((node) => node.type > 0),
// (node) => node.y
// ) -
// r * 3;
// nodes.forEach((node) => {
// if (node.type > 0) {
// // node.fx = node.x;
// // node.fy = node.y;
// } else {
// node.y = max_y
// }
// });
// d3.forceSimulation(nodes)
// .force(
// "collision",
// d3
// .forceCollide()
// .radius(r + 0.5)
// .strength(1)
// )
// .force(
// "y",
// d3
// .forceY()
// .y((d) => d._y)
// .strength((d) => 0.01 + d.type * 0.5)
// )
// .force(
// "x",
// d3
// .forceX()
// .x((d) => d._x)
// .strength(1)
// )
// .on("tick", () => {
// nodes.forEach((node) => {
// if (node.type <= 1) node.y = Math.min(node.y, y);
// else node.y = Math.max(node.y, y);
// });
// nodesCircle.attr("cx", (d) => d.x);
// nodesCircle.attr("cy", (d) => d.y);
// });
console.log(
nodes
.map((node) => Math.abs(node.x - node._x))
.reduce((acc, cur) => acc + cur) / nodes.length
);
});
return svg.node();
}
hnswFile = "https://assets.zilliz.com/hnswlib_hnsw_voc_17k_1f1dfd63a9.index"
hnswSource = 'hnswlib'
arrayBufferHnsw = fetch(hnswFile).then(res => res.arrayBuffer())
hnswFederIndex = new FederIndex(hnswSource, arrayBufferHnsw)
searchRecords = hnswFederIndex.getSearchRecords(test_q, { ef_search: 100, k: 8 })
nodesData_hnsw = {
const id2distance = {};
searchRecords.searchRecords.forEach((levelData) =>
levelData.forEach(([_, id, distance]) => {
if (distance > 0) id2distance[id] = distance;
})
);
return Object.entries(id2distance).map(([id, distance]) => ({
id,
distance
}));
}
svg(nodesData_hnsw)
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.
