27:null 28:["$","title",null,{"children":"Mapa de co-ocurrencia de topics en Revistas de Ciencias de la Información V.2.1 | Kevin Gutierrez | Observable"}] 2d:T8186,chart = { // ============================================================================ // CONFIGURACION // ============================================================================ const CONFIG = { apiBase: "https://api.openalex.org", maxWorksPerJournal: 50, minTopicScore: 0.5, minCooccurrence: 2, maxTopics: 80, apiKey: "CTd1mNWmArkFaXHm0cMszd", colors: { "Information Science": [41, 128, 185], "Library Science": [142, 68, 173], "Computer Science": [39, 174, 96], "Management": [211, 84, 0], "Environmental Science": [192, 57, 43], "Medical Informatics": [22, 160, 133], "Knowledge Management": [230, 126, 34], "Data Science": [52, 73, 94], "Other": [149, 165, 166] } }; const TARGET_JOURNALS = [ { name: "IEEE Transactions on Information Theory", displayName: "IEEE Trans. Info. Theory" }, { name: "Scientometrics", displayName: "Scientometrics" }, { name: "International Journal of Information Management", displayName: "Int. J. Info. Management" }, { name: "Information Systems Research", displayName: "Info. Systems Research" }, { name: "Scientific Data", displayName: "Scientific Data" }, { name: "Information Processing and Management", displayName: "Info. Processing & Mgmt." }, { name: "Journal of Information Systems Management", displayName: "J. Info. Systems Mgmt." }, { name: "Information Communication and Society", displayName: "Info. Comm. & Society" }, { name: "Education and Information Technologies", displayName: "Edu. & Info. Tech." }, { name: "Government Information Quarterly", displayName: "Gov. Info. Quarterly" }, { name: "Notes and Queries", displayName: "Notes & Queries" }, { name: "Lecture Notes in Control and Information Sciences", displayName: "Lect. Notes Ctrl. & Info. Sci." }, { name: "European Journal of Information Systems", displayName: "Eur. J. Info. Systems" }, { name: "Journal of Academic Librarianship", displayName: "J. Academic Librarianship" }, { name: "Telecommunications Policy", displayName: "Telecom. Policy" }, { name: "Journal of Documentation", displayName: "J. Documentation" }, { name: "Personal and Ubiquitous Computing", displayName: "Personal & Ubiquitous Comp." }, { name: "Journal of Informetrics", displayName: "J. Informetrics" }, { name: "Journal of Information Science", displayName: "J. Information Science" }, { name: "Notes", displayName: "Notes" } ]; // ============================================================================ // CARGA DE LIBRERIAS // ============================================================================ const ForceGraph = await require('force-graph@1.43.4/dist/force-graph.min.js'); // ============================================================================ // FUNCIONES // ============================================================================ const cache = new Map(); async function sleep(ms) { return new Promise(r => setTimeout(r, ms)); } async function fetchWithRetry(url, maxRetries = 5) { if (cache.has(url)) return cache.get(url); const separator = url.includes('?') ? '&' : '?'; const urlWithKey = url + separator + 'api_key=' + CONFIG.apiKey; for (let i = 0; i < maxRetries; i++) { try { const response = await fetch(urlWithKey, { headers: { 'User-Agent': 'MiApp/1.0 (tuemail@ucr.ac.cr)', 'Accept': 'application/json' } }); if (response.status === 429) { const delay = Math.pow(2, i) * 3000 + Math.random() * 2000; console.warn('Rate limited. Esperando ' + Math.round(delay) + 'ms...'); await sleep(delay); continue; } if (!response.ok) { console.warn('HTTP ' + response.status + '. Reintentando...'); await sleep(3000); continue; } let data; try { data = await response.json(); } catch (jsonError) { console.warn('Respuesta no es JSON: ' + url); continue; } if (!data || typeof data !== 'object') { console.warn('Respuesta invalida: ' + url); continue; } cache.set(url, data); return data; } catch (error) { console.error('Intento ' + (i + 1) + ' fallido: ' + url, error.message); if (i === maxRetries - 1) { return { results: [], meta: { count: 0 } }; } await sleep(3000); } } return { results: [], meta: { count: 0 } }; } async function findJournal(journalName) { const url = CONFIG.apiBase + '/sources?search=' + encodeURIComponent(journalName) + '&per_page=5'; const data = await fetchWithRetry(url); if (!data.results || data.results.length === 0) return null; const match = data.results.find(j => { const name = j.display_name.toLowerCase(); const search = journalName.toLowerCase(); return name.includes(search.split(' ')[0]) && name.includes(search.split(' ').slice(-1)[0]); }) || data.results[0]; return match; } async function fetchWorks(sourceId) { const url = CONFIG.apiBase + '/works?filter=primary_location.source.id:' + sourceId + '&per_page=' + CONFIG.maxWorksPerJournal + '&sort=cited_by_count:desc'; const data = await fetchWithRetry(url); return data.results || []; } function classifyDomain(topicName, topicSubfield, topicField) { const name = (topicName || "").toLowerCase(); const subfield = (topicSubfield || "").toLowerCase(); const field = (topicField || "").toLowerCase(); if (name.includes("library") || name.includes("bibliotec") || name.includes("archiv") || subfield.includes("library") || name.includes("catalog") || name.includes("metadata")) { return "Library Science"; } if (name.includes("information science") || name.includes("informetrics") || name.includes("bibliometr") || name.includes("scientometr") || name.includes("citation") || subfield.includes("information")) { return "Information Science"; } if (name.includes("computer") || name.includes("software") || name.includes("algorithm") || name.includes("artificial intelligence") || name.includes("machine learning") || subfield.includes("computer")) { return "Computer Science"; } if (name.includes("management") || name.includes("business") || name.includes("enterprise") || name.includes("organization") || subfield.includes("management")) { return "Management"; } if (name.includes("environmental") || name.includes("ecology") || name.includes("range management") || name.includes("conservation") || subfield.includes("environmental")) { return "Environmental Science"; } if (name.includes("medical") || name.includes("health") || name.includes("clinical") || name.includes("biomedical") || subfield.includes("medical")) { return "Medical Informatics"; } if (name.includes("knowledge") || name.includes("ontology") || name.includes("taxonomy") || name.includes("classification")) { return "Knowledge Management"; } if (name.includes("data") || name.includes("big data") || name.includes("analytics") || name.includes("statistics")) { return "Data Science"; } return "Other"; } // ============================================================================ // CONSTRUCCION DE RED // ============================================================================ async function buildTopicCooccurrenceNetwork() { const journalMap = new Map(); let totalWorks = 0; for (const target of TARGET_JOURNALS) { const journal = await findJournal(target.name); if (journal) { journalMap.set(journal.id, { ...target, openalexId: journal.id, displayName: journal.display_name }); } await sleep(5000); } if (journalMap.size === 0) throw new Error("No se encontraron revistas"); const topicWorks = new Map(); const workTopics = new Map(); const topicDomainMap = new Map(); for (const [journalId, journalInfo] of journalMap) { const works = await fetchWorks(journalId); totalWorks += works.length; for (const work of works) { const workId = work.id; const workTopicSet = new Set(); const topics = work.topics || []; topics.forEach(topic => { if (topic.score >= CONFIG.minTopicScore) { const topicId = topic.id; const domain = classifyDomain(topic.display_name, topic.subfield ? topic.subfield.display_name : "", topic.field ? topic.field.display_name : ""); workTopicSet.add(topicId); topicDomainMap.set(topicId, domain); if (!topicWorks.has(topicId)) { topicWorks.set(topicId, { name: topic.display_name, domain: domain, field: topic.field ? topic.field.display_name : "Unknown", subfield: topic.subfield ? topic.subfield.display_name : "", works: new Set(), journals: new Set(), totalScore: 0 }); } const data = topicWorks.get(topicId); data.works.add(workId); data.journals.add(journalId); data.totalScore += topic.score; } }); if (topics.length === 0 && work.concepts) { work.concepts.forEach(concept => { if (concept.score >= CONFIG.minTopicScore) { const conceptId = concept.id; const domain = classifyDomain(concept.display_name, "", ""); workTopicSet.add(conceptId); topicDomainMap.set(conceptId, domain); if (!topicWorks.has(conceptId)) { topicWorks.set(conceptId, { name: concept.display_name, domain: domain, field: "Legacy Concept", subfield: "", works: new Set(), journals: new Set(), totalScore: 0 }); } const data = topicWorks.get(conceptId); data.works.add(workId); data.journals.add(journalId); data.totalScore += concept.score; } }); } workTopics.set(workId, workTopicSet); } await sleep(5000); } topicWorks.forEach((data, id) => { data.avgScore = data.totalScore / data.works.size; data.frequency = data.works.size; }); const sortedTopics = Array.from(topicWorks.entries()) .sort((a, b) => b[1].frequency - a[1].frequency) .slice(0, CONFIG.maxTopics); const selectedTopicIds = new Set(sortedTopics.map(([id]) => id)); const cooccurrence = new Map(); for (const [workId, topics] of workTopics) { const topicArray = Array.from(topics).filter(id => selectedTopicIds.has(id)); for (let i = 0; i < topicArray.length; i++) { for (let j = i + 1; j < topicArray.length; j++) { const key = [topicArray[i], topicArray[j]].sort().join('|'); cooccurrence.set(key, (cooccurrence.get(key) || 0) + 1); } } } const domainCounts = {}; const nodes = sortedTopics.map(([id, data]) => { domainCounts[data.domain] = (domainCounts[data.domain] || 0) + 1; return { id: id, name: data.name, val: Math.sqrt(data.frequency) * 2.5 + 4, frequency: data.frequency, worksCount: data.works.size, journalsCount: data.journals.size, domain: data.domain, field: data.field, subfield: data.subfield, avgScore: data.avgScore, color: CONFIG.colors[data.domain] || CONFIG.colors.Other, __highlighted: false }; }); const links = []; cooccurrence.forEach((count, key) => { const [source, target] = key.split('|'); if (count >= CONFIG.minCooccurrence) { links.push({ source: source, target: target, value: Math.sqrt(count), rawCount: count }); } }); return { nodes: nodes, links: links, domainCounts: domainCounts, totalWorks: totalWorks }; } // ============================================================================ // CONTENEDOR PRINCIPAL // ============================================================================ const container = d3.create("div") .style("width", "100%") .style("height", "900px") .style("font-family", "'Times New Roman', Georgia, serif") .style("position", "relative") .style("background", "#ffffff") .style("border", "2px solid #2c3e50") .style("overflow", "hidden"); // ============================================================================ // ENCABEZADO // ============================================================================ const header = container.append("div") .style("padding", "25px 40px") .style("background", "#ffffff") .style("border-bottom", "3px solid #2c3e50") .style("text-align", "center"); header.append("h1") .style("margin", "0 0 10px 0") .style("font-size", "22px") .style("font-weight", "bold") .style("color", "#2c3e50") .style("text-transform", "uppercase") .style("letter-spacing", "2px") .text("Mapa de Co-ocurrencia de Temas en Ciencias de la Informacion"); header.append("h2") .style("margin", "0 0 15px 0") .style("font-size", "14px") .style("font-weight", "normal") .style("font-style", "italic") .style("color", "#555") .text("Analisis de redes tematicas en las 20 revistas mas citadas de Bibliotecologia, Documentacion y Archivistica"); const metaLine = header.append("div") .style("font-size", "11px") .style("color", "#666") .style("margin-top", "15px") .style("padding-top", "15px") .style("border-top", "1px solid #ddd"); metaLine.append("span").html("Fuente de datos: OpenAlex API | "); metaLine.append("span").html("Periodo de analisis: 2019-2024 | "); metaLine.append("span").html("Revistas analizadas: 20 | "); metaLine.append("span").attr("class", "metric-works").html("Articulos procesados: --"); // ============================================================================ // CONTROLES (con filtro de disciplina integrado) // ============================================================================ const controls = container.append("div") .style("padding", "12px 40px") .style("background", "#f8f9fa") .style("border-bottom", "1px solid #dee2e6") .style("display", "flex") .style("align-items", "center") .style("gap", "30px"); // --- Grupo 1: Umbral de co-ocurrencia --- const controlGroup = controls.append("div") .style("display", "flex") .style("align-items", "center") .style("gap", "10px"); controlGroup.append("label") .style("font-size", "12px") .style("font-weight", "bold") .style("color", "#495057") .text("Umbral minimo de co-ocurrencia:"); const thresholdSlider = controlGroup.append("input") .attr("type", "range") .attr("min", "1") .attr("max", "20") .attr("value", "2") .style("width", "150px"); const thresholdValue = controlGroup.append("span") .style("font-size", "13px") .style("font-weight", "bold") .style("color", "#2c3e50") .style("min-width", "25px") .text("2"); // --- Grupo 2: Filtro por disciplina --- const domainFilterGroup = controls.append("div") .style("display", "flex") .style("align-items", "center") .style("gap", "10px") .style("border-left", "1px solid #ced4da") .style("padding-left", "20px"); domainFilterGroup.append("label") .style("font-size", "12px") .style("font-weight", "bold") .style("color", "#495057") .text("Disciplina:"); const domainSelect = domainFilterGroup.append("select") .style("padding", "5px 10px") .style("font-size", "12px") .style("font-family", "inherit") .style("border", "1px solid #ced4da") .style("border-radius", "3px") .style("background", "white") .style("cursor", "pointer") .style("min-width", "180px"); domainSelect.append("option") .attr("value", "all") .text("Todas las disciplinas"); // --- Grupo 3: Metricas --- const metricsGroup = controls.append("div") .style("display", "flex") .style("gap", "25px") .style("margin-left", "auto"); const createMetric = (label, id) => { const div = metricsGroup.append("div").style("text-align", "center"); div.append("div") .attr("id", id) .style("font-size", "18px") .style("font-weight", "bold") .style("color", "#2c3e50") .text("--"); div.append("div") .style("font-size", "10px") .style("color", "#6c757d") .style("text-transform", "uppercase") .text(label); }; createMetric("Temas", "metric-nodes"); createMetric("Relaciones", "metric-links"); const resetBtn = controls.append("button") .text("Reiniciar visualizacion") .style("padding", "6px 14px") .style("background", "#6c757d") .style("color", "white") .style("border", "none") .style("border-radius", "3px") .style("font-size", "11px") .style("font-family", "inherit") .style("cursor", "pointer"); // ============================================================================ // CONTENEDOR DEL GRAFO // ============================================================================ const graphContainer = container.append("div") .style("width", "100%") .style("height", "calc(100% - 200px)") .style("position", "relative") .style("background", "#f8f9fa"); const loadingDiv = graphContainer.append("div") .style("position", "absolute") .style("top", "50%") .style("left", "50%") .style("transform", "translate(-50%, -50%)") .style("text-align", "center") .style("z-index", "100"); loadingDiv.append("div") .style("font-size", "40px") .style("margin-bottom", "15px") .text("⏳"); loadingDiv.append("div") .style("font-size", "14px") .style("color", "#2c3e50") .style("font-weight", "bold") .text("Cargando datos de OpenAlex..."); loadingDiv.append("div") .style("font-size", "11px") .style("color", "#666") .style("margin-top", "8px") .text("Analizando revistas y extrayendo temas"); // ============================================================================ // PANEL DE INFORMACION // ============================================================================ const infoPanel = container.append("div") .style("position", "absolute") .style("top", "210px") .style("right", "40px") .style("width", "300px") .style("background", "#ffffff") .style("border", "2px solid #2c3e50") .style("padding", "0") .style("box-shadow", "0 4px 12px rgba(0,0,0,0.15)") .style("font-size", "12px") .style("z-index", "1000") .style("display", "none"); const infoHeader = infoPanel.append("div") .style("padding", "15px 20px") .style("background", "#2c3e50") .style("color", "white") .style("position", "relative"); const infoTitle = infoHeader.append("div") .style("font-size", "14px") .style("font-weight", "bold") .text(""); infoHeader.append("div") .style("position", "absolute") .style("top", "10px") .style("right", "15px") .style("cursor", "pointer") .style("font-size", "18px") .text("×") .on("click", () => { infoPanel.style("display", "none"); activeNodeId = null; if (Graph) { Graph.graphData().nodes.forEach(n => n.__highlighted = false); Graph.refresh(); } }); const infoContent = infoPanel.append("div") .style("padding", "20px"); // ============================================================================ // LEYENDA // ============================================================================ const legend = container.append("div") .style("position", "absolute") .style("top", "220px") .style("left", "40px") .style("width", "220px") .style("background", "#ffffff") .style("border", "1px solid #dee2e6") .style("padding", "15px") .style("box-shadow", "0 2px 8px rgba(0,0,0,0.1)") .style("z-index", "100"); legend.append("div") .style("font-size", "12px") .style("font-weight", "bold") .style("color", "#2c3e50") .style("border-bottom", "2px solid #2c3e50") .style("padding-bottom", "8px") .style("margin-bottom", "12px") .text("Clasificacion Disciplinaria"); // ============================================================================ // VARIABLES GLOBALES // ============================================================================ let Graph = null; let originalData = null; let activeNodeId = null; let currentDomainFilter = "all"; // Variable para el filtro de disciplina // ============================================================================ // FUNCIONES DE INTERACCION // ============================================================================ function updateGraph() { if (!originalData || !Graph) return; const threshold = parseInt(thresholdSlider.node().value); thresholdValue.text(threshold); // Aplicar umbral de co-ocurrencia let visibleLinks = originalData.links.filter(l => l.value >= threshold); // Aplicar filtro de dominio si esta activo if (currentDomainFilter !== "all") { const visibleNodeIds = new Set( originalData.nodes .filter(n => n.domain === currentDomainFilter) .map(n => n.id) ); visibleLinks = visibleLinks.filter(l => { const sourceId = typeof l.source === 'object' ? l.source.id : l.source; const targetId = typeof l.target === 'object' ? l.target.id : l.target; return visibleNodeIds.has(sourceId) && visibleNodeIds.has(targetId); }); } // Determinar nodos visibles const linkedNodeIds = new Set(); visibleLinks.forEach(l => { linkedNodeIds.add(typeof l.source === 'object' ? l.source.id : l.source); linkedNodeIds.add(typeof l.target === 'object' ? l.target.id : l.target); }); const visibleNodes = currentDomainFilter === "all" ? originalData.nodes : originalData.nodes.filter(n => n.domain === currentDomainFilter && linkedNodeIds.has(n.id)); Graph.graphData({ nodes: visibleNodes, links: visibleLinks }); d3.select("#metric-nodes").text(visibleNodes.length); d3.select("#metric-links").text(visibleLinks.length); } function showNodeInfo(node) { activeNodeId = node.id; infoTitle.text(node.name); const color = CONFIG.colors[node.domain] || CONFIG.colors.Other; const colorStr = "rgb(" + color.join(",") + ")"; infoContent.selectAll("*").remove(); const domainSection = infoContent.append("div").style("margin-bottom", "15px"); domainSection.append("div") .style("font-size", "10px") .style("color", "#6c757d") .style("text-transform", "uppercase") .style("letter-spacing", "1px") .style("margin-bottom", "5px") .text("Dominio Disciplinario"); const domainRow = domainSection.append("div") .style("display", "flex") .style("align-items", "center") .style("gap", "8px") .style("padding", "8px") .style("background", "#f8f9fa") .style("border-left", "4px solid " + colorStr); domainRow.append("div") .style("width", "12px") .style("height", "12px") .style("border-radius", "50%") .style("background", colorStr); domainRow.append("span") .style("font-weight", "bold") .style("color", "#2c3e50") .text(node.domain); const stats = [ { label: "Frecuencia tematica", value: node.frequency }, { label: "Articulos vinculados", value: node.worksCount }, { label: "Revistas de origen", value: node.journalsCount }, { label: "Relevancia promedio", value: (node.avgScore * 100).toFixed(1) + "%" } ]; stats.forEach(s => { const row = infoContent.append("div") .style("display", "flex") .style("justify-content", "space-between") .style("padding", "8px 0") .style("border-bottom", "1px dotted #dee2e6"); row.append("span").style("color", "#6c757d").text(s.label); row.append("span").style("font-weight", "bold").style("color", "#2c3e50").text(s.value); }); const classSection = infoContent.append("div") .style("margin-top", "15px") .style("padding-top", "15px") .style("border-top", "1px solid #dee2e6"); classSection.append("div") .style("font-size", "10px") .style("color", "#6c757d") .style("text-transform", "uppercase") .style("letter-spacing", "1px") .style("margin-bottom", "5px") .text("Clasificacion OpenAlex"); const classText = classSection.append("div") .style("font-size", "11px") .style("line-height", "1.6"); classText.append("div").html("Campo: " + node.field); if (node.subfield) { classText.append("div").html("Subcampo: " + node.subfield); } infoPanel.style("display", "block"); } // ============================================================================ // CARGAR DATOS Y ACTUALIZAR // ============================================================================ try { const data = await buildTopicCooccurrenceNetwork(); originalData = data; // Poblar el selector de disciplinas const domains = [...new Set(data.nodes.map(n => n.domain))].sort(); domains.forEach(domain => { domainSelect.append("option") .attr("value", domain) .text(domain); }); loadingDiv.style("display", "none"); d3.select("#metric-nodes").text(data.nodes.length); d3.select("#metric-links").text(data.links.length); d3.select(".metric-works span").text(data.totalWorks); Graph = ForceGraph()(graphContainer.node()) .graphData({ nodes: data.nodes, links: data.links }) .backgroundColor('#ffffff') .linkCurvature(0.2) .linkColor(() => 'rgba(100, 100, 110, 0.25)') .linkWidth(link => Math.sqrt(link.value) * 0.6) .linkDirectionalParticles(link => link.rawCount > 10 ? 2 : 0) .linkDirectionalParticleSpeed(0.006) .linkDirectionalParticleWidth(1.5) .nodeRelSize(5) .nodeVal('val') .nodeCanvasObject((node, ctx, globalScale) => { const size = node.val * 3.5; const [r, g, b] = node.color; ctx.beginPath(); ctx.arc(node.x + 2, node.y + 2, size, 0, 2 * Math.PI); ctx.fillStyle = 'rgba(0, 0, 0, 0.15)'; ctx.fill(); const gradient = ctx.createRadialGradient( node.x - size*0.3, node.y - size*0.3, 0, node.x, node.y, size ); gradient.addColorStop(0, 'rgba(' + Math.min(255, r+50) + ',' + Math.min(255, g+50) + ',' + Math.min(255, b+50) + ',1)'); gradient.addColorStop(0.5, 'rgba(' + r + ',' + g + ',' + b + ',1)'); gradient.addColorStop(1, 'rgba(' + Math.floor(r*0.6) + ',' + Math.floor(g*0.6) + ',' + Math.floor(b*0.6) + ',1)'); ctx.beginPath(); ctx.arc(node.x, node.y, size, 0, 2 * Math.PI); ctx.fillStyle = gradient; ctx.fill(); ctx.beginPath(); ctx.arc(node.x - size*0.3, node.y - size*0.3, size*0.22, 0, 2 * Math.PI); ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'; ctx.fill(); if (node.__highlighted) { ctx.beginPath(); ctx.arc(node.x, node.y, size + 4, 0, 2 * Math.PI); ctx.strokeStyle = 'rgba(218, 165, 32, 0.9)'; ctx.lineWidth = 3; ctx.stroke(); ctx.beginPath(); ctx.arc(node.x, node.y, size + 10, 0, 2 * Math.PI); ctx.strokeStyle = 'rgba(218, 165, 32, 0.3)'; ctx.lineWidth = 6; ctx.stroke(); } if (globalScale > 0.35 || node.frequency > 10) { ctx.font = '600 ' + Math.max(10, size * 0.35) + 'px "Times New Roman", serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'top'; const textY = node.y + size + 8; const textWidth = ctx.measureText(node.name).width; ctx.fillStyle = 'rgba(255,255,255,0.92)'; ctx.fillRect(node.x - textWidth/2 - 5, textY - 2, textWidth + 10, 20); ctx.fillStyle = '#2c3e50'; ctx.fillText(node.name, node.x, textY); } }) .d3Force('link', d3.forceLink().id(d => d.id).distance(90).strength(0.15)) .d3Force('charge', d3.forceManyBody().strength(-400)) .d3Force('center', d3.forceCenter(graphContainer.node().clientWidth / 2, graphContainer.node().clientHeight / 2).strength(0.15)) .d3Force('collide', d3.forceCollide().radius(n => n.val * 3.5 + 12).strength(0.8)) .warmupTicks(150) .cooldownTicks(60) .cooldownTime(30000) .onNodeClick((node, event) => { event.stopPropagation(); Graph.graphData().nodes.forEach(n => n.__highlighted = false); node.__highlighted = true; showNodeInfo(node); Graph.refresh(); }) .onBackgroundClick(() => { infoPanel.style("display", "none"); activeNodeId = null; Graph.graphData().nodes.forEach(n => n.__highlighted = false); Graph.refresh(); }) .onNodeHover((node) => { graphContainer.style('cursor', node ? 'pointer' : 'default'); }); // ============================================ // EVENTOS // ============================================ thresholdSlider.on("input", updateGraph); resetBtn.on("click", () => { thresholdSlider.property("value", 2); domainSelect.property("value", "all"); currentDomainFilter = "all"; infoPanel.style("display", "none"); activeNodeId = null; Graph.graphData().nodes.forEach(n => n.__highlighted = false); updateGraph(); Graph.refresh(); }); // Evento del filtro de disciplina domainSelect.on("change", function() { currentDomainFilter = this.value; updateGraph(); }); window.addEventListener('resize', () => { if (Graph) { const width = graphContainer.node().clientWidth; const height = graphContainer.node().clientHeight; Graph.width(width).height(height); Graph.d3Force('center', d3.forceCenter(width / 2, height / 2).strength(0.15)); } }); const sortedDomains = Object.entries(data.domainCounts).sort((a, b) => b[1] - a[1]); sortedDomains.forEach(([domain, count]) => { const color = CONFIG.colors[domain] || CONFIG.colors.Other; const row = legend.append("div") .style("display", "flex") .style("align-items", "center") .style("margin", "6px 0") .style("padding", "4px"); row.append("div") .style("width", "12px") .style("height", "12px") .style("border-radius", "50%") .style("margin-right", "10px") .style("background", 'linear-gradient(135deg, rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',1) 0%, rgba(' + Math.floor(color[0]*0.7) + ',' + Math.floor(color[1]*0.7) + ',' + Math.floor(color[2]*0.7) + ',1) 100%)') .style("box-shadow", "0 1px 3px rgba(0,0,0,0.2)"); row.append("span") .style("font-size", "11px") .style("color", "#495057") .text(domain); row.append("span") .style("margin-left", "auto") .style("font-size", "10px") .style("color", "#6c757d") .style("background", "#e9ecef") .style("padding", "1px 6px") .style("border-radius", "10px") .text(count); }); container.append("div") .style("position", "absolute") .style("bottom", "10px") .style("left", "40px") .style("font-size", "9px") .style("color", "#6c757d") .style("font-style", "italic") .text("Nota: Los nodos representan temas extraidos del sistema de clasificacion de OpenAlex. El tamano indica frecuencia de aparicion en el corpus analizado."); } catch (error) { loadingDiv.html( '

❌

' + '

Error al cargar datos

' + '

' + error.message + '

' + '

Verifique la conexion a api.openalex.org

' ); console.error(error); } return container.node(); }2e:[] 2b:{"id":"cd7960a775c17999","slug":null,"title":"Mapa de co-ocurrencia de topics en Revistas de Ciencias de la Información V.2.1","thumbnail":"d2e98fabbff4aeeb141639dfa0fcb0b146bb8eab050e216cb4923de73ef19a0f","access_level":"public","create_time":"$D2026-06-03T17:16:23.832Z","update_time":"$D2026-06-13T16:19:14.416Z","view_time":null,"first_public_time":"$D2026-06-03T17:23:36.735Z","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":27,"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":"Mapa de co-ocurrencia de topics en Revistas de Ciencias de la Información V.2.1","cells":[{"id":0,"value":"# Mapa de co-ocurrencia de topics en Revistas de Ciencias de la Información V.2.1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"ForceGraph = require('force-graph@1.43.4/dist/force-graph.min.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","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"