2c:null 2d:["$","title",null,{"children":"zadu-js npm package demo | Jonathan Tarun Rajasekaran | Observable"}] 32:T407,rawData = { if (uploadedFile) { const text = await uploadedFile.text(); const rows = text.trim().split("\n").map(r => r.split(",")); // Detect header: skip if first row contains non-numeric values in feature cols const startRow = isNaN(parseFloat(rows[0][1])) ? 1 : 0; // First column = label (string or number), rest = numeric features const highDimData = []; const labels = []; for (let i = startRow; i < rows.length; i++) { const cols = rows[i]; if (cols.length < 2) continue; labels.push(isNaN(+cols[0]) ? cols[0] : +cols[0]); highDimData.push(cols.slice(1).map(Number)); } return { highDimData, labels, source: uploadedFile.name }; } // Default: load mnist-200-raw.json attached via the notebook's Files pane. // In observablehq.com: click the paperclip icon → attach mnist-200-raw.json. const json = await FileAttachment("mnist-200-raw.json").json(); return { highDimData: json.highDimData, labels: json.labels, source: "MNIST 200 (default)" }; } 33:T40b,{ const scoreColor = s => s >= 0.9 ? "#22c55e" : s >= 0.75 ? "#f59e0b" : "#ef4444"; const pct = s => (s * 100).toFixed(1) + "%"; return html`

${[ { label: "Trustworthiness", score: metrics.trustworthiness.score, desc: "Few false neighbors — points close in 2D were also close in high-D" }, { label: "Continuity", score: metrics.continuity.score, desc: "Few missing neighbors — points close in high-D remain close in 2D" } ].map(m => html`

${m.label}

${pct(m.score)}

${m.desc}

`)}

`; }34:T402,{ // Build point array with all attributes const points = embedding.map(([x, y], i) => ({ x, y, label: String(rawData.labels[i]), trustworthiness: metrics.trustworthiness.localScores[i], continuity: metrics.continuity.localScores[i] })); const isClass = colorBy === "class label"; return Plot.plot({ width: 640, height: 500, margin: 40, style: { fontFamily: "sans-serif" }, color: isClass ? { type: "ordinal", scheme: "tableau10", legend: true, label: "Digit" } : { type: "linear", scheme: qualityScheme, domain: [0, 1], legend: true, label: colorBy }, x: { axis: null }, y: { axis: null }, marks: [ Plot.dot(points, { x: "x", y: "y", fill: isClass ? "label" : colorBy, stroke: isClass ? "white" : "#555", strokeWidth: 0.5, r: 4, opacity: 0.9, tip: true, title: d => `Label: ${d.label}\nT: ${d.trustworthiness.toFixed(3)}\nC: ${d.continuity.toFixed(3)}` }) ] }); }35:T656,` --- ## Using zadu-js in your own project **Browser / Observable (ESM):** ```js import trustworthiness from "https://esm.sh/zadu-js/trustworthiness"; import continuity from "https://esm.sh/zadu-js/continuity"; const t = trustworthiness(highDimData, lowDimEmbedding, k); // Takes 3 parameters: // 1. High Dimensional Data // 2. Low Dimensional Embedding (Output of your DR algorithm) // 3. k - number of nearest neighbors to consider when computing these metrics // t.score → global score [0, 1] // t.localScores → per-point scores (same order as input) const c = continuity(highDimData, lowDimEmbedding, k); // Takes 3 parameters: // 1. High Dimensional Data // 2. Low Dimensional Embedding (Output of your DR algorithm) // 3. k - number of nearest neighbors to consider when computing these metrics // c.score → global score [0, 1] // c.localScores → per-point scores (same order as input) ``` **Node.js:** ```bash npm install zadu-js ``` ```js import ZADU from "zadu-js"; const { trustworthiness, continuity } = ZADU.trustworthinessAndContinuity( highDimData, lowDimEmbedding, k ); ``` **Metric reference:** | Metric | What it measures | Score | | --------------- | ------------------------------------------------- | -------------------- | | Trustworthiness | False neighbors (close in 2D but not in high-D) | 0–1, higher = better | | Continuity | Missing neighbors (close in high-D but not in 2D) | 0–1, higher = better | Source: [github.com/jonathantarun/zadu-js](https://github.com/jonathantarun/zadu-js) `36:[{"id":"ae9b62b03196616ae7bcee35f804baee81a1250c75734a4179d49af22f1c0ef36ba249b3cb1d354ac973f6a9dd7dcfc252c9258ec69a3e8ce4ecf5d6efcfed88","href":"https://static.observableusercontent.com/files/ae9b62b03196616ae7bcee35f804baee81a1250c75734a4179d49af22f1c0ef36ba249b3cb1d354ac973f6a9dd7dcfc252c9258ec69a3e8ce4ecf5d6efcfed88","name":"mnist-200-raw.json","type":"application/json","lastModified":1773960973416.855,"size":428131}] 30:{"id":"52c1da95fde0bdc9","slug":"zadu-js-npm-package-demo","title":"zadu-js npm package demo","thumbnail":"c9dc8ffd7d1bb8782cf79c268712bdf4c80361b72a5b8bd8b391308797294f16","access_level":"public","create_time":"$D2026-03-19T22:49:49.748Z","update_time":"$D2026-04-29T07:42:53.779Z","view_time":null,"first_public_time":"$D2026-03-19T23:20:42.862Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"5ec3b9da3072d3fc","login":"jonathan-tarun-rajasekaran","name":"Jonathan Tarun Rajasekaran","avatar_url":"https://avatars-next.observableusercontent.com/5ffdb5b6e80c894a06d81faac4cef3d45d2aaeeab855b98d3038aa100da21d2d","tier":"starter_2024","bio":""},"version":90,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c43a3832073d59e0","login":"jonathan-tarun-rajasekaran","name":"Jonathan Tarun Rajasekaran","avatar_url":"https://avatars-next.observableusercontent.com/7236be39798128ec4d4f3c6f7847b6409a07099a3c87825dcc50c3ec2860644e","tier":null,"bio":""}],"members":[{"type":"team","id":"5ec3b9da3072d3fc","login":"jonathan-tarun-rajasekaran","name":"Jonathan Tarun Rajasekaran","avatar_url":"https://avatars-next.observableusercontent.com/5ffdb5b6e80c894a06d81faac4cef3d45d2aaeeab855b98d3038aa100da21d2d","tier":"starter_2024","role":"editor"},{"type":"individual","id":"c43a3832073d59e0","login":"jonathan-tarun-rajasekaran","name":"Jonathan Tarun Rajasekaran","avatar_url":"https://avatars-next.observableusercontent.com/7236be39798128ec4d4f3c6f7847b6409a07099a3c87825dcc50c3ec2860644e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"zadu-js npm package demo","cells":[{"id":0,"value":"# zadu-js npm package demo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"[zadu-js](https://www.npmjs.com/package/zadu-js) - Check out the npm package here.\n\n## Other Links:\n- [ZADU.js Github Page](https://github.com/jonathantarun/zadu-js)\n- [Interactive Hyperparameter Tuning Application](https://jonathantarun.github.io/zadu-js/examples/visualize-tuning-digits.html)\n- [IEEE VIS 2025 Paper Explorer (Applying zadu.js on an existing application)](https://johnguerra.co/viz/ieeevis2025Papers/)\n- [Presentation Slides](https://docs.google.com/presentation/d/1PgVe_bU2bJ2hfMafGDBirMAHrGfVz6dmKQw_r-WhaxE/edit?usp=sharing)\n- [Northeastern University Oakland Research Showcase Poster](https://github.com/jonathantarun/zadu-js/blob/main/ZADU.js%20Oakland%20Showcase%20Final%20(1).pdf)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"### How to import:\n\n1. Trustworthiness: ``` trustworthiness = (await import(\"https://esm.sh/zadu-js/trustworthiness\")).default ``` \n\n2. Continuity: ``` continuity = (await import(\"https://esm.sh/zadu-js/continuity\")).default```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"Upload your own data or use the MNIST 200-sample default.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"viewof uploadedFile = Inputs.file({ label: \"Upload CSV (optional — leave blank for MNIST default)\", accept: \".csv\" })\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"**Dataset**: ${rawData.source} — ${rawData.highDimData.length} samples × ${rawData.highDimData[0].length} dimensions, ${new Set(rawData.labels).size} classes`\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"viewof nNeighbors = Inputs.range([5, 50], { step: 1, value: 15, label: \"n_neighbors (UMAP)\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"viewof minDist = Inputs.range([0.01, 0.99], { step: 0.01, value: 0.1, label: \"min_dist (UMAP)\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"viewof kMetric = Inputs.range([5, 30], { step: 1, value: 10, label: \"k (neighborhood size for T & C)\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"embedding = {\n const { Matrix, UMAP } = await druid;\n const X = Matrix.from(rawData.highDimData);\n const umap = new UMAP(X, {\n n_neighbors: nNeighbors,\n min_dist: minDist,\n d: 2,\n seed: 42\n });\n const emb = umap.transform();\n const N = emb.shape[0];\n return Array.from({ length: N }, (_, i) => [emb.entry(i, 0), emb.entry(i, 1)]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"metrics = {\n const t = trustworthiness(rawData.highDimData, embedding, kMetric);\n const c = continuity(rawData.highDimData, embedding, kMetric);\n return { trustworthiness: t, continuity: c };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"## Global Scores","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"viewof colorBy = Inputs.radio(\n [\"class label\", \"trustworthiness\", \"continuity\"],\n { value: \"class label\", label: \"Color points by\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"viewof qualityScheme = Inputs.radio(\n [\"viridis\", \"greys\"],\n { value: \"viridis\", label: \"Quality color scale\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"trustworthiness = (await import(\"https://esm.sh/zadu-js/trustworthiness\")).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"continuity = (await import(\"https://esm.sh/zadu-js/continuity\")).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"druid = import(\"https://esm.sh/@saehrimnir/druidjs\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 31:"$30:body"