27:null 28:["$","title",null,{"children":"Red de Co-citación Bibliométrica WebGL (V. FINAL) | Kevin Gutierrez | Observable"}] 2d:T84af,chart = { // ============================================================================ // CONFIGURACIÓN WEBGL - METODOLOGÍA ESPECIFICADA // ============================================================================ const CONFIG = { width: 1400, height: 800, apiBase: "https://api.openalex.org", // 14 revistas nucleares de Bibliotecología y CI targetJournals: [ "International Journal of Information Management", "Journal of Range Management", "Journal of the Association for Information Science and Technology", "Archives of Environmental Health", "Journal of Information Science", "Journal of Enterprise Information Management", "Journal of Computing and Information Science in Engineering", "Journal of Global Information Management", "Journal of Librarianship and Information Science", "International Journal of Information Management Data Insights", "Aslib Journal of Information Management", "Journal of Information Science and Engineering", "Knowledge Organization", "South African Journal of Information Management" ], // Parámetros bibliométricos exactos según metodología maxWorksPerJournal: 50, maxAuthors: 200, minCitationsWork: 3, minCitationsAuthor: 10, minSharedRefs: 5, jaccardThreshold: 0.1, saltonThreshold: 0.05, // Optimizaciones WebGL warmupTicks: 30, cooldownTicks: 15, linkDistance: 80, nodeRelSize: 8, colors: { americas: [231, 76, 60], europe: [52, 152, 219], asia: [243, 156, 18], oceania: [155, 89, 182], africa: [46, 204, 113], other: [149, 165, 166], author: [142, 68, 173], work: [44, 62, 80], oa_high: [39, 174, 96], // Verde brillante - 100% OA oa_medium: [241, 196, 15], // Amarillo - 50-99% OA oa_low: [230, 126, 34], // Naranja - 1-49% OA oa_none: [192, 57, 43] // ROJO OSCURO - 0% OA (Cerrado) - más visible } }; // ============================================================================ // MAPA DE REGIONES // ============================================================================ const REGION_MAP = { "US": "americas", "CA": "americas", "MX": "americas", "BR": "americas", "AR": "americas", "CL": "americas", "CO": "americas", "PE": "americas", "VE": "americas", "CU": "americas", "GB": "europe", "ES": "europe", "DE": "europe", "FR": "europe", "IT": "europe", "NL": "europe", "BE": "europe", "PT": "europe", "SE": "europe", "NO": "europe", "FI": "europe", "DK": "europe", "PL": "europe", "AT": "europe", "CH": "europe", "ZA": "africa", "EG": "africa", "NG": "africa", "KE": "africa", "MA": "africa", "AU": "oceania", "NZ": "oceania", "CN": "asia", "JP": "asia", "KR": "asia", "IN": "asia", "TW": "asia" }; // ============================================================================ // CARGAR FORCE-GRAPH // ============================================================================ const ForceGraph = await require('force-graph@1.43.4/dist/force-graph.min.js'); // ============================================================================ // FETCH CON RETRY - DATOS EN TIEMPO REAL // ============================================================================ async function fetchWithRetry(url, retries = 3) { for (let i = 0; i < retries; i++) { try { const response = await fetch(url); if (!response.ok) throw new Error(`HTTP ${response.status}`); return await response.json(); } catch (e) { if (i === retries - 1) throw e; await new Promise(r => setTimeout(r, 1000 * (i + 1))); } } } async function fetchJournalByName(name) { const url = `${CONFIG.apiBase}/sources?search=${encodeURIComponent(name)}&per_page=5&mailto=researcher@university.edu`; try { const data = await fetchWithRetry(url); const match = data.results?.find(j => j.display_name.toLowerCase() === name.toLowerCase() ) || data.results?.find(j => j.display_name.toLowerCase().includes(name.toLowerCase()) || name.toLowerCase().includes(j.display_name.toLowerCase()) ) || data.results?.[0]; if (match) { console.log(`✅ ${match.display_name} | Citas: ${match.cited_by_count}`); return match; } console.warn(`⚠️ No encontrada: ${name}`); return null; } catch (e) { console.error(`❌ Error: ${name}`, e); return null; } } async function fetchWorksForJournal(sourceId, sourceName) { const url = `${CONFIG.apiBase}/works?filter=primary_location.source.id:${sourceId}&per_page=${CONFIG.maxWorksPerJournal}&sort=cited_by_count:desc&mailto=researcher@university.edu`; try { const data = await fetchWithRetry(url); return (data.results || []).map(w => ({ ...w, journalId: sourceId, journalName: sourceName })); } catch (e) { console.warn(`Error obras ${sourceName}:`, e); return []; } } // ============================================================================ // CONSTRUCCIÓN DE RED // ============================================================================ async function buildVerifiedNetwork() { console.log("🔍 Buscando 14 revistas nucleares en OpenAlex API"); const foundJournals = []; for (const name of CONFIG.targetJournals) { const journal = await fetchJournalByName(name); if (journal) foundJournals.push(journal); await new Promise(r => setTimeout(r, 200)); } console.log(`📚 Encontradas: ${foundJournals.length}/14 revistas`); console.log("⚡ Datos obtenidos EN TIEMPO REAL de https://api.openalex.org"); if (foundJournals.length === 0) { throw new Error("No se encontraron revistas. Verifica conexión a OpenAlex."); } console.log("📄 Obteniendo obras en TIEMPO REAL (máx. 50/revista, ≥3 citas)..."); const allWorks = []; for (const journal of foundJournals) { const works = await fetchWorksForJournal(journal.id, journal.display_name); const filtered = works.filter(w => (w.cited_by_count || 0) >= CONFIG.minCitationsWork); allWorks.push(...filtered); await new Promise(r => setTimeout(r, 200)); } console.log(`📄 Obras filtradas (≥${CONFIG.minCitationsWork} citas): ${allWorks.length}`); const nodes = []; const links = []; const nodeMap = new Map(); const authorIndex = new Map(); const workRefs = new Map(); // NODOS REVISTAS - SOLO CONTORNO foundJournals.forEach(j => { const id = `j_${j.id.split('/').pop()}`; const country = j.country_code || 'XX'; const region = REGION_MAP[country] || 'other'; let oaLevel = 'none'; const oaPct = j.open_access?.percentage || 0; if (oaPct === 100) oaLevel = 'high'; else if (oaPct >= 50) oaLevel = 'medium'; else if (oaPct > 0) oaLevel = 'low'; const node = { id, type: 'journal', name: j.display_name, val: Math.sqrt(j.cited_by_count || 0) * 3 + 15, region, country, countryCode: country, oaLevel, oaPercentage: oaPct, citations: j.cited_by_count || 0, works: j.works_count || 0, impact: ((j.cited_by_count || 0) / Math.max(j.works_count || 1, 1)).toFixed(2), hIndex: j.summary_stats?.h_index || 0, publisher: j.host_organization_name || 'Independent', url: j.homepage_url || '', color: CONFIG.colors[region] || CONFIG.colors.other }; nodes.push(node); nodeMap.set(id, node); }); // NODOS OBRAS allWorks.forEach(w => { const id = `w_${w.id.split('/').pop()}`; const journalId = `j_${w.journalId.split('/').pop()}`; const authors = []; (w.authorships || []).slice(0, 5).forEach(auth => { if (auth.author?.id) { const aid = auth.author.id.split('/').pop(); authors.push(aid); if (!authorIndex.has(aid)) { authorIndex.set(aid, { name: auth.author.display_name, orcid: auth.author.orcid, works: [], citations: 0 }); } authorIndex.get(aid).works.push(id); } }); workRefs.set(id, { authors, refs: (w.referenced_works || []).map(r => r.split('/').pop()), citations: w.cited_by_count || 0 }); const node = { id, type: 'work', name: w.display_name?.substring(0, 50) || 'Untitled', val: Math.sqrt(w.cited_by_count || 0) + 2, year: w.publication_year, citations: w.cited_by_count || 0, authors: authors.length, doi: w.doi || '', color: CONFIG.colors.work }; nodes.push(node); nodeMap.set(id, node); if (nodeMap.has(journalId)) { links.push({ source: id, target: journalId, type: 'published', value: 1 }); } }); // NODOS AUTORES const authorEntries = Array.from(authorIndex.entries()) .map(([aid, data]) => { const totalCitations = data.works.reduce((sum, wid) => { const ref = workRefs.get(wid); return sum + (ref?.citations || 0); }, 0); return { aid, ...data, totalCitations }; }) .filter(a => a.totalCitations >= CONFIG.minCitationsAuthor) .sort((a, b) => b.totalCitations - a.totalCitations) .slice(0, CONFIG.maxAuthors); authorEntries.forEach(author => { const id = `a_${author.aid}`; const node = { id, type: 'author', name: author.name?.substring(0, 35) || 'Unknown', val: Math.sqrt(author.totalCitations) + 4, works: author.works.length, citations: author.totalCitations, orcid: author.orcid || '', color: CONFIG.colors.author }; nodes.push(node); nodeMap.set(id, node); author.works.forEach(wid => { if (nodeMap.has(wid)) { links.push({ source: id, target: wid, type: 'authored', value: 1 }); } }); }); // CO-CITACIÓN AUTORES console.log("🔗 Calculando co-citaciones autores (≥5 refs, Jaccard≥0.1)..."); const authorCitations = new Map(); authorEntries.forEach(a => { const refs = new Set(); a.works.forEach(wid => { const w = workRefs.get(wid); if (w) w.refs.forEach(r => refs.add(r)); }); authorCitations.set(a.aid, refs); }); for (let i = 0; i < authorEntries.length; i++) { for (let j = i + 1; j < authorEntries.length; j++) { const a1 = authorEntries[i]; const a2 = authorEntries[j]; const c1 = authorCitations.get(a1.aid); const c2 = authorCitations.get(a2.aid); const intersection = new Set([...c1].filter(x => c2.has(x))); const union = new Set([...c1, ...c2]); const jaccard = intersection.size / union.size; if (intersection.size >= CONFIG.minSharedRefs && jaccard >= CONFIG.jaccardThreshold) { links.push({ source: `a_${a1.aid}`, target: `a_${a2.aid}`, type: 'cocitation', value: jaccard * 5, shared: intersection.size, jaccard: jaccard.toFixed(2) }); } } } // CO-CITACIÓN REVISTAS console.log("🔗 Calculando co-citación revistas (Salton≥0.05)..."); const journalCitations = new Map(); foundJournals.forEach(j => { const jid = `j_${j.id.split('/').pop()}`; const refs = new Set(); allWorks.filter(w => w.journalId === j.id).forEach(w => { (w.referenced_works || []).forEach(r => refs.add(r.split('/').pop())); }); journalCitations.set(jid, { refs, size: refs.size }); }); const journalIds = Array.from(journalCitations.keys()); for (let i = 0; i < journalIds.length; i++) { for (let j = i + 1; j < journalIds.length; j++) { const j1 = journalIds[i]; const j2 = journalIds[j]; const d1 = journalCitations.get(j1); const d2 = journalCitations.get(j2); const shared = new Set([...d1.refs].filter(x => d2.refs.has(x))).size; const salton = shared / Math.sqrt(d1.size * d2.size); if (salton >= CONFIG.saltonThreshold) { links.push({ source: j1, target: j2, type: 'journal_cocitation', value: salton * 10, salton: salton.toFixed(3) }); } } } console.log(`✅ Red completa: ${nodes.length} nodos, ${links.length} enlaces`); return { nodes, links, journals: foundJournals, stats: { totalWorks: allWorks.length, totalAuthors: authorEntries.length, coauthorLinks: links.filter(l => l.type === 'cocitation').length, cojournalLinks: links.filter(l => l.type === 'journal_cocitation').length } }; } // ============================================================================ // CONTENEDOR PRINCIPAL // ============================================================================ const container = d3.create("div") .style("width", "100%") .style("height", "850px") .style("font-family", "system-ui, sans-serif") .style("position", "relative") .style("display", "flex") .style("flex-direction", "column") .style("background", "#fff") .style("border", "1px solid #e1e4e8") .style("border-radius", "8px") .style("overflow", "hidden"); // Header const header = container.append("div") .style("padding", "10px 15px") .style("background", "#f6f8fa") .style("border-bottom", "1px solid #e1e4e8") .style("flex-shrink", "0"); const titleRow = header.append("div") .style("display", "flex") .style("justify-content", "space-between") .style("align-items", "center"); titleRow.append("h2") .style("margin", "0") .style("font-size", "16px") .style("color", "#24292e") .text("Red de Co-citación Bibliométrica - OpenAlex API"); titleRow.append("div") .style("font-size", "10px") .style("color", "#fff") .style("background", "#28a745") .style("padding", "3px 8px") .style("border-radius", "12px") .text("LIVE DATA"); // Controles const controlsRow = header.append("div") .style("display", "flex") .style("justify-content", "space-between") .style("align-items", "center") .style("margin-top", "8px"); const toggles = controlsRow.append("div") .style("display", "flex") .style("gap", "6px"); const filters = { journals: true, authors: true, works: true }; const createToggle = (label, key, color) => { const btn = toggles.append("button") .text(`${filters[key] ? '●' : '○'} ${label}`) .style("padding", "3px 8px") .style("border", "1px solid #d1d5da") .style("border-radius", "10px") .style("background", filters[key] ? `rgb(${color.join(',')})` : "#fff") .style("color", filters[key] ? "#fff" : "#586069") .style("cursor", "pointer") .style("font-size", "10px"); btn.on("click", () => { filters[key] = !filters[key]; btn.style("background", filters[key] ? `rgb(${color.join(',')})` : "#fff") .style("color", filters[key] ? "#fff" : "#586069") .text(`${filters[key] ? '●' : '○'} ${label}`); updateGraph(); }); }; createToggle("Revistas", "journals", CONFIG.colors.europe); createToggle("Autores", "authors", CONFIG.colors.author); createToggle("Obras", "works", CONFIG.colors.work); const metrics = controlsRow.append("div") .style("display", "flex") .style("gap", "15px") .style("font-size", "11px") .style("color", "#586069"); const mNodes = metrics.append("span").text("Nodos: --"); const mLinks = metrics.append("span").text("Enlaces: --"); const mFps = metrics.append("span").text("FPS: --"); // Área de gráfico const graphArea = container.append("div") .style("flex", "1") .style("position", "relative") .style("min-height", "600px") .style("background", "#fff"); // ============================================================================ // RENDERIZADO WEBGL // ============================================================================ const graphDiv = graphArea.append("div") .style("width", "100%") .style("height", "100%") .style("position", "absolute") .style("top", "0") .style("left", "0"); await new Promise(resolve => setTimeout(resolve, 100)); const { nodes: allNodes, links: allLinks, journals, stats } = await buildVerifiedNetwork(); function getVisibleData() { const visibleNodes = allNodes.filter(n => { if (n.type === 'journal' && !filters.journals) return false; if (n.type === 'author' && !filters.authors) return false; if (n.type === 'work' && !filters.works) return false; return true; }); const nodeIds = new Set(visibleNodes.map(n => n.id)); const visibleLinks = allLinks.filter(l => { const s = typeof l.source === 'object' ? l.source.id : l.source; const t = typeof l.target === 'object' ? l.target.id : l.target; return nodeIds.has(s) && nodeIds.has(t); }); return { nodes: visibleNodes, links: visibleLinks }; } const initialData = getVisibleData(); const Graph = ForceGraph()(graphDiv.node()) .width(graphArea.node().clientWidth || CONFIG.width) .height(graphArea.node().clientHeight || 600) .graphData(initialData) .backgroundColor('#ffffff') .nodeRelSize(CONFIG.nodeRelSize) .nodeVal('val') .nodeColor('color') .nodeLabel(node => { if (node.type === 'journal') { return `

${node.name}

📍 ${node.country} • 🏢 ${node.publisher}

Citas: ${node.citations.toLocaleString()}

H-index: ${node.hIndex}

${node.oaLevel === 'high' ? '🔓 100% Acceso Abierto' : node.oaLevel === 'medium' ? '🔓 50-99% OA (Híbrido)' : node.oaLevel === 'low' ? '🔓 1-49% OA' : '🔒 0% OA (CERRADO)'}

`; } if (node.type === 'author') { return `

👤 ${node.name}

📄 Obras en red: ${node.works} | 📊 Citas totales: ${node.citations.toLocaleString()}

`; } return `

📄 ${node.name}

📅 Año: ${node.year} | 📊 Citas: ${node.citations} | 👥 Autores: ${node.authors}

`; }) // ============================================================================ // NODOS CON ANILLOS OA MÁS NOTORIOS Y TÍTULOS DESTACADOS // ============================================================================ .nodeCanvasObject((node, ctx, globalScale) => { const radius = node.val * CONFIG.nodeRelSize; if (node.type === 'journal') { // CÍRCULO SOLO CONTORNO - SIN RELLENO (REVISTAS) ctx.beginPath(); ctx.arc(node.x, node.y, radius, 0, 2 * Math.PI); ctx.strokeStyle = `rgba(${node.color.join(',')}, 1)`; ctx.lineWidth = 4; ctx.stroke(); // ============================================================================ // ANILLO OA MÁS NOTORIO - GROSOR Y CONTRASTE AUMENTADOS // ============================================================================ const oaColor = CONFIG.colors[`oa_${node.oaLevel}`] || CONFIG.colors.oa_none; const oaRadius = radius + 10; // Aumentado de 8 a 10 // Anillo exterior más grueso y visible ctx.beginPath(); ctx.arc(node.x, node.y, oaRadius, 0, 2 * Math.PI); ctx.strokeStyle = `rgba(${oaColor.join(',')}, 1)`; // Opacidad 1 en lugar de 0.9 ctx.lineWidth = node.oaLevel === 'none' ? 5 : 4; // Más grueso para Cerrado ctx.stroke(); // SEGUNDO ANILLO para mayor visibilidad del estado Cerrado if (node.oaLevel === 'none') { // Doble anillo para revistas cerradas - muy visible ctx.beginPath(); ctx.arc(node.x, node.y, oaRadius + 6, 0, 2 * Math.PI); ctx.strokeStyle = `rgba(${oaColor.join(',')}, 0.5)`; ctx.lineWidth = 2; ctx.stroke(); // Indicador visual de candado (círculo pequeño) ctx.beginPath(); ctx.arc(node.x + radius + 15, node.y - radius - 15, 5, 0, 2 * Math.PI); ctx.fillStyle = `rgb(${oaColor.join(',')})`; ctx.fill(); } // INDICADOR DE REGIÓN (solo contorno) ctx.beginPath(); ctx.arc(node.x - radius - 14, node.y - radius - 14, 6, 0, 2 * Math.PI); ctx.strokeStyle = `rgb(${node.color.join(',')})`; ctx.lineWidth = 2; ctx.stroke(); // ============================================================================ // TÍTULO DE REVISTA MÁS NOTORIO // ============================================================================ const fontSize = Math.max(13, 15 * Math.min(globalScale, 1.3)); // Aumentado de 11/13 a 13/15 ctx.font = `800 ${fontSize}px system-ui, -apple-system, sans-serif`; // 800 en lugar de 700 // Fondo blanco más grande y con sombra para mejor legibilidad const text = node.name.substring(0, 28); // Un poco más largo const textWidth = ctx.measureText(text).width; const textHeight = fontSize * 1.3; // Sombra del fondo ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; ctx.fillRect( node.x - textWidth/2 - 2, node.y + radius + 16, textWidth + 10, textHeight + 4 ); // Fondo blanco principal ctx.fillStyle = 'rgba(255, 255, 255, 0.98)'; ctx.fillRect( node.x - textWidth/2 - 4, node.y + radius + 14, textWidth + 8, textHeight ); // Borde sutil alrededor del texto ctx.strokeStyle = `rgba(${node.color.join(',')}, 0.3)`; ctx.lineWidth = 1; ctx.strokeRect( node.x - textWidth/2 - 4, node.y + radius + 14, textWidth + 8, textHeight ); // Texto del nombre - más oscuro y con sombra ctx.shadowColor = 'rgba(0, 0, 0, 0.15)'; ctx.shadowBlur = 2; ctx.shadowOffsetX = 1; ctx.shadowOffsetY = 1; ctx.fillStyle = '#1a1a1a'; // Más oscuro que #24292e ctx.textAlign = 'center'; ctx.textBaseline = 'top'; ctx.fillText(text, node.x, node.y + radius + 16); // Resetear sombra ctx.shadowColor = 'transparent'; ctx.shadowBlur = 0; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; // Subtítulo con citas - siempre visible ahora ctx.font = `600 ${fontSize * 0.8}px system-ui`; // 600 en lugar de 500 ctx.fillStyle = '#444'; const subText = `${node.citations.toLocaleString()} citas`; ctx.fillText(subText, node.x, node.y + radius + 16 + textHeight); // Indicador de OA debajo del nombre const oaText = node.oaLevel === 'high' ? '🔓 100% OA' : node.oaLevel === 'medium' ? '🔓 50-99% OA' : node.oaLevel === 'low' ? '🔓 1-49% OA' : '🔒 CERRADO'; ctx.font = `700 ${fontSize * 0.65}px system-ui`; ctx.fillStyle = `rgb(${oaColor.join(',')})`; ctx.fillText(oaText, node.x, node.y + radius + 18 + textHeight + (fontSize * 0.85)); } else if (node.type === 'author') { // CÍRCULO SOLO CONTORNO - SIN RELLENO (AUTORES) ctx.beginPath(); ctx.arc(node.x, node.y, radius, 0, 2 * Math.PI); ctx.strokeStyle = `rgba(${node.color.join(',')}, 0.9)`; ctx.lineWidth = 2.5; ctx.stroke(); // Nombre solo si zoom suficiente if (globalScale > 0.8) { ctx.font = `600 ${Math.max(9, 10 * globalScale)}px system-ui`; ctx.fillStyle = '#24292e'; ctx.textAlign = 'center'; ctx.fillText(node.name.substring(0, 20), node.x, node.y + radius + 6); } } else { // OBRA: Cuadrado solo contorno const size = radius * 1.5; ctx.strokeStyle = `rgba(${node.color.join(',')}, 0.8)`; ctx.lineWidth = 1.5; ctx.strokeRect(node.x - size/2, node.y - size/2, size, size); } }) .onNodeClick((node) => { if (node.url) window.open(node.url, '_blank'); if (node.doi) window.open(node.doi, '_blank'); }) .onNodeHover((node) => { graphDiv.style('cursor', node ? 'pointer' : 'default'); }) .linkColor(l => { if (l.type === 'cocitation') return 'rgba(231, 76, 60, 0.7)'; if (l.type === 'journal_cocitation') return 'rgba(52, 152, 219, 0.6)'; if (l.type === 'authored') return 'rgba(142, 68, 173, 0.4)'; return 'rgba(149, 165, 166, 0.3)'; }) .linkWidth(l => Math.max(0.5, l.value || 1)) .linkDirectionalArrowLength(l => l.type === 'cocitation' ? 6 : 0) .linkDirectionalArrowRelPos(1) .linkDirectionalParticles(l => l.type === 'cocitation' ? 2 : 0) .linkDirectionalParticleSpeed(0.01) .linkDirectionalParticleWidth(2) .d3Force('link', d3.forceLink().id(d => d.id).distance(d => { if (d.type === 'cocitation') return 120; if (d.type === 'journal_cocitation') return 180; if (d.type === 'authored') return 60; return CONFIG.linkDistance; }).strength(0.1)) .d3Force('charge', d3.forceManyBody().strength(-400).theta(0.8).distanceMax(500)) .d3Force('center', d3.forceCenter().strength(0.1)) .d3Force('collide', d3.forceCollide().radius(d => d.val * CONFIG.nodeRelSize + 25).strength(0.95).iterations(3)) .warmupTicks(CONFIG.warmupTicks) .cooldownTicks(CONFIG.cooldownTicks) .onEngineStop(() => console.log("✅ Simulación completada")); function updateMetrics() { const d = getVisibleData(); mNodes.text(`Nodos: ${d.nodes.length}`); mLinks.text(`Enlaces: ${d.links.length}`); } updateMetrics(); function updateGraph() { Graph.graphData(getVisibleData()); updateMetrics(); } let lastTime = performance.now(), frames = 0; function checkFps() { const now = performance.now(); frames++; if (now - lastTime >= 1000) { mFps.text(`FPS: ${frames}`); frames = 0; lastTime = now; } requestAnimationFrame(checkFps); } checkFps(); let resizeTimeout; const resizeObserver = new ResizeObserver(entries => { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(() => { for (let entry of entries) { Graph.width(entry.contentRect.width).height(entry.contentRect.height); } }, 100); }); resizeObserver.observe(graphArea.node()); // ============================================================================ // PANELES INFORMATIVOS - LEYENDA ACTUALIZADA // ============================================================================ const legendPanel = graphArea.append("div") .style("position", "absolute") .style("top", "10px") .style("right", "10px") .style("background", "rgba(255,255,255,0.98)") .style("padding", "12px") .style("border-radius", "6px") .style("border", "1px solid #e1e4e8") .style("box-shadow", "0 2px 8px rgba(0,0,0,0.15)") .style("font-size", "10px") .style("max-width", "180px"); legendPanel.append("div") .style("font-weight", "700") .style("margin-bottom", "8px") .style("color", "#24292e") .style("border-bottom", "2px solid #e1e4e8") .style("padding-bottom", "4px") .text("Leyenda"); const legendItems = [ { c: CONFIG.colors.europe, l: "Europa", t: "journal" }, { c: CONFIG.colors.americas, l: "Américas", t: "journal" }, { c: CONFIG.colors.africa, l: "África/Oceanía", t: "journal" }, { c: CONFIG.colors.author, l: "Autor", t: "author" }, { c: CONFIG.colors.work, l: "Obra", t: "work" } ]; legendItems.forEach(item => { const row = legendPanel.append("div") .style("display", "flex") .style("align-items", "center") .style("margin", "4px 0"); row.append("div") .style("width", "12px") .style("height", "12px") .style("border-radius", item.t === 'work' ? '2px' : '50%') .style("background", `rgb(${item.c.join(',')})`) .style("margin-right", "8px"); row.append("span").style("color", "#444").style("font-weight", "500").text(item.l); }); legendPanel.append("div") .style("margin-top", "10px") .style("padding-top", "8px") .style("border-top", "2px solid #e1e4e8") .style("font-weight", "700") .style("color", "#24292e") .text("Acceso Abierto"); const oaItems = [ { c: CONFIG.colors.oa_high, l: "🔓 100% OA" }, { c: CONFIG.colors.oa_medium, l: "🔓 50-99% OA" }, { c: CONFIG.colors.oa_low, l: "🔓 1-49% OA" }, { c: CONFIG.colors.oa_none, l: "🔒 0% OA (Cerrado)" } ]; oaItems.forEach(item => { const row = legendPanel.append("div") .style("display", "flex") .style("align-items", "center") .style("margin", "5px 0"); row.append("div") .style("width", "14px") .style("height", "5px") .style("background", `rgb(${item.c.join(',')})`) .style("border-radius", "2px") .style("margin-right", "8px"); row.append("span").style("color", "#444").style("font-size", "9px").style("font-weight", "600").text(item.l); }); const methodPanel = graphArea.append("div") .style("position", "absolute") .style("bottom", "10px") .style("left", "10px") .style("background", "rgba(255,255,255,0.98)") .style("padding", "10px") .style("border-radius", "6px") .style("border", "1px solid #e1e4e8") .style("box-shadow", "0 2px 8px rgba(0,0,0,0.15)") .style("font-size", "9px") .style("color", "#586069") .style("max-width", "340px"); methodPanel.html(`

Metodología - Datos en Tiempo Real

• Fuente: OpenAlex API (api.openalex.org) - Extracción en tiempo real
• Obras: ≥${CONFIG.minCitationsWork} citas, máx. ${CONFIG.maxWorksPerJournal}/revista
• Autores: ≥${CONFIG.minCitationsAuthor} citas totales
• Co-citación autores: ≥${CONFIG.minSharedRefs} refs. compartidas, Jaccard ≥${CONFIG.jaccardThreshold}
• Co-citación revistas: Salton's cosine ≥${CONFIG.saltonThreshold}
• Visualización: Nodos con anillos OA notorios
• Resultados: ${journals.length} revistas, ${stats.totalWorks} obras, ${stats.totalAuthors} autores
• Enlaces: ${stats.coauthorLinks} co-autor, ${stats.cojournalLinks} co-revista

`); const zoomControls = graphArea.append("div") .style("position", "absolute") .style("bottom", "10px") .style("right", "10px") .style("display", "flex") .style("gap", "4px"); const zoomBtn = (icon, scale) => { zoomControls.append("button") .text(icon) .style("width", "28px") .style("height", "28px") .style("border", "1px solid #d1d5da") .style("border-radius", "4px") .style("background", "#fff") .style("cursor", "pointer") .style("font-size", "14px") .on("click", () => { if (scale) { graphDiv.transition().duration(300).call(d3.zoom().scaleBy, scale); } else { Graph.zoomToFit(400, 50); } }); }; zoomBtn("+", 1.3); zoomBtn("−", 0.7); zoomBtn("⟲", null); return container.node(); }2e:[] 2b:{"id":"24e76c541a05bfa5","slug":null,"title":"Red de Co-citación Bibliométrica WebGL (V. FINAL)","thumbnail":"eb62a32effe31c69353571dd0a9f04c84ec3883608a17f9379723588ddb8fdfd","access_level":"public","create_time":"$D2026-03-04T17:16:43.190Z","update_time":"$D2026-06-17T17:23:00.405Z","view_time":null,"first_public_time":"$D2026-03-04T18:37:15.984Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"51fe6e2ec1bb1cf6","login":"kahernandezg","name":"Kevin Gutierrez","avatar_url":"https://avatars-next.observableusercontent.com/2565601e8fd1d0ae6653db3f9322b46e911143f9b192883ac7484f5393c17bde","tier":"starter_2024"},"version":21,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"10fe80357ee10d94","login":"kevin-amilcar-hernandez-gutierrez","name":"Kevin Amilcar Hernández Gutierrez","avatar_url":"https://avatars-next.observableusercontent.com/5e7bab77859fa97769d110935c464ca14bf058cee0bf8ec50ef736a6e77653f3","tier":null}],"members":[{"type":"team","id":"51fe6e2ec1bb1cf6","login":"kahernandezg","name":"Kevin Gutierrez","avatar_url":"https://avatars-next.observableusercontent.com/2565601e8fd1d0ae6653db3f9322b46e911143f9b192883ac7484f5393c17bde","tier":"starter_2024","role":"editor"},{"type":"individual","id":"10fe80357ee10d94","login":"kevin-amilcar-hernandez-gutierrez","name":"Kevin Amilcar Hernández Gutierrez","avatar_url":"https://avatars-next.observableusercontent.com/5e7bab77859fa97769d110935c464ca14bf058cee0bf8ec50ef736a6e77653f3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Red de Co-citación Bibliométrica WebGL (V. FINAL)","cells":[{"id":0,"value":"# Red de Co-citación Bibliométrica WebGL (V. FINAL)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"