27:null 28:["$","title",null,{"children":"Red de Co-citación WebGL | Kevin Gutierrez | Observable"}] 2d:T605d,chart = { // ============================================================================ // CONFIGURACIÓN WEBGL - AJUSTADA AL CONTENEDOR // ============================================================================ const CONFIG = { width: 1400, height: 800, // Altura fija para mejor control apiBase: "https://api.openalex.org", // Revistas específicas de Bibliotecología y CI solicitadas 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" ], maxWorksPerJournal: 50, // Aumentado para mejor red maxAuthors: 150, minCitations: 2, // Optimizaciones WebGL warmupTicks: 100, cooldownTicks: 50, linkDistance: 70, nodeRelSize: 5, 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], oa_medium: [241, 196, 15], oa_low: [230, 126, 34], oa_none: [149, 165, 166] } }; // ============================================================================ // 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 DESDE CDN // ============================================================================ const ForceGraph = await require('force-graph@1.43.4/dist/force-graph.min.js'); // ============================================================================ // FETCH CON VERIFICACIÓN DE DATOS REALES // ============================================================================ async function fetchJournalByName(name) { // Buscar revista por nombre exacto const url = `${CONFIG.apiBase}/sources?search=${encodeURIComponent(name)}&per_page=5&mailto=researcher@university.edu`; try { const response = await fetch(url); const data = await response.json(); // Encontrar la mejor coincidencia const match = data.results?.find(j => { const jName = j.display_name.toLowerCase(); const searchName = name.toLowerCase(); return jName === searchName || jName.includes(searchName) || searchName.includes(jName); }) || data.results?.[0]; if (match) { console.log(`✅ Encontrada: ${match.display_name} (Citas: ${match.cited_by_count})`); return match; } return null; } catch (e) { console.warn(`❌ Error buscando "${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 response = await fetch(url); const data = await response.json(); return (data.results || []).map(w => ({ ...w, journalId: sourceId, journalName: sourceName })); } catch (e) { console.warn(`Error obteniendo obras para ${sourceName}:`, e); return []; } } // ============================================================================ // CONSTRUCCIÓN DE RED CON DATOS REALES VERIFICADOS // ============================================================================ async function buildVerifiedNetwork() { console.log("🔍 Buscando revistas específicas en OpenAlex..."); // 1. Buscar revistas por nombre (datos reales verificados) const journalPromises = CONFIG.targetJournals.map(name => fetchJournalByName(name)); const foundJournals = (await Promise.all(journalPromises)).filter(Boolean); console.log(`📚 Revistas encontradas: ${foundJournals.length}/${CONFIG.targetJournals.length}`); if (foundJournals.length === 0) { throw new Error("No se encontraron revistas. Verifica la conexión a OpenAlex."); } // 2. Obtener obras de cada revista console.log("📄 Obteniendo obras de revistas..."); const allWorks = []; for (const journal of foundJournals) { const works = await fetchWorksForJournal(journal.id, journal.display_name); allWorks.push(...works); await new Promise(r => setTimeout(r, 150)); // Rate limiting } console.log(`📄 Total de obras obtenidas: ${allWorks.length}`); // 3. Filtrar obras con citas const significantWorks = allWorks.filter(w => (w.cited_by_count || 0) >= CONFIG.minCitations); console.log(`📄 Obras significativas (≥${CONFIG.minCitations} citas): ${significantWorks.length}`); // 4. Construir nodos y enlaces const nodes = []; const links = []; const nodeMap = new Map(); const authorIndex = new Map(); const workRefs = new Map(); // NODOS DE REVISTAS (con datos reales de OpenAlex) foundJournals.forEach(j => { const id = `j_${j.id.split('/').pop()}`; const country = j.country_code || 'XX'; const region = REGION_MAP[country] || 'other'; // Determinar OA real 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) * 2 + 8, // Más grandes por ser hubs 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 DE OBRAS significantWorks.forEach(w => { const id = `w_${w.id.split('/').pop()}`; const journalId = `j_${w.journalId.split('/').pop()}`; // Extraer autores (top 5) 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); } }); // Guardar referencias para co-citación 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, 60) || 'Untitled', val: Math.sqrt(w.cited_by_count || 0) + 3, 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); // Enlace obra -> revista if (nodeMap.has(journalId)) { links.push({ source: id, target: journalId, type: 'published', value: 1, color: 'rgba(189, 195, 199, 0.4)' }); } }); // NODOS DE AUTORES (top por citas) 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 }; }) .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, 40) || 'Unknown', val: Math.sqrt(author.totalCitations) + 5, works: author.works.length, citations: author.totalCitations, orcid: author.orcid || '', color: CONFIG.colors.author }; nodes.push(node); nodeMap.set(id, node); // Enlaces autor -> obra author.works.forEach(wid => { if (nodeMap.has(wid)) { links.push({ source: id, target: wid, type: 'authored', value: 1, color: 'rgba(142, 68, 173, 0.3)' }); } }); }); // CO-CITACIÓN ENTRE AUTORES (basada en referencias compartidas) console.log("🔗 Calculando co-citaciones entre autores..."); 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); let shared = 0; c1.forEach(ref => { if (c2.has(ref)) shared++; }); if (shared >= 2) { links.push({ source: `a_${a1.aid}`, target: `a_${a2.aid}`, type: 'cocitation', value: Math.min(shared / 2, 4), color: 'rgba(231, 76, 60, 0.6)' }); } } } // CO-CITACIÓN ENTRE REVISTAS (basada en citas cruzadas) const journalCitations = new Map(); foundJournals.forEach(j => { const jid = `j_${j.id.split('/').pop()}`; const refs = new Set(); significantWorks .filter(w => w.journalId === j.id) .forEach(w => { (w.referenced_works || []).forEach(r => refs.add(r.split('/').pop())); }); journalCitations.set(jid, refs); }); 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 c1 = journalCitations.get(j1); const c2 = journalCitations.get(j2); let shared = 0; c1.forEach(ref => { if (c2.has(ref)) shared++; }); if (shared > 0) { links.push({ source: j1, target: j2, type: 'journal_cocitation', value: Math.min(shared / 5, 3), color: 'rgba(52, 152, 219, 0.5)' }); } } } console.log(`✅ Red completa: ${nodes.length} nodos, ${links.length} enlaces`); return { nodes, links, journals: foundJournals }; } // ============================================================================ // CONTENEDOR PRINCIPAL - AJUSTADO Y RESPONSIVE // ============================================================================ const container = d3.create("div") .style("width", "100%") .style("max-width", "100%") .style("height", "100%") .style("font-family", "system-ui, -apple-system, sans-serif") .style("position", "relative") .style("display", "flex") .style("flex-direction", "column"); // Header compacto const header = container.append("div") .style("padding", "12px 15px") .style("background", "#ffffff") .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", "18px") .style("color", "#2c3e50") .style("font-weight", "600") .text("Red de Co-citación WebGL"); titleRow.append("div") .style("font-size", "11px") .style("color", "#666") .style("background", "#f1f3f4") .style("padding", "4px 8px") .style("border-radius", "4px") .text("Datos reales de OpenAlex"); // Controles compactos const controls = header.append("div") .style("display", "flex") .style("gap", "8px") .style("margin-top", "8px") .style("flex-wrap", "wrap") .style("align-items", "center"); const filters = { journals: true, authors: true, works: false }; const createToggle = (label, key, color) => { const btn = controls.append("button") .text(`${filters[key] ? '●' : '○'} ${label}`) .style("padding", "4px 10px") .style("border", "1px solid #ddd") .style("border-radius", "12px") .style("background", filters[key] ? `rgb(${color.join(',')})` : "#fff") .style("color", filters[key] ? "#fff" : "#333") .style("cursor", "pointer") .style("font-size", "11px") .style("font-weight", "500") .style("transition", "all 0.2s"); btn.on("click", () => { filters[key] = !filters[key]; btn.style("background", filters[key] ? `rgb(${color.join(',')})` : "#fff") .style("color", filters[key] ? "#fff" : "#333") .text(`${filters[key] ? '●' : '○'} ${label}`); updateGraph(); }); }; createToggle("Revistas", "journals", CONFIG.colors.europe); createToggle("Autores", "authors", CONFIG.colors.author); createToggle("Obras", "works", CONFIG.colors.work); // Métricas en línea const metrics = controls.append("div") .style("margin-left", "auto") .style("display", "flex") .style("gap", "12px") .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: --"); // ============================================================================ // CONTENEDOR WEBGL - AJUSTADO AL ESPACIO // ============================================================================ const graphWrapper = container.append("div") .style("flex", "1") .style("position", "relative") .style("min-height", "500px") .style("background", "#f6f8fa") .style("border-radius", "0 0 8px 8px") .style("overflow", "hidden"); // ============================================================================ // INICIALIZAR DATOS Y GRÁFICO // ============================================================================ const { nodes: allNodes, links: allLinks, journals } = await buildVerifiedNetwork(); // Filtrar datos según controles 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 }; } // Crear gráfico WebGL const graphDiv = graphWrapper.append("div") .style("width", "100%") .style("height", "100%") .style("position", "absolute"); const Graph = ForceGraph()(graphDiv.node()) .graphData(getVisibleData()) .width(graphWrapper.node().clientWidth) .height(graphWrapper.node().clientHeight) .backgroundColor('#f6f8fa') // Nodos .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' : node.oaLevel === 'low' ? '🔓 1-49% OA' : '⚪ Cerrado'}

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

${node.name}

Obras: ${node.works} | Citas: ${node.citations.toLocaleString()}

`; } return `

${node.name}

Año: ${node.year} | Citas: ${node.citations}

`; }) .nodeCanvasObject((node, ctx, globalScale) => { // Dibujar anillo OA para revistas if (node.type === 'journal') { const radius = node.val * CONFIG.nodeRelSize; const oaColor = CONFIG.colors[`oa_${node.oaLevel}`] || CONFIG.colors.oa_none; ctx.beginPath(); ctx.arc(node.x, node.y, radius + 3, 0, 2 * Math.PI); ctx.strokeStyle = `rgba(${oaColor.join(',')}, 0.8)`; ctx.lineWidth = 2; ctx.stroke(); // Indicador de región pequeño ctx.beginPath(); ctx.arc(node.x - radius - 6, node.y - radius - 6, 4, 0, 2 * Math.PI); ctx.fillStyle = `rgb(${node.color.join(',')})`; ctx.fill(); } }) .onNodeClick(node => { if (node.url) window.open(node.url, '_blank'); if (node.doi) window.open(node.doi, '_blank'); }) // Enlaces .linkColor('color') .linkWidth(l => l.value || 1) .linkDirectionalParticles(l => l.type === 'cocitation' ? 3 : 0) .linkDirectionalParticleSpeed(0.008) .linkDirectionalParticleWidth(2) // Física optimizada .d3Force('link', d3.forceLink().id(d => d.id).distance(d => { if (d.type === 'cocitation') return 100; if (d.type === 'journal_cocitation') return 150; return CONFIG.linkDistance; }).strength(0.08)) .d3Force('charge', d3.forceManyBody().strength(-300).theta(0.9)) .d3Force('center', d3.forceCenter().strength(0.08)) .d3Force('collide', d3.forceCollide().radius(d => d.val * CONFIG.nodeRelSize + 8).strength(0.6)) // Rendimiento .warmupTicks(CONFIG.warmupTicks) .cooldownTicks(CONFIG.cooldownTicks) .onEngineStop(() => { console.log("Simulación estabilizada"); }); // Actualizar métricas function updateMetrics() { const d = getVisibleData(); mNodes.text(`Nodos: ${d.nodes.length}`); mLinks.text(`Enlaces: ${d.links.length}`); } updateMetrics(); function updateGraph() { Graph.graphData(getVisibleData()); updateMetrics(); } // Monitor FPS 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(); // Responsive const resizeObserver = new ResizeObserver(entries => { for (let entry of entries) { Graph.width(entry.contentRect.width).height(entry.contentRect.height); } }); resizeObserver.observe(graphWrapper.node()); // ============================================================================ // LEYENDA FLOTANTE - DENTRO DEL CONTENEDOR // ============================================================================ const legend = graphWrapper.append("div") .style("position", "absolute") .style("top", "12px") .style("right", "12px") .style("background", "rgba(255,255,255,0.95)") .style("padding", "10px") .style("border-radius", "6px") .style("box-shadow", "0 1px 3px rgba(0,0,0,0.1)") .style("font-size", "10px") .style("max-width", "140px"); legend.append("div") .style("font-weight", "600") .style("margin-bottom", "6px") .style("color", "#333") .text("Leyenda"); const legendItems = [ { c: CONFIG.colors.europe, l: "Revista Europa" }, { c: CONFIG.colors.americas, l: "Revista América" }, { c: CONFIG.colors.africa, l: "Revista África" }, { c: CONFIG.colors.author, l: "Autor" }, { c: CONFIG.colors.work, l: "Obra" }, { c: CONFIG.colors.oa_high, l: "100% OA" } ]; legendItems.forEach(item => { const row = legend.append("div") .style("display", "flex") .style("align-items", "center") .style("margin", "3px 0"); row.append("div") .style("width", "8px") .style("height", "8px") .style("background", `rgb(${item.c.join(',')})`) .style("border-radius", "50%") .style("margin-right", "6px"); row.append("span").style("color", "#555").text(item.l); }); // Instrucciones flotantes const instructions = graphWrapper.append("div") .style("position", "absolute") .style("bottom", "12px") .style("left", "12px") .style("background", "rgba(255,255,255,0.9)") .style("padding", "8px 12px") .style("border-radius", "6px") .style("font-size", "10px") .style("color", "#666") .style("box-shadow", "0 1px 3px rgba(0,0,0,0.1)"); instructions.html(` Interacción: Arrastrar nodos • Click para URL • Scroll zoom `); // Info de revistas cargadas const journalInfo = graphWrapper.append("div") .style("position", "absolute") .style("bottom", "12px") .style("right", "12px") .style("background", "rgba(255,255,255,0.9)") .style("padding", "8px 12px") .style("border-radius", "6px") .style("font-size", "10px") .style("color", "#666") .style("max-width", "200px") .style("text-align", "right"); journalInfo.html(`

${journals.length} revistas cargadas

${journals.map(j => j.display_name.substring(0, 25)).join('
')}

`); return container.node(); }2e:[] 2b:{"id":"8881df302bbe14ac","slug":null,"title":"Red de Co-citación WebGL","thumbnail":"fc69e19a3b0403120b5a35eaa54d771098cbb00eca4cc35ecfd059dc6d10c96b","access_level":"public","create_time":"$D2026-03-04T03:46:25.689Z","update_time":"$D2026-03-04T03:49:41.268Z","view_time":null,"first_public_time":"$D2026-03-04T03:49:12.154Z","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":9,"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 WebGL","cells":[{"id":0,"value":"# Red de Co-citación WebGL","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"