25:["$","title",null,{"children":"AnuranSet | Pratt Institute | Observable"}] 49:Tcd8,//Transformer AST — Per-Species Performance vs Dataset Imbalance imbalancePerfPlot = { const plot = Plot.plot({ title: "Transformer AST — Per-Species Performance vs Dataset Imbalance", width: 850, height: 520, marginTop:60, marginLeft: 70, marginBottom: 60, grid: true, // WHITE THEME style: { background: "white", color: "black", fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif", fontSize: 13 }, x: { label: "Number of 3s samples per species", type: "linear" }, y: { label: "F1 score (validation)", domain: [0, 1] }, color: { legend: true, label: "Species rarity", domain: ["rare", "frequent", "common"], range: [ frogColors.get("rare"), frogColors.get("frequent"), frogColors.get("common") ] }, marks: [ Plot.dot(dataWithRarity, { x: "n_samples", y: "f1", fill: "rarity", r: 10, opacity: 0.9, tip: false }) ] }); // Fix title and legend colors for white theme setTimeout(() => { const title = plot.querySelector("h2"); if (title) { title.style.color = "black"; } // Target all text elements in the entire plot const allText = plot.querySelectorAll("text"); allText.forEach(text => { text.setAttribute("fill", "black"); text.style.fill = "black"; }); // Also target any spans or divs that might contain legend text plot.querySelectorAll("span, div").forEach(el => { if (el.textContent.trim()) { el.style.color = "black"; } }); }, 0); // Attach each row to its circle, by index const circles = plot.querySelectorAll("circle"); circles.forEach((circle, i) => { circle.__row = dataWithRarity[i]; }); // Shared custom tooltip (white bg, black text) let tooltip = document.querySelector(".custom-heatmap-tooltip"); if (!tooltip) { tooltip = document.body.appendChild(document.createElement("div")); tooltip.className = "custom-heatmap-tooltip"; Object.assign(tooltip.style, { position: "fixed", pointerEvents: "none", zIndex: 9999, background: "white", color: "black", border: "1px solid black", borderRadius: "4px", padding: "6px 8px", fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif", fontSize: "12px", boxShadow: "0 4px 10px rgba(0,0,0,0.4)", display: "none", whiteSpace: "pre" }); } function hideTooltip() { tooltip.style.display = "none"; } // Tooltip on dot hover plot.addEventListener("pointermove", (event) => { const { target, clientX, clientY } = event; if (target.tagName !== "circle" || !target.__row) { hideTooltip(); return; } const d = target.__row; tooltip.textContent = `${d.label_name}\n` + `Samples: ${d.n_samples}\n` + `F1: ${d.f1.toFixed(3)}\n` + `Rarity: ${d.rarity}`; tooltip.style.display = "block"; tooltip.style.left = clientX + 12 + "px"; tooltip.style.top = clientY + 12 + "px"; }); plot.addEventListener("pointerleave", hideTooltip); return plot; }4a:Tbcd,//Species F1 scores f1StripPlot = { const plot = Plot.plot({ title: "Species F1 scores", width: 980, height: 220, marginBottom: 120, marginLeft: 60, // WHITE THEME style: { background: "white", color: "black", fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif", fontSize: 13 }, x: { label: "Species", tickRotate: -90 }, y: { ticks: ["F1"], label: null }, color: { type: "linear", label: "F1 score", domain: [0, 1], range: ["#43123F", "#7E0950", "#EC940C", "#C4C600"], // poison-frog gradient legend: true }, marks: [ Plot.cell(heatData, { x: "label_name", y: () => "F1", fill: "f1", inset: 1, tip: false }) ] }); // Title and legend colors for white theme setTimeout(() => { const title = plot.querySelector("h2"); if (title) { title.style.color = "black"; } // Target all text elements in the entire plot const allText = plot.querySelectorAll("text"); allText.forEach(text => { text.setAttribute("fill", "black"); text.style.fill = "black"; }); // Also target any spans or divs that might contain legend text plot.querySelectorAll("span, div").forEach(el => { if (el.textContent.trim()) { el.style.color = "black"; } }); }, 0); // Attach each row to its rect, by index const rects = plot.querySelectorAll("rect"); rects.forEach((rect, i) => { rect.__row = heatData[i]; // { label_name, f1, n_samples, ... } }); // Shared custom tooltip (white bg, black text) let tooltip = document.querySelector(".custom-heatmap-tooltip"); if (!tooltip) { tooltip = document.body.appendChild(document.createElement("div")); tooltip.className = "custom-heatmap-tooltip"; Object.assign(tooltip.style, { position: "fixed", pointerEvents: "none", zIndex: 9999, background: "white", color: "black", border: "1px solid black", borderRadius: "4px", padding: "6px 8px", fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif", fontSize: "12px", boxShadow: "0 4px 10px rgba(0,0,0,0.4)", display: "none", whiteSpace: "pre" }); } function hideTooltip() { tooltip.style.display = "none"; } // Tooltip on cell hover plot.addEventListener("pointermove", (event) => { const { target, clientX, clientY } = event; if (target.tagName !== "rect" || !target.__row) { hideTooltip(); return; } const d = target.__row; tooltip.textContent = `${d.label_name}\n` + `F1: ${d.f1.toFixed(3)}\n` + `Samples: ${d.n_samples}`; tooltip.style.display = "block"; tooltip.style.left = clientX + 12 + "px"; tooltip.style.top = clientY + 12 + "px"; }); plot.addEventListener("pointerleave", hideTooltip); return plot; }4b:Tf51,// Voronoi Plot Species Support vs Performance speciesVoronoiPlot = { const plot = Plot.plot({ title: "Species support vs performance", width: 900, height: 520, marginTop: 60, marginLeft: 80, marginBottom: 60, grid: true, // WHITE THEME style: { background: "white", color: "black", fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif", fontSize: 13 }, x: { label: "Species index", tickFormat: d => d }, y: { label: "Number of 3s samples (log scale)", type: "log" }, color: { type: "linear", domain: [0, 1], range: frogGradient, label: "F1 score", legend: true }, marks: [ // Voronoi regions colored by F1 Plot.voronoi(speciesStatsWithIndex, { x: "class_index", y: "n_samples", fill: "f1", stroke: "#ddd", strokeOpacity: 0.5, tip: false // custom tooltip instead }), // Black dots at centers Plot.dot(speciesStatsWithIndex, { x: "class_index", y: "n_samples", r: 4, fill: "black", fillOpacity: 1, tip: false }), // Black labels for worst F1 species Plot.text(worstSpecies, { x: "class_index", y: d => d.n_samples, text: "label_name", dy: -8, fontSize: 11, fill: "black" }) ] }); // Fix title and legend colors for white theme setTimeout(() => { const title = plot.querySelector("h2"); if (title) { title.style.color = "black"; } // Target all text elements in the entire plot const allText = plot.querySelectorAll("text"); allText.forEach(text => { text.setAttribute("fill", "black"); text.style.fill = "black"; }); // Also target any spans or divs that might contain legend text plot.querySelectorAll("span, div").forEach(el => { if (el.textContent.trim()) { el.style.color = "black"; } }); }, 0); // Attach the correct row to each dot, by INDEX // (1 circle per speciesStatsWithIndex row) const circles = plot.querySelectorAll("circle"); circles.forEach((circle, i) => { circle.__row = speciesStatsWithIndex[i]; // {label_name, class_index, n_samples, f1, ...} }); // Custom tooltip let tooltip = document.querySelector(".custom-heatmap-tooltip"); if (!tooltip) { tooltip = document.body.appendChild(document.createElement("div")); tooltip.className = "custom-heatmap-tooltip"; Object.assign(tooltip.style, { position: "fixed", pointerEvents: "none", zIndex: 9999, background: "white", color: "black", border: "1px solid black", borderRadius: "4px", padding: "6px 8px", fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif", fontSize: "12px", boxShadow: "0 4px 10px rgba(0,0,0,0.4)", display: "none", whiteSpace: "pre" }); } function hideTooltip() { tooltip.style.display = "none"; } // Tooltip on dot hover plot.addEventListener("pointermove", (event) => { const { target, clientX, clientY } = event; if (target.tagName !== "circle" || !target.__row) { hideTooltip(); return; } const d = target.__row; const label = d.label_name ?? "(unknown)"; const idx = d.class_index; const samples = d.n_samples; const f1 = d.f1 != null ? d.f1.toFixed(3) : "N/A"; tooltip.textContent = `${label}\n` + `Index: ${idx}\n` + `Samples: ${samples}\n` + `F1: ${f1}`; tooltip.style.display = "block"; tooltip.style.left = clientX + 12 + "px"; tooltip.style.top = clientY + 12 + "px"; }); plot.addEventListener("pointerleave", hideTooltip); return plot; }4c:Tf84,//Predicted vs True Species Confusion matrix confusionMatrixPlot = { const plot = Plot.plot({ title: "Predicted vs True Species Confusion matrix", width: 1000, height: 900, marginLeft: 60, marginRight: 90, marginTop: 40, marginBottom: 60, padding: 0, // White theme style: { background: "white", color: "black", fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif", fontSize: 13 }, x: { label: "Predicted species (j)", tickRotate: -90, tickSize: 0 }, y: { label: "True species present (i)", tickSize: 0 }, color: { type: "linear", range: frogGradient, label: "P(predicted j | true i present)", legend: true }, marks: [ Plot.cell(confusionMatrixData, { x: "j", y: "i", fill: "value", inset: 0, tip: false // we'll use the custom tooltip instead }) ] }); // Fix title and legend colors for white theme setTimeout(() => { const title = plot.querySelector("h2"); if (title) { title.style.color = "black"; } // Target all text elements in the entire plot const allText = plot.querySelectorAll("text"); allText.forEach(text => { text.setAttribute("fill", "black"); text.style.fill = "black"; }); // Also target any spans or divs that might contain legend text plot.querySelectorAll("span, div").forEach(el => { if (el.textContent.trim()) { el.style.color = "black"; } }); }, 0); // Attach original rows to each rect (assumes 1:1 order) const rects = plot.querySelectorAll("rect"); rects.forEach((rect, i) => { rect.__row = confusionMatrixData[i]; }); // Shared tooltip let tooltip = document.querySelector(".custom-heatmap-tooltip"); if (!tooltip) { tooltip = document.body.appendChild(document.createElement("div")); tooltip.className = "custom-heatmap-tooltip"; Object.assign(tooltip.style, { position: "fixed", pointerEvents: "none", zIndex: 9999, background: "white", color: "black", border: "1px solid black", borderRadius: "4px", padding: "6px 8px", fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif", fontSize: "12px", boxShadow: "0 4px 10px rgba(0,0,0,0.4)", display: "none", whiteSpace: "pre" }); } function hideTooltip() { tooltip.style.display = "none"; } plot.addEventListener("pointermove", (event) => { const { target, clientX, clientY } = event; if (target.tagName !== "rect" || !target.__row) { hideTooltip(); return; } const d = target.__row; const pStr = d.value != null ? d.value.toFixed(3) : "N/A"; tooltip.textContent = `True: ${d.true_species}\n` + `Pred: ${d.pred_species}\n` + `P = ${pStr}`; tooltip.style.display = "block"; tooltip.style.left = clientX + 12 + "px"; tooltip.style.top = clientY + 12 + "px"; }); plot.addEventListener("pointerleave", hideTooltip); // NEW: Zoom & pan with d3-zoom const svg = plot.querySelector("svg"); // Try to grab the main plot group (fallback to first if needed) const g = svg.querySelector("g[aria-label='plot']") || svg.querySelector("g"); const zoom = d3.zoom() .scaleExtent([1, 8]) // min/max zoom .translateExtent([[0, 0], [1000, 900]]) // limit panning to canvas-ish area .on("zoom", (event) => { // Apply transform to the plot group const t = event.transform; g.setAttribute("transform", `translate(${t.x},${t.y}) scale(${t.k})`); }); d3.select(svg).call(zoom); // Double click to reset zoom svg.addEventListener("dblclick", () => { d3.select(svg) .transition() .duration(250) .call(zoom.transform, d3.zoomIdentity); }); return plot; }4d:Tcbb,//HeatMap - Activity Site activityHeatmap = { const plot = Plot.plot({ title: "Species Activity across Biomes", width: 900, height: speciesFilter === "All species" ? 820 : 260, marginLeft: 120, marginBottom: 80, marginRight: 100, // WHITE BG + BLACK TEXT style: { background: "white", color: "black", fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif", fontSize: 13 }, x: { label: "Site", tickRotate: -45, domain: siteFilter === "All sites" ? uniqueSites : [siteFilter] }, y: { label: "Species", domain: speciesFilter === "All species" ? uniqueSpecies : [speciesFilter] }, color: { type: "linear", range: frogGradient, label: "Activity rate", legend: true }, grid: true, marks: [ Plot.cell(filteredActivityData, { x: "site", y: "species", fill: "activity_rate", tip: false, inset: 1 }) ] }); // Fix title and legend colors for white theme setTimeout(() => { const title = plot.querySelector("h2"); if (title) { title.style.color = "black"; } // Target all text elements in the entire plot const allText = plot.querySelectorAll("text"); allText.forEach(text => { text.setAttribute("fill", "black"); text.style.fill = "black"; }); // Also target any spans or divs that might contain legend text plot.querySelectorAll("span, div").forEach(el => { if (el.textContent.trim()) { el.style.color = "black"; } }); }, 0); // Attach original data rows to each rect const rects = plot.querySelectorAll("rect"); rects.forEach((rect, i) => { rect.__row = filteredActivityData[i]; // { species, site, activity_rate, ... } }); // Custom tooltip let tooltip = document.querySelector(".custom-heatmap-tooltip"); if (!tooltip) { tooltip = document.body.appendChild(document.createElement("div")); tooltip.className = "custom-heatmap-tooltip"; Object.assign(tooltip.style, { position: "fixed", pointerEvents: "none", zIndex: 9999, background: "white", color: "black", border: "1px solid black", borderRadius: "4px", padding: "6px 8px", fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif", fontSize: "12px", boxShadow: "0 4px 10px rgba(0,0,0,0.4)", display: "none", whiteSpace: "pre" }); } function hideTooltip() { tooltip.style.display = "none"; } plot.addEventListener("pointermove", (event) => { const { target, clientX, clientY } = event; if (target.tagName !== "rect" || !target.__row) { hideTooltip(); return; } const d = target.__row; const activityPct = (d.activity_rate * 100).toFixed(2); tooltip.textContent = `Species: ${d.species}\n` + `Site: ${d.site}\n` + `Activity: ${activityPct}%`; tooltip.style.display = "block"; tooltip.style.left = clientX + 12 + "px"; tooltip.style.top = clientY + 12 + "px"; }); plot.addEventListener("pointerleave", hideTooltip); return plot; }4e:Td0f,//HeatMap Species Activity speciesTODHeatmap = { const plot = Plot.plot({ title: "Species Activity across Time of Day", width: 850, height: speciesFilter === "All species" ? 900 : 250, marginLeft: 140, marginBottom: 80, inset: 12, // WHITE BG + BLACK TEXT style: { background: "white", color: "black", fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif", fontSize: 13 }, x: { label: "Time of day", domain: todOrder, tickRotate: -25 }, y: { label: "Species", domain: speciesFilter === "All species" ? uniqueSpecies2 : [speciesFilter] }, color: { type: "linear", range: frogGradient, label: "Activity rate (fraction of clips)", legend: true }, grid: true, marks: [ Plot.cell(filteredActivityTOD, { x: "time_of_day", y: "species", fill: "activity_rate", inset: 1, tip: false // we use our own tooltip }) ] }); // Fix title and legend colors for white theme setTimeout(() => { const title = plot.querySelector("h2"); if (title) { title.style.color = "black"; } // Target all text elements in the entire plot const allText = plot.querySelectorAll("text"); allText.forEach(text => { text.setAttribute("fill", "black"); text.style.fill = "black"; }); // Also target any spans or divs that might contain legend text plot.querySelectorAll("span, div").forEach(el => { if (el.textContent.trim()) { el.style.color = "black"; } }); }, 0); // Attach original data rows to each rect const rects = plot.querySelectorAll("rect"); rects.forEach((rect, i) => { rect.__row = filteredActivityTOD[i]; // original row: {species, time_of_day, activity_rate, ...} }); // Custom tooltip let tooltip = document.querySelector(".custom-heatmap-tooltip"); if (!tooltip) { tooltip = document.body.appendChild(document.createElement("div")); tooltip.className = "custom-heatmap-tooltip"; Object.assign(tooltip.style, { position: "fixed", pointerEvents: "none", zIndex: 9999, background: "white", color: "black", border: "1px solid black", borderRadius: "4px", padding: "6px 8px", fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif", fontSize: "12px", boxShadow: "0 4px 10px rgba(0,0,0,0.4)", display: "none", whiteSpace: "pre" // preserve newlines }); } function hideTooltip() { tooltip.style.display = "none"; } plot.addEventListener("pointermove", (event) => { const { target, clientX, clientY } = event; if (target.tagName !== "rect" || !target.__row) { hideTooltip(); return; } const d = target.__row; // ✅ your original data row const activityPct = (d.activity_rate * 100).toFixed(1); tooltip.textContent = `Species: ${d.species}\n` + `Time of day: ${d.time_of_day}\n` + `Activity: ${activityPct}%`; tooltip.style.display = "block"; tooltip.style.left = clientX + 12 + "px"; tooltip.style.top = clientY + 12 + "px"; }); plot.addEventListener("pointerleave", hideTooltip); return plot; }4f:Tddb, //Top 10 Active Species todLinePlot = { const plot = Plot.plot({ title: "Top 10 Active Species vs Time of Day", width: 900, height: 600, marginRight: 150, marginBottom: 60, // WHITE THEME style: { background: "white", color: "black", fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif", fontSize: 13 }, grid: true, x: { label: "Time of day", domain: ["dawn", "dusk", "night"] }, y: { label: "Activity rate", domain: [0, d3.max(filteredTodDataa, d => d.activity_rate)] }, color: { range: frogGradient, legend: true, label: "Species" }, marks: [ // Line (no tooltip) Plot.line(filteredTodDataa, { x: "time_of_day", y: "activity_rate", stroke: "species", marker: "circle", strokeWidth: 2, tip: false }), // Dots Plot.dot(filteredTodDataa, { x: "time_of_day", y: "activity_rate", fill: "species", r: 4, tip: false }) ] }); // Fix title and legend colors for white theme setTimeout(() => { const title = plot.querySelector("h2"); if (title) { title.style.color = "black"; } // Target all text elements in the entire plot const allText = plot.querySelectorAll("text"); allText.forEach(text => { text.setAttribute("fill", "black"); text.style.fill = "black"; }); // Also target any spans or divs that might contain legend text plot.querySelectorAll("span, div").forEach(el => { if (el.textContent.trim()) { el.style.color = "black"; } }); }, 0); // Attacing correct data rows const markGroups = plot.querySelectorAll("g"); const dotGroup = markGroups[markGroups.length - 1]; // last = dots const dotCircles = dotGroup.querySelectorAll("circle"); dotCircles.forEach((circle, i) => { circle.__row = filteredTodDataa[i]; // each dot <- its row }); // Tooltip let tooltip = document.querySelector(".custom-heatmap-tooltip"); if (!tooltip) { tooltip = document.body.appendChild(document.createElement("div")); tooltip.className = "custom-heatmap-tooltip"; Object.assign(tooltip.style, { position: "fixed", pointerEvents: "none", zIndex: 9999, background: "white", color: "black", border: "1px solid black", borderRadius: "4px", padding: "6px 8px", fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif", fontSize: "12px", boxShadow: "0 4px 10px rgba(0,0,0,0.4)", display: "none", whiteSpace: "pre" }); } function hideTooltip() { tooltip.style.display = "none"; } plot.addEventListener("pointermove", (event) => { const { target, clientX, clientY } = event; // Only respond to our dot circles with attached data if (target.tagName !== "circle" || !target.__row) { hideTooltip(); return; } const d = target.__row; // ✅ now the correct row from filteredTodDataa const pct = (d.activity_rate * 100).toFixed(1); tooltip.textContent = `Species: ${d.species}\n` + `Time of day: ${d.time_of_day}\n` + `Activity: ${pct}%`; tooltip.style.display = "block"; tooltip.style.left = clientX + 12 + "px"; tooltip.style.top = clientY + 12 + "px"; }); plot.addEventListener("pointerleave", hideTooltip); return plot; }50:T18bc,// UMAP Embedding Plot umapZoomPlot = { const width = 920; const height = 720; const margin = {top: 40, right: 40, bottom: 60, left: 60}; // Outer container: matches activityHeatmap style const container = document.createElement("div"); Object.assign(container.style, { display: "flex", flexDirection: "column", alignItems: "center", gap: "10px", background: "black", color: "white", fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif", fontSize: "13px", paddingBottom: "10px" }); // TITLE const title = document.createElement("h2"); title.textContent = "UMAP Projection of Species Embeddings"; Object.assign(title.style, { margin: "10px 0 0 0", fontWeight: "600", color: "white", fontSize: "16px" }); container.appendChild(title); // SVG ROOT const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .style("background", "black") .style("border", "1px solid #444"); container.appendChild(svg.node()); // SCALES const xExtent = d3.extent(umapData, d => d.x); const yExtent = d3.extent(umapData, d => d.y); const xScale = d3.scaleLinear().domain(xExtent).range([0, innerWidth]).nice(); const yScale = d3.scaleLinear().domain(yExtent).range([innerHeight, 0]).nice(); const gRoot = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // AXES (white text, subtle grid-like style) const xAxis = gRoot.append("g") .attr("transform", `translate(0,${innerHeight})`) .call(d3.axisBottom(xScale).ticks(10)); const yAxis = gRoot.append("g") .call(d3.axisLeft(yScale).ticks(10)); xAxis.selectAll("text").attr("fill", "white"); yAxis.selectAll("text").attr("fill", "white"); xAxis.selectAll("line,path").attr("stroke", "rgba(255,255,255,0.3)"); yAxis.selectAll("line,path").attr("stroke", "rgba(255,255,255,0.3)"); xAxis.append("text") .attr("x", innerWidth / 2) .attr("y", 40) .attr("fill", "white") .attr("text-anchor", "middle") .style("font-size", "12px") .text("UMAP dimension 1"); yAxis.append("text") .attr("x", -innerHeight / 2) .attr("y", -45) .attr("transform", "rotate(-90)") .attr("fill", "white") .attr("text-anchor", "middle") .style("font-size", "12px") .text("UMAP dimension 2"); // COLOR SCALE (continuous, uses frogGradient) const speciesExtent = d3.extent(umapData, d => d.species); const colorScale = d3.scaleLinear() .domain(speciesExtent) .range([frogGradient[0], frogGradient[frogGradient.length - 1]]); // DOTS const gZoom = gRoot.append("g").attr("class", "zoom-layer"); const dots = gZoom.append("g") .selectAll("circle") .data(umapData) .join("circle") .attr("cx", d => xScale(d.x)) .attr("cy", d => yScale(d.y)) .attr("r", 3) .attr("fill", d => colorScale(d.species)) .attr("fill-opacity", 0.7); // TOOLTIP let tooltip = document.querySelector(".custom-heatmap-tooltip"); if (!tooltip) { tooltip = document.body.appendChild(document.createElement("div")); tooltip.className = "custom-heatmap-tooltip"; Object.assign(tooltip.style, { position: "fixed", pointerEvents: "none", zIndex: 9999, background: "white", color: "black", border: "1px solid black", borderRadius: "4px", padding: "6px 8px", fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif", fontSize: "12px", boxShadow: "0 4px 10px rgba(0,0,0,0.4)", display: "none", whiteSpace: "pre" }); } const hideTooltip = () => { tooltip.style.display = "none"; }; dots.on("pointermove", (event, d) => { legendSwatch.style.background = "transparent"; legendValue.textContent = "Hover a point"; legendSwatch.style.background = colorScale(d.species); legendValue.textContent = `Species ${d.species}`; const [clientX, clientY] = [event.clientX, event.clientY]; tooltip.textContent = `Species ID: ${d.species}\n` + `UMAP x: ${d.x.toFixed(3)}\n` + `UMAP y: ${d.y.toFixed(3)}`; tooltip.style.display = "block"; tooltip.style.left = clientX + 12 + "px"; tooltip.style.top = clientY + 12 + "px"; }); dots.on("pointerleave", hideTooltip); // ZOOM (scroll / drag / dblclick reset) const zoomed = event => { const transform = event.transform; const zx = transform.rescaleX(xScale); const zy = transform.rescaleY(yScale); dots.attr("cx", d => zx(d.x)).attr("cy", d => zy(d.y)); xAxis.call(d3.axisBottom(zx).ticks(10)); yAxis.call(d3.axisLeft(zy).ticks(10)); xAxis.selectAll("text").attr("fill", "white"); yAxis.selectAll("text").attr("fill", "white"); xAxis.selectAll("line,path").attr("stroke", "rgba(255,255,255,0.3)"); yAxis.selectAll("line,path").attr("stroke", "rgba(255,255,255,0.3)"); }; const zoom = d3.zoom().scaleExtent([0.5, 20]).on("zoom", zoomed); svg.call(zoom); svg.on("dblclick.zoom-reset", () => { svg.transition().duration(250).call(zoom.transform, d3.zoomIdentity); }); // LEGEND that makes sense (categorical hover legend) const legendContainer = document.createElement("div"); Object.assign(legendContainer.style, { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "center", gap: "10px", marginTop: "4px", fontSize: "12px" }); const legendLabel = document.createElement("span"); legendLabel.textContent = "Color = Species (categorical)"; legendLabel.style.color = "white"; const legendSwatch = document.createElement("div"); Object.assign(legendSwatch.style, { width: "14px", height: "14px", borderRadius: "3px", border: "1px solid #666", background: "transparent" }); const legendValue = document.createElement("span"); legendValue.textContent = "Hover a point"; legendValue.style.color = "white"; legendValue.style.opacity = "0.9"; legendContainer.appendChild(legendLabel); legendContainer.appendChild(legendSwatch); legendContainer.appendChild(legendValue); container.appendChild(legendContainer); return container; } 51:[{"id":"5a34fc044af873062da5ea57682ab4c65b71665cf8e8b346001070a03c621d80ea87e5d87cece90f407c601dc61f1119989fa109570bf2ff543053923bfcb4a7","href":"https://static.observableusercontent.com/files/5a34fc044af873062da5ea57682ab4c65b71665cf8e8b346001070a03c621d80ea87e5d87cece90f407c601dc61f1119989fa109570bf2ff543053923bfcb4a7","name":"anuraset_f1_heatmap.csv","type":"text/csv","lastModified":1765137297869.752,"size":1110},{"id":"5597707276cbe7db8512258aa43e9380029cbea94457b92a2a725e4c2620f67cb19b83ba540f561c4e41cebeba40f2a4b61b8d518645a47c4bf752f3dbb2ce25","href":"https://static.observableusercontent.com/files/5597707276cbe7db8512258aa43e9380029cbea94457b92a2a725e4c2620f67cb19b83ba540f561c4e41cebeba40f2a4b61b8d518645a47c4bf752f3dbb2ce25","name":"anuraset_per_class_f1_counts.csv","type":"text/csv","lastModified":1765135182366.015,"size":1110},{"id":"6f00b21fab851b4ced3cdd4a2bb2e4b51c8a26e508e2d28b17160d4c42de2f52acdf2f9323b813e3ec6d7b7fb81248ad2de43260f90a4b4427d4d9c41daa6809","href":"https://static.observableusercontent.com/files/6f00b21fab851b4ced3cdd4a2bb2e4b51c8a26e508e2d28b17160d4c42de2f52acdf2f9323b813e3ec6d7b7fb81248ad2de43260f90a4b4427d4d9c41daa6809","name":"activity_heatmap.csv","type":"text/csv","lastModified":1765145552936.176,"size":1803},{"id":"b1796a7b18bffa4f3bdb789af4613cc7f70dcbfc968e8396a88db902e8c66bbc0620b8f27ae48b55e12694cbaacab2129b04bb54b3ae79d4f19fa1a5efd621c9","href":"https://static.observableusercontent.com/files/b1796a7b18bffa4f3bdb789af4613cc7f70dcbfc968e8396a88db902e8c66bbc0620b8f27ae48b55e12694cbaacab2129b04bb54b3ae79d4f19fa1a5efd621c9","name":"confusion_matrix.json","type":"application/json","lastModified":1765140149881.839,"size":157769},{"id":"c21cb6343868dc9610c114ec191f67687ac990d9fe8349e4f554d64a093108280a6913e70deef01818f078bdc3be366b637113216d4a5c60469ca6a6b447deb4","href":"https://static.observableusercontent.com/files/c21cb6343868dc9610c114ec191f67687ac990d9fe8349e4f554d64a093108280a6913e70deef01818f078bdc3be366b637113216d4a5c60469ca6a6b447deb4","name":"activity_tod.csv","type":"text/csv","lastModified":1765154863494.936,"size":3765},{"id":"c21cb6343868dc9610c114ec191f67687ac990d9fe8349e4f554d64a093108280a6913e70deef01818f078bdc3be366b637113216d4a5c60469ca6a6b447deb4","href":"https://static.observableusercontent.com/files/c21cb6343868dc9610c114ec191f67687ac990d9fe8349e4f554d64a093108280a6913e70deef01818f078bdc3be366b637113216d4a5c60469ca6a6b447deb4","name":"species_activity_time_of_day_long.csv","type":"text/csv","lastModified":1765149983109.819,"size":3765},{"id":"fa89ee5dcce8134dd6e18db29d8c98d401683e6f4f905d6aad72a3ca0bcb9442019edfd2aa2dc21ccc8c52f8851416552950d05cf86832e8db2ac2664cb945ee","href":"https://static.observableusercontent.com/files/fa89ee5dcce8134dd6e18db29d8c98d401683e6f4f905d6aad72a3ca0bcb9442019edfd2aa2dc21ccc8c52f8851416552950d05cf86832e8db2ac2664cb945ee","name":"umap_points.csv","type":"text/csv","lastModified":1765411599733.824,"size":109093}] 29:{"id":"fe8c99e9d6d7cf03","slug":null,"title":"AnuranSet","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"unlisted","create_time":"$D2025-12-07T19:18:27.502Z","update_time":"$D2026-01-26T01:17:21.910Z","view_time":null,"first_public_time":"$D2025-12-11T15:57:52.808Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"44015307d2ad490c","login":"pratt-institute2","name":"Pratt Institute","avatar_url":"https://avatars-next.observableusercontent.com/fee2954d1b381a3f0e74180c6da12d0cad7769a96c7b5683d5698ea87da917dd","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":774,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e0ec7897edd6a12d","login":"nishashrinivasan","name":"Nishashrinivasan","avatar_url":"https://avatars-next.observableusercontent.com/1479e572a0a90e36ddaf7e0d7cf2e661c14329011e853e5699bcf5755a9d0cc8","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"e0ec7897edd6a12d","login":"nishashrinivasan","name":"Nishashrinivasan","avatar_url":"https://avatars-next.observableusercontent.com/1479e572a0a90e36ddaf7e0d7cf2e661c14329011e853e5699bcf5755a9d0cc8","tier":null,"role":"editor"},{"type":"team","id":"44015307d2ad490c","login":"pratt-institute2","name":"Pratt Institute","avatar_url":"https://avatars-next.observableusercontent.com/fee2954d1b381a3f0e74180c6da12d0cad7769a96c7b5683d5698ea87da917dd","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"AnuranSet","cells":[{"id":0,"value":"# AnuranSet","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"anuraset_per_class_f1_counts = await FileAttachment(\"anuraset_per_class_f1_counts.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"anuraset_per_class_f1_counts","database":"$undefined"},{"id":5,"value":"data = FileAttachment(\"anuraset_per_class_f1_counts.csv\").csv({typed: true})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"data.slice(0, 5)\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"dataWithRarity = data.map(d => {\n let rarity;\n if (d.n_samples < 50) rarity = \"rare\";\n else if (d.n_samples < 500) rarity = \"frequent\";\n else rarity = \"common\";\n\n return {...d, rarity};\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"dataWithRarity[0]\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"\nfrogColors = new Map([\n [\"rare\", \"#43123F\"], // Plum Purple (danger / rare)\n [\"frequent\", \"#7E0950\"], // Deep Magenta (active but unstable)\n [\"common\", \"#C4C600\"] // Goldenrod Yellow (toxic warning / dominant)\n])\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"anuraset_f1_heatmap = await FileAttachment(\"anuraset_f1_heatmap.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"anuraset_f1_heatmap","database":"$undefined"},{"id":54,"value":"speciesStats = FileAttachment(\"anuraset_per_class_f1_counts.csv\").csv({typed: true})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"// Order species by F1 (lowest → highest), like your Python df_heat\nheatData = speciesStats\n .filter(d => Number.isFinite(d.f1))\n .toSorted((a, b) => a.f1 - b.f1)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"speciesStatsWithIndex = speciesStats\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"worstSpecies = speciesStatsWithIndex\n .filter(d => Number.isFinite(d.f1))\n .toSorted((a, b) => a.f1 - b.f1)\n .slice(0, 5)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"frogGradient = [\"#43123F\", \"#7E0950\", \"#EC940C\", \"#C4C600\"]\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"d3.version\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"confusionMatrixData = FileAttachment(\"confusion_matrix.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"activity_heatmap = await FileAttachment(\"activity_heatmap.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"activity_heatmap","database":"$undefined"},{"id":259,"value":"activityData = activity_heatmap.flatMap(row =>\n Object.entries(row)\n .filter(([k]) => k !== \"species\")\n .map(([site, value]) => ({\n species: row.species,\n site,\n activity_rate: value\n }))\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"uniqueSpecies = [...new Set(activityData.map(d => d.species))].sort()\n\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"uniqueSites = [...new Set(activityData.map(d => d.site))].sort()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"viewof siteFilter = Inputs.select(\n [\"All sites\", ...uniqueSites],\n {\n label: html`Filter by sites`,\n value: \"All sites\"\n }\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"viewof speciesFilter = Inputs.select(\n [\"All species\", ...uniqueSpecies],\n {\n label: html`Filter by species`,\n value: \"All species\"\n }\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"filteredActivityData = activityData.filter(d =>\n (speciesFilter === \"All species\" || d.species === speciesFilter) &&\n (siteFilter === \"All sites\" || d.site === siteFilter)\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"species_activity_time_of_day_long = await FileAttachment(\"species_activity_time_of_day_long.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"species_activity_time_of_day_long","database":"$undefined"},{"id":271,"value":"todOrder = [\"dawn\", \"dusk\", \"night\"]\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"viewof speciesFilter2 = Inputs.select(\n [\"All species\", ...uniqueSpecies2],\n {\n label: html`Filter by species`,\n value: \"All species\"\n }\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"uniqueSpecies2 = [...new Set(activity_heatmap.map(d => d.species))].sort()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"filteredActivityTOD = (\n speciesFilter2 === \"All species\"\n ? species_activity_time_of_day_long\n :species_activity_time_of_day_long.filter(d => d.species === speciesFilter2)\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"activity_tod = await FileAttachment(\"activity_tod.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"activity_tod","database":"$undefined"},{"id":345,"value":"topSpeciesTod = {\n const avgBySpecies = d3.rollup(\n activity_tod,\n v => d3.mean(v, d => d.activity_rate),\n d => d.species\n );\n \n return Array.from(avgBySpecies, ([species, avg]) => ({species, avg}))\n .sort((a, b) => b.avg - a.avg)\n .slice(0, 10)\n .map(d => d.species);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"filteredTodDataa = activity_tod.filter(d => topSpeciesTod.includes(d.species))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"umap_points = await FileAttachment(\"umap_points.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"umap_points","database":"$undefined"},{"id":410,"value":"dataumap = await FileAttachment(\"umap_points.csv\").csv({ typed: true })\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":" filtered = dataumap.filter(d => (d.confidence ?? 1) >= minConfidence);\n// use `filtered` instead of `data` when building `points`\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"viewof minConfidence = Inputs.range([0, 1], {\n step: 0.05,\n value: 0,\n label: \"Min confidence\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"// Load UMAP data\numapData = {\n const text = await FileAttachment(\"umap_points.csv\").text();\n return d3.csvParse(text, d => ({\n x: +d.x,\n y: +d.y,\n species: +d.species\n }));\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"// All unique species IDs\numapSpeciesList = Array.from(\n new Set(umapData.map(d => d.species))\n).sort((a, b) => d3.ascending(a, b));\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"$50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W51","stdlib":"1"}} 24:null