2f:T5b1,researcherData = { const rawData = Array.isArray(orcid_el_salvador2) ? orcid_el_salvador2 : orcid_el_salvador2.researchers; if (!Array.isArray(rawData)) { throw new Error( "El JSON debe ser un arreglo o contener una propiedad llamada 'researchers'." ); } const usedIds = new Set(); return rawData.map((d, i) => { const orcid = String( d.orcid ?? d.orcid_id ?? d["orcid-identifier"] ?? "" ).trim(); const baseId = orcid || `investigador-${i + 1}`; let id = baseId; let copy = 1; while (usedIds.has(id)) { copy += 1; id = `${baseId}-${copy}`; } usedIds.add(id); const name = String( d.name ?? d.full_name ?? d.nombre ?? d.display_name ?? "Investigador/a sin nombre" ).trim(); const institution = String( d.institution ?? d.institution_name ?? d.organization ?? d.organisation ?? d.affiliation ?? d.affiliations ?? d.employment ?? d.education ?? d.afiliacion ?? "Institución no disponible" ).trim(); const worksCount = Number( d.works_count ?? d.works ?? d.publications_count ?? d.publicaciones ?? 0 ); return { ...d, id, name, orcid: orcid || null, institution, works_count: Number.isFinite(worksCount) ? Math.max(0, worksCount) : 0 }; }); }30:T330f,chart = { const width = 1200; const height = 1300; const headerHeight = 76; const data = researcherDataFiltered; const showAllLabels = filtrosRed.mostrarEtiquetas; const searchResults = Array.isArray(filtrosRed.busqueda) ? filtrosRed.busqueda : []; const selectedIds = new Set(searchResults.map(d => d.id)); const nodes = data.map(d => ({ ...d, r: Math.max( 7, Math.min(26, 7 + Math.sqrt(d.works_count || 0) * 1.65) ), color: colorScale(d.works_count || 0), selected: selectedIds.has(d.id) })); const wrapper = html`

`; const canvas = html`

`; const tooltip = html``; wrapper.append(canvas, tooltip); const context = canvas.getContext("2d"); let transform = d3.zoomIdentity; let hoveredNode = null; let draggedNode = null; let hasMoved = false; let animationFrame = null; let quadtree = null; const simulation = d3.forceSimulation(nodes) .force( "charge", d3.forceManyBody() .strength(-38) .theta(0.95) .distanceMax(240) ) .force( "collide", d3.forceCollide() .radius(d => d.r + 3) .iterations(1) ) .force( "x", d3.forceX(width / 2) .strength(0.03) ) .force( "y", d3.forceY((height + headerHeight) / 2) .strength(0.03) ) .alpha(1) .alphaDecay(0.075) .velocityDecay(0.58); function truncate(text, length = 24) { if (!text) return "Sin nombre"; return text.length > length ? `${text.slice(0, length - 1)}…` : text; } function initials(name) { const words = String(name || "") .split(/\s+/) .filter(Boolean); if (words.length === 0) return "?"; if (words.length === 1) { return words[0].slice(0, 2).toUpperCase(); } return `${words[0][0]}${words[words.length - 1][0]}`.toUpperCase(); } function visibleLabels() { return ( showAllLabels || data.length <= 80 || transform.k >= 1.65 ); } function visibleWorks() { return ( data.length <= 80 || transform.k >= 2.1 ); } function renderHeader() { context.save(); context.fillStyle = "#163D24"; context.fillRect(0, 0, width, headerHeight); context.fillStyle = "#FFFFFF"; context.font = "700 19px Arial"; context.fillText( "Perfiles ORCID de investigadores de El Salvador", 28, 31 ); context.fillStyle = "#D3E6CC"; context.font = "11px Arial"; context.fillText( "Exploración de perfiles, producción registrada y afiliación institucional disponible", 28, 53 ); const totalText = data.length === 1 ? "1 perfil recuperado" : `${data.length.toLocaleString("es-SV")} perfiles recuperados`; context.textAlign = "right"; context.fillStyle = "#A6CE39"; context.font = "700 13px Arial"; context.fillText(totalText, width - 28, 31); context.fillStyle = "#D3E6CC"; context.font = "10px Arial"; context.fillText( "Clic: abrir ORCID · Rueda: zoom · Arrastre: mover nodo", width - 28, 53 ); context.restore(); } function renderLegend() { const x = 20; const y = height - 73; const boxWidth = 330; const boxHeight = 52; context.save(); context.fillStyle = "rgba(255,255,255,0.94)"; context.strokeStyle = "#BED2BA"; context.lineWidth = 1; context.beginPath(); context.roundRect(x, y, boxWidth, boxHeight, 5); context.fill(); context.stroke(); context.fillStyle = "#173E24"; context.font = "700 9px Arial"; context.fillText("LECTURA DEL GRÁFICO", x + 12, y + 17); context.fillStyle = "#46674C"; context.font = "9px Arial"; context.fillText( "Tamaño y tono verde: número de obras registradas en ORCID", x + 12, y + 34 ); context.restore(); } function renderNavigation() { const text = "Zoom: rueda · Paneo: arrastre del fondo · Perfil: clic en nodo"; context.save(); context.textAlign = "right"; context.fillStyle = "#46674C"; context.font = "9px Arial"; context.fillText(text, width - 20, height - 28); context.restore(); } function drawNode(node) { const x = node.x; const y = node.y; const r = node.r; const isHovered = hoveredNode?.id === node.id; const isSelected = node.selected; context.save(); context.beginPath(); context.arc(x, y, r + 2.5, 0, Math.PI * 2); context.fillStyle = "rgba(255, 255, 255, 0.85)"; context.fill(); context.beginPath(); context.arc(x, y, r, 0, Math.PI * 2); context.fillStyle = node.color; context.fill(); context.strokeStyle = isSelected ? "#163D24" : isHovered ? "#173E24" : "#FFFFFF"; context.lineWidth = isSelected ? 3 : isHovered ? 2.8 : 1.4; context.stroke(); const labelsActive = visibleLabels(); const worksActive = visibleWorks(); if (!labelsActive && !isHovered && !isSelected) { context.fillStyle = "#173E24"; context.font = `700 ${Math.max(7, Math.min(12, r * 0.5))}px Arial`; context.textAlign = "center"; context.textBaseline = "middle"; context.fillText(initials(node.name), x, y); } if (labelsActive || isHovered || isSelected) { const name = truncate(node.name, r > 20 ? 24 : 16); context.fillStyle = "#173E24"; context.font = `700 ${Math.max(6, Math.min(9, r * 0.34))}px Arial`; context.textAlign = "center"; context.textBaseline = "middle"; context.fillText(name, x, y - (worksActive ? 4 : 0)); if (worksActive || isHovered || isSelected) { context.fillStyle = "#315A39"; context.font = `${Math.max(5, Math.min(7, r * 0.25))}px Arial`; context.fillText( `${node.works_count} obra${node.works_count === 1 ? "" : "s"}`, x, y + Math.max(7, r * 0.35) ); } } context.restore(); } function rebuildQuadtree() { quadtree = d3.quadtree( nodes, d => d.x, d => d.y ); } function render() { context.clearRect(0, 0, width, height); context.fillStyle = "#F7FAF5"; context.fillRect(0, 0, width, height); context.strokeStyle = "#E1EBDF"; context.lineWidth = 0.65; for (let x = 0; x < width; x += 28) { context.beginPath(); context.moveTo(x, headerHeight); context.lineTo(x, height); context.stroke(); } for (let y = headerHeight; y < height; y += 28) { context.beginPath(); context.moveTo(0, y); context.lineTo(width, y); context.stroke(); } renderHeader(); context.save(); context.translate(transform.x, transform.y); context.scale(transform.k, transform.k); const sortedNodes = [...nodes].sort((a, b) => { const aPriority = a.selected || hoveredNode?.id === a.id ? 1 : 0; const bPriority = b.selected || hoveredNode?.id === b.id ? 1 : 0; return aPriority - bPriority; }); for (const node of sortedNodes) { drawNode(node); } context.restore(); renderLegend(); renderNavigation(); } function scheduleRender() { if (animationFrame) return; animationFrame = requestAnimationFrame(() => { animationFrame = null; rebuildQuadtree(); render(); }); } simulation.on("tick", scheduleRender); simulation.on("end", () => { rebuildQuadtree(); render(); }); function getCanvasCoordinates(event) { const rect = canvas.getBoundingClientRect(); return [ (event.clientX - rect.left) * (width / rect.width), (event.clientY - rect.top) * (height / rect.height) ]; } function findNode(event) { if (!quadtree) return null; const [screenX, screenY] = getCanvasCoordinates(event); const x = (screenX - transform.x) / transform.k; const y = (screenY - transform.y) / transform.k; const candidate = quadtree.find(x, y, 42 / transform.k); if (!candidate) return null; const distance = Math.hypot( candidate.x - x, candidate.y - y ); return distance <= candidate.r + 6 / transform.k ? candidate : null; } function showTooltip(event, node) { if (!node) { tooltip.style.display = "none"; return; } const rect = wrapper.getBoundingClientRect(); const orcidText = node.orcid || "No disponible"; const institutionText = node.institution || "Institución no disponible"; tooltip.innerHTML = `

${node.name}

ORCID: ${orcidText}

Obras: ${node.works_count}

Institución: ${institutionText}

${node.orcid ? `

Clic para abrir perfil ORCID

` : "" } `; tooltip.style.display = "block"; tooltip.style.left = `${Math.min( event.clientX - rect.left + 14, rect.width - 275 )}px`; tooltip.style.top = `${Math.max( 86, event.clientY - rect.top + 14 )}px`; } const zoom = d3.zoom() .scaleExtent([0.35, 6]) .filter(event => !draggedNode && !event.button) .on("zoom", event => { transform = event.transform; render(); }); d3.select(canvas).call(zoom); canvas.addEventListener("pointermove", event => { if (draggedNode) { const [screenX, screenY] = getCanvasCoordinates(event); draggedNode.fx = (screenX - transform.x) / transform.k; draggedNode.fy = (screenY - transform.y) / transform.k; simulation.alphaTarget(0.16).restart(); scheduleRender(); return; } const foundNode = findNode(event); if (foundNode?.id !== hoveredNode?.id) { hoveredNode = foundNode; canvas.style.cursor = foundNode ? "pointer" : "grab"; showTooltip(event, foundNode); render(); } else if (foundNode) { showTooltip(event, foundNode); } }); canvas.addEventListener("pointerleave", () => { if (!draggedNode) { hoveredNode = null; tooltip.style.display = "none"; canvas.style.cursor = "grab"; render(); } }); canvas.addEventListener("pointerdown", event => { const foundNode = findNode(event); if (!foundNode) return; event.stopPropagation(); draggedNode = foundNode; hasMoved = false; draggedNode.fx = draggedNode.x; draggedNode.fy = draggedNode.y; simulation.alphaTarget(0.18).restart(); canvas.setPointerCapture(event.pointerId); canvas.style.cursor = "grabbing"; }); canvas.addEventListener("pointermove", event => { if (!draggedNode) return; hasMoved = true; }); canvas.addEventListener("pointerup", event => { if (!draggedNode) return; const releasedNode = draggedNode; releasedNode.fx = null; releasedNode.fy = null; draggedNode = null; simulation.alphaTarget(0); canvas.style.cursor = hoveredNode ? "pointer" : "grab"; try { canvas.releasePointerCapture(event.pointerId); } catch (error) { // No se requiere ninguna acción si el puntero ya fue liberado. } if (!hasMoved && releasedNode.orcid) { const cleanOrcid = releasedNode.orcid .replace(/^https?:\/\/orcid\.org\//i, "") .trim(); const validOrcid = /^0000-\d{4}-\d{4}-\d{3}[0-9X]$/i.test(cleanOrcid); if (validOrcid) { window.open( `https://orcid.org/${cleanOrcid}`, "_blank", "noopener,noreferrer" ); } } scheduleRender(); }); if (filtrosRed.reiniciar > 0) { nodes.forEach(d => { d.fx = null; d.fy = null; d.x = width / 2 + (Math.random() - 0.5) * 80; d.y = height / 2 + (Math.random() - 0.5) * 80; }); simulation.alpha(1).restart(); } rebuildQuadtree(); render(); invalidation.then(() => { simulation.stop(); if (animationFrame) { cancelAnimationFrame(animationFrame); } }); return wrapper; }31:[{"id":"664279241e99b91c48b1bc3c1310e294af1e503361afee444288f7b7852a954112abd4b985ab579c0f4cd0ba37edd5e41065e351a8d26bdd3f14f49779e6159f","href":"https://static.observableusercontent.com/files/664279241e99b91c48b1bc3c1310e294af1e503361afee444288f7b7852a954112abd4b985ab579c0f4cd0ba37edd5e41065e351a8d26bdd3f14f49779e6159f","name":"orcid_el_salvador@2.json","type":"application/json","lastModified":1787853365048.015,"size":610146}] 2d:{"title":"Lista de ORCID El Salvador","cells":[{"id":0,"value":"# Lista de ORCID El Salvador","pinned":false,"hidden":false,"mode":"md"},{"id":67,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"orcid_el_salvador2 = FileAttachment(\"orcid_el_salvador@2.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"colorScale = d3.scaleSequential()\n .domain([\n 0,\n Math.max(1, d3.max(researcherData, d => d.works_count) || 1)\n ])\n .interpolator(\n d3.interpolateRgbBasis([\n \"#EAF4E4\",\n \"#CDE7A8\",\n \"#A6CE39\",\n \"#74A92F\",\n \"#4A7D26\",\n \"#245125\"\n ])\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"institucionesDisponibles = Array.from(\n d3.rollup(\n researcherData,\n values => values.length,\n d => d.institution\n ),\n ([institution, count]) => ({\n institution,\n count\n })\n)\n .sort((a, b) => {\n if (a.institution === \"Institución no disponible\") return 1;\n if (b.institution === \"Institución no disponible\") return -1;\n return a.institution.localeCompare(b.institution, \"es\");\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"researcherDataFiltered = {\n const {institucion, busqueda} = filtrosRed;\n\n let data = researcherData;\n\n if (institucion && institucion !== \"all\") {\n data = data.filter(d => d.institution === institucion);\n }\n\n if (Array.isArray(busqueda) && busqueda.length > 0) {\n const foundIds = new Set(busqueda.map(d => d.id));\n data = data.filter(d => foundIds.has(d.id));\n }\n\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"viewof filtrosRed = Inputs.form({\n institucion: Inputs.select(\n new Map([\n [\"Todas las instituciones\", \"all\"],\n ...institucionesDisponibles.map(d => [\n `${d.institution} (${d.count})`,\n d.institution\n ])\n ]),\n {\n label: \"Filtrar por institución\",\n value: \"all\"\n }\n ),\n\n busqueda: Inputs.search(\n researcherData,\n {\n label: \"Buscar investigador/a u ORCID\",\n placeholder: \"Escriba un nombre, apellido u ORCID...\",\n columns: [\"name\", \"orcid\", \"institution\"]\n }\n ),\n\n mostrarEtiquetas: Inputs.toggle({\n label: \"Mostrar nombres aunque no se haya aplicado zoom\",\n value: false\n }),\n\n reiniciar: Inputs.button(\"Reorganizar nodos\")\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"orcid_el_salvador2","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"Object.keys(orcid_el_salvador2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"Array.isArray(orcid_el_salvador2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"researcherData?.slice(0, 5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"fieldCheck = ({\n total: researcherData.length,\n sinOrcid: researcherData.filter(d => !d.orcid).length,\n sinNombre: researcherData.filter(d => !d.name).length,\n sinInstitucion: researcherData.filter(d => !d.institution).length,\n sinRor: researcherData.filter(d => !d.ror).length,\n worksNoNumericos: researcherData.filter(\n d => d.works_count != null && !Number.isFinite(+d.works_count)\n ).length,\n ejemplo: researcherData[0]\n})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}