31:Td6da,chart = { // ============================================================================ // CONFIGURACIÓN Y CONSTANTES // ============================================================================ const CONFIG = { width: 1200, height: 900, perPage: 200, // Máximo permitido por OpenAlex maxWorksPerJournal: 1000, // Límite práctico para rendimiento (ajustable) // IDs de las 4 revistas journals: [ { id: "4210199283", name: "ECA", color: "#1f4e79", short: "ECA" }, // Azul oscuro { id: "4210185616", name: "RRCSH", color: "#c55a11", short: "RRCSH" }, // Naranja { id: "4210170416", name: "Realidad Empresarial", color: "#70ad47", short: "RE" }, // Verde { id: "4210171525", name: "RLT", color: "#7030a0", short: "RLT" } // Púrpura ], apiBase: "https://api.openalex.org/works", colors: { author: "#4472c4", concept: "#ed7d31", authorship: "#595959", citation: "#a5a5a5", highlight: "#e74c3c" }, fonts: { title: "Georgia, 'Times New Roman', serif", body: "'Helvetica Neue', Arial, sans-serif", ui: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif" }, physics: { defaultCharge: -300, filteredCharge: -800, // Mayor repulsión cuando se filtra para que se expandan defaultCenterStrength: 0.05, filteredCenterStrength: 0.8 // Atracción fuerte al centro cuando se filtra } }; // ============================================================================ // ESTADO GLOBAL DE FILTROS // ============================================================================ const state = { searchQuery: "", filterTypes: new Set(["work", "author", "concept"]), yearRange: { min: 0, max: 9999 }, citationRange: { min: 0, max: 9999 }, selectedCountries: new Set(), selectedJournals: new Set(CONFIG.journals.map(j => j.id)), highlightedNodes: new Set(), data: null, isFiltered: false // Flag para activar física de agrupamiento }; // ============================================================================ // FUNCIÓN DE FETCH CON CURSOR PAGINATION (OBTIENE TODOS LOS RESULTADOS) // ============================================================================ async function fetchAllJournals() { const allNodes = []; const allLinks = []; const nodeMap = new Map(); const countries = new Set(); // Procesar cada revista secuencialmente para no sobrecargar la API for (const journal of CONFIG.journals) { try { console.log("Cargando revista: " + journal.name); const data = await fetchJournalWithCursor(journal); // Agregar nodos y enlaces de esta revista data.nodes.forEach(node => { if (!nodeMap.has(node.id)) { nodeMap.set(node.id, node); allNodes.push(node); } }); data.links.forEach(link => { allLinks.push(link); }); // Agregar países encontrados data.countries.forEach(c => countries.add(c)); console.log("Revista " + journal.name + " completada: " + data.nodes.filter(n => n.type === "work").length + " artículos"); } catch (error) { console.warn("Error cargando revista " + journal.name + ":", error.message); // Continuar con la siguiente revista si una falla } } // Crear conexiones de citas entre artículos de diferentes revistas createCrossCitations(allNodes, allLinks, nodeMap); state.availableCountries = Array.from(countries).sort(); console.log("Total nodos cargados:", allNodes.length); return { nodes: allNodes, links: allLinks }; } async function fetchJournalWithCursor(journal) { const allWorks = []; let cursor = "*"; // Cursor inicial let hasMore = true; let pageCount = 0; const maxPages = Math.ceil(CONFIG.maxWorksPerJournal / CONFIG.perPage); while (hasMore && pageCount < maxPages) { try { // Construir URL con cursor (sin f-strings anidadas) const baseUrl = CONFIG.apiBase; const filterParam = "primary_location.source.id:S" + journal.id; const url = new URL(baseUrl); url.searchParams.append("filter", filterParam); url.searchParams.append("per_page", CONFIG.perPage.toString()); url.searchParams.append("cursor", cursor); url.searchParams.append("mailto", "researcher@university.edu"); // Agregar delay para respetar rate limits (100ms entre requests) if (pageCount > 0) { await new Promise(resolve => setTimeout(resolve, 100)); } const response = await fetch(url); if (!response.ok) { if (response.status === 429) { console.warn("Rate limit alcanzado, esperando 1 segundo..."); await new Promise(resolve => setTimeout(resolve, 1000)); continue; // Reintentar mismo cursor } throw new Error("HTTP " + response.status); } const data = await response.json(); const works = data.results || []; if (works.length === 0) { hasMore = false; break; } allWorks.push(...works); // Verificar si hay más páginas const nextCursor = data.meta?.next_cursor; if (!nextCursor || works.length < CONFIG.perPage) { hasMore = false; } else { cursor = nextCursor; pageCount++; } } catch (error) { console.warn("Error en página " + pageCount + " de " + journal.name + ":", error.message); hasMore = false; // Detener en caso de error } } console.log(journal.name + ": " + allWorks.length + " works cargados en " + (pageCount + 1) + " páginas"); return processJournalData(allWorks, journal); } // ============================================================================ // PROCESAMIENTO DE DATOS POR REVISTA // ============================================================================ function processJournalData(works, journal) { const nodes = []; const links = []; const nodeMap = new Map(); const countries = new Set(); // Funciones helper para generar IDs consistentes const getWorkId = (work) => { if (work.id) return work.id.split("/").pop(); // Fallback: generar ID único basado en título + journal return "w_" + journal.id + "_" + hashString(work.title || "unknown"); }; const getAuthorId = (author) => { if (author.orcid) { // Remover prefijo y guiones de ORCID const orcidPart = author.orcid.split("/").pop(); return "a_" + orcidPart.replace(/-/g, ""); } // Fallback: hash del nombre return "a_" + hashString(author.display_name || "unknown"); }; const getConceptId = (concept) => { if (concept.id) { const conceptPart = concept.id.split("/").pop(); return "c_" + conceptPart; } return "c_" + hashString(concept.display_name || "unknown"); }; works.forEach((work) => { const workId = getWorkId(work); if (nodeMap.has(workId)) return; const node = { id: workId, type: "work", group: 1, journalId: journal.id, journalName: journal.name, journalColor: journal.color, journalShort: journal.short, title: truncateText(work.title, 50), fullTitle: work.title || "Sin título", year: work.publication_year || 0, cited_by_count: work.cited_by_count || 0, doi: work.doi || null, open_access: work.open_access?.is_oa || false, oa_url: work.open_access?.oa_url || null, searchText: (work.title || "").toLowerCase(), // Propiedades para física mass: 1 + (work.cited_by_count || 0) * 0.1 // Masa proporcional a citas }; nodes.push(node); nodeMap.set(workId, node); // Procesar autores (work.authorships || []).forEach(auth => { const author = auth.author; if (!author?.display_name) return; const authorId = getAuthorId(author); const country = auth.institutions?.[0]?.country_code || "N/A"; countries.add(country); if (!nodeMap.has(authorId)) { const authorNode = { id: authorId, type: "author", group: 2, name: author.display_name, orcid: author.orcid || null, institutions: auth.institutions?.map(i => i.display_name).filter(Boolean).join("; ") || "No especificado", country: country, works_count: 1, searchText: (author.display_name || "").toLowerCase(), mass: 1 }; nodes.push(authorNode); nodeMap.set(authorId, authorNode); } else { nodeMap.get(authorId).works_count++; } links.push({ source: workId, target: authorId, type: "authorship", journalColor: journal.color }); }); // Procesar conceptos (solo los más relevantes) (work.concepts || []) .filter(c => (c.score || 0) > 0.6 && (c.level || 0) <= 1) // Filtro más estricto .forEach(concept => { const conceptId = getConceptId(concept); if (!nodeMap.has(conceptId)) { const conceptNode = { id: conceptId, type: "concept", group: 3, name: concept.display_name, level: concept.level || 0, score: concept.score, count: 1, searchText: (concept.display_name || "").toLowerCase(), mass: 0.5 }; nodes.push(conceptNode); nodeMap.set(conceptId, conceptNode); } else { nodeMap.get(conceptId).count++; } links.push({ source: workId, target: conceptId, type: "concept", score: concept.score, journalColor: journal.color }); }); }); // Procesar citas internas de la revista const workIds = new Set(nodes.filter(n => n.type === "work").map(n => n.id)); works.forEach(work => { const targetId = getWorkId(work); if (!workIds.has(targetId)) return; (work.referenced_works || []).forEach(ref => { const sourceId = ref?.split("/").pop(); if (sourceId && workIds.has(sourceId) && sourceId !== targetId) { const exists = links.some(l => l.source === sourceId && l.target === targetId && l.type === "citation" ); if (!exists) { links.push({ source: sourceId, target: targetId, type: "citation", journalColor: journal.color }); } } }); }); return { nodes, links, countries }; } // Crear citas entre artículos de diferentes revistas function createCrossCitations(nodes, links, nodeMap) { const works = nodes.filter(n => n.type === "work"); const workIds = new Set(works.map(w => w.id)); // Aquí se podrían agregar citas cruzadas si se tuviera acceso a referenced_works completo // Por ahora, las conexiones son intra-revista } // ============================================================================ // DATOS DE RESPALDO (SIMULADOS CON MÁS ARTÍCULOS) // ============================================================================ function getValidatedBackupData() { const allNodes = []; const allLinks = []; const nodeMap = new Map(); const countries = new Set(); CONFIG.journals.forEach(journal => { // Generar más works de respaldo (20 por revista) const works = generateMockWorks(journal, 20); works.forEach(w => { countries.add(w.country); const workNode = { id: w.id, type: "work", group: 1, journalId: journal.id, journalName: journal.name, journalColor: journal.color, journalShort: journal.short, title: truncateText(w.title, 50), fullTitle: w.title, year: w.year, cited_by_count: w.citations, doi: null, open_access: false, searchText: w.title.toLowerCase(), mass: 1 + w.citations * 0.1 }; allNodes.push(workNode); nodeMap.set(w.id, workNode); w.authors.forEach((authorName) => { const authorId = "a_" + hashString(authorName); if (!nodeMap.has(authorId)) { const authorNode = { id: authorId, type: "author", group: 2, name: authorName, orcid: null, institutions: "Universidad Centroamericana", country: w.country, works_count: 1, searchText: authorName.toLowerCase(), mass: 1 }; allNodes.push(authorNode); nodeMap.set(authorId, authorNode); } else { nodeMap.get(authorId).works_count++; } allLinks.push({ source: w.id, target: authorId, type: "authorship", journalColor: journal.color }); }); }); }); // Agregar conceptos compartidos const concepts = [ {id: "c_sustainability", name: "Sustainability", count: 8}, {id: "c_consumer", name: "Consumer Behavior", count: 6}, {id: "c_org", name: "Organizational Behavior", count: 10}, {id: "c_innovation", name: "Innovation Management", count: 5}, {id: "c_marketing", name: "Digital Marketing", count: 7}, {id: "c_finance", name: "Financial Analysis", count: 4}, {id: "c_leadership", name: "Leadership", count: 6}, {id: "c_social", name: "Social Responsibility", count: 5} ]; concepts.forEach(c => { allNodes.push({ id: c.id, type: "concept", group: 3, name: c.name, level: 1, count: c.count, score: 0.8, searchText: c.name.toLowerCase(), mass: 0.5 }); }); // Conectar conceptos a artículos const workNodes = allNodes.filter(n => n.type === "work"); workNodes.forEach(w => { const numConcepts = 2 + Math.floor(Math.random() * 3); // 2-4 conceptos por artículo for (let i = 0; i < numConcepts; i++) { const conceptIdx = Math.floor(Math.random() * concepts.length); const conceptId = concepts[conceptIdx].id; // Evitar duplicados const exists = allLinks.some(l => (l.source === w.id || l.source.id === w.id) && (l.target === conceptId || l.target.id === conceptId) ); if (!exists) { allLinks.push({ source: w.id, target: conceptId, type: "concept", score: 0.75, journalColor: w.journalColor }); } } }); // Agregar algunas citas cruzadas entre revistas const crossCitations = [ ["w_ECA_5", "w_RRCSH_2"], ["w_RE_3", "w_ECA_8"], ["w_RLT_4", "w_RE_6"], ["w_RRCSH_7", "w_RLT_1"] ]; crossCitations.forEach(([source, target]) => { if (nodeMap.has(source) && nodeMap.has(target)) { allLinks.push({ source: source, target: target, type: "citation", journalColor: "#999" }); } }); state.availableCountries = Array.from(countries).sort(); return { nodes: allNodes, links: allLinks }; } function generateMockWorks(journal, count) { const titleTemplates = { "4210199283": [ // ECA - Empresa y Ciencia Ambiental "Gestión sostenible en empresas centroamericanas", "Impacto del cambio climático en negocios locales", "Responsabilidad social empresarial y medio ambiente", "Estrategias verdes para pymes salvadoreñas", "Evaluación de huella de carbono corporativa", "Sostenibilidad y competitividad empresarial", "Gestión ambiental en cadenas de suministro", "Economía circular en El Salvador", "Certificaciones ambientales y su impacto", "Energías renovables en el sector empresarial" ], "4210185616": [ // RRCSH - Relaciones, Recursos, Capital Humano "Relaciones laborales en el siglo XXI", "Capital humano y productividad organizacional", "Gestión del talento en pymes centroamericanas", "Bienestar laboral y retención de empleados", "Diversidad e inclusión en el trabajo", "Liderazgo transformacional en recursos humanos", "Clima organizacional y satisfacción laboral", "Desarrollo de competencias en equipos", "Teletrabajo y nuevas formas de trabajo", "Gestión del conocimiento organizacional" ], "4210170416": [ // Realidad Empresarial "Empaques biodegradables y comportamiento del consumidor", "Marketing digital en mipymes salvadoreñas", "Análisis financiero para decisiones estratégicas", "Innovación en pequeñas empresas manufactureras", "Branding y posicionamiento de mercado", "Estrategias de precio en mercados emergentes", "Distribución comercial en Centroamérica", "Calidad y servicio al cliente", "Emprendimiento e intrapreneurship", "Ética empresarial y gobierno corporativo" ], "4210171525": [ // RLT - Revista Logística y Transporte "Logística y cadena de suministro sostenible", "Transporte multimodal en Centroamérica", "Optimización de rutas de distribución", "Gestión de inventarios justo a tiempo", "Tecnología en la cadena de suministro", "Last mile delivery en ciudades capitales", "Almacenamiento y manejo de materiales", "Comercio internacional y aduanas", "Trazaabilidad en cadenas de valor", "Resiliencia en cadenas de suministro" ] }; const templates = titleTemplates[journal.id] || ["Artículo genérico"]; const works = []; for (let i = 0; i < count; i++) { const template = templates[i % templates.length]; const year = 2018 + Math.floor(Math.random() * 6); // 2018-2023 const citations = Math.floor(Math.random() * 15); works.push({ id: "w_" + journal.id + "_" + i, title: template + (i >= templates.length ? " (Parte " + (Math.floor(i/templates.length) + 1) + ")" : ""), year: year, citations: citations, authors: [ "Autor " + String.fromCharCode(65 + (i % 26)) + ". " + journal.short, i % 3 === 0 ? "Coautor " + String.fromCharCode(66 + (i % 25)) + ". " + journal.short : null ].filter(Boolean), country: ["SLV", "GTM", "HND"][i % 3] }); } return works; } function hashString(str) { let hash = 0; for (let i = 0; i < str.length; i++) { const char = str.charCodeAt(i); hash = ((hash << 5) - hash) + char; hash = hash & hash; } return Math.abs(hash).toString(36).substring(0, 10); } function truncateText(text, maxLength) { if (!text) return "N/A"; return text.length > maxLength ? text.substring(0, maxLength - 3) + "..." : text; } // ============================================================================ // CREACIÓN DE INTERFAZ DE USUARIO MEJORADA // ============================================================================ const container = d3.create("div") .style("width", CONFIG.width + "px") .style("font-family", CONFIG.fonts.ui) .style("position", "relative"); // Panel de controles superior const controlPanel = container.append("div") .style("background", "linear-gradient(135deg, #f5f7fa 0%, #e4e7f1 100%)") .style("border", "1px solid #d1d8e0") .style("border-bottom", "none") .style("padding", "20px") .style("border-radius", "8px 8px 0 0"); // Título de controles controlPanel.append("div") .style("font-size", "14px") .style("font-weight", "bold") .style("color", "#2c3e50") .style("margin-bottom", "15px") .text("Panel de Control - Red de Conocimiento"); // Fila 1: Búsqueda y filtros principales const row1 = controlPanel.append("div") .style("display", "flex") .style("gap", "15px") .style("align-items", "center") .style("margin-bottom", "15px"); // Barra de búsqueda const searchContainer = row1.append("div") .style("position", "relative") .style("flex", "1"); searchContainer.append("span") .style("position", "absolute") .style("left", "12px") .style("top", "50%") .style("transform", "translateY(-50%)") .style("color", "#666") .style("font-size", "14px") .text("🔍"); const searchInput = searchContainer.append("input") .attr("type", "text") .attr("placeholder", "Buscar artículos, autores o conceptos...") .style("width", "100%") .style("padding", "12px 12px 12px 40px") .style("border", "2px solid #d1d8e0") .style("border-radius", "6px") .style("font-size", "13px") .style("outline", "none") .style("transition", "all 0.3s") .on("input", function() { state.searchQuery = this.value.toLowerCase(); state.isFiltered = state.searchQuery.length > 0; updateVisualization(); }) .on("focus", function() { d3.select(this).style("border-color", "#4472c4").style("box-shadow", "0 0 0 3px rgba(68, 114, 196, 0.1)"); }) .on("blur", function() { d3.select(this).style("border-color", "#d1d8e0").style("box-shadow", "none"); }); // Filtros por tipo const typeFilters = row1.append("div") .style("display", "flex") .style("gap", "8px") .style("align-items", "center"); typeFilters.append("span") .style("font-size", "12px") .style("color", "#666") .style("font-weight", "600") .text("Nodos:"); const typeConfig = [ {type: "work", label: "Artículos", color: "#666"}, {type: "author", label: "Autores", color: CONFIG.colors.author}, {type: "concept", label: "Conceptos", color: CONFIG.colors.concept} ]; typeConfig.forEach(item => { const btn = typeFilters.append("button") .attr("class", "filter-btn filter-type") .attr("data-type", item.type) .style("padding", "8px 14px") .style("border", "2px solid " + item.color) .style("background", item.type === "work" ? item.color : item.color) .style("color", "white") .style("border-radius", "6px") .style("font-size", "11px") .style("cursor", "pointer") .style("font-weight", "600") .style("transition", "all 0.2s") .text(item.label) .on("click", function() { const isActive = state.filterTypes.has(item.type); if (isActive && state.filterTypes.size > 1) { state.filterTypes.delete(item.type); d3.select(this) .style("background", "white") .style("color", item.color); } else if (!isActive) { state.filterTypes.add(item.type); d3.select(this) .style("background", item.color) .style("color", "white"); } state.isFiltered = true; updateVisualization(); // Reactivar física de agrupamiento setTimeout(() => { state.isFiltered = false; }, 2000); }); }); // Botón reset row1.append("button") .style("padding", "10px 18px") .style("background", "#e74c3c") .style("color", "white") .style("border", "none") .style("border-radius", "6px") .style("font-size", "12px") .style("cursor", "pointer") .style("font-weight", "600") .style("transition", "all 0.2s") .style("box-shadow", "0 2px 4px rgba(231, 76, 60, 0.3)") .text("↺ Reset") .on("mouseover", function() { d3.select(this).style("background", "#c0392b"); }) .on("mouseout", function() { d3.select(this).style("background", "#e74c3c"); }) .on("click", () => { resetFilters(); // Efecto de "explosión" al resetear simulation.alpha(1).restart(); }); // Fila 2: Filtros avanzados const row2 = controlPanel.append("div") .style("display", "flex") .style("gap", "20px") .style("align-items", "center") .style("flex-wrap", "wrap"); // Filtro de año const yearFilter = row2.append("div") .style("display", "flex") .style("align-items", "center") .style("gap", "8px"); yearFilter.append("span") .style("font-size", "12px") .style("color", "#666") .style("font-weight", "500") .text("Año:"); const yearSelect = yearFilter.append("select") .style("padding", "8px 12px") .style("border", "2px solid #d1d8e0") .style("border-radius", "6px") .style("font-size", "12px") .style("background", "white") .style("cursor", "pointer") .on("change", function() { const val = this.value; if (val === "all") { state.yearRange = { min: 0, max: 9999 }; } else { const year = parseInt(val); state.yearRange = { min: year, max: year }; } state.isFiltered = true; updateVisualization(); setTimeout(() => { state.isFiltered = false; }, 2000); }); yearSelect.append("option").attr("value", "all").text("Todos los años"); // Filtro de citas const citationFilter = row2.append("div") .style("display", "flex") .style("align-items", "center") .style("gap", "8px"); citationFilter.append("span") .style("font-size", "12px") .style("color", "#666") .style("font-weight", "500") .text("Mín. citas:"); citationFilter.append("input") .attr("type", "number") .attr("min", "0") .attr("placeholder", "0") .style("width", "60px") .style("padding", "8px") .style("border", "2px solid #d1d8e0") .style("border-radius", "6px") .style("font-size", "12px") .on("input", function() { state.citationRange.min = parseInt(this.value) || 0; state.isFiltered = true; updateVisualization(); setTimeout(() => { state.isFiltered = false; }, 2000); }); // Filtro de país const countryFilter = row2.append("div") .style("display", "flex") .style("align-items", "center") .style("gap", "8px") .attr("id", "country-filter-container"); countryFilter.append("span") .style("font-size", "12px") .style("color", "#666") .style("font-weight", "500") .text("País:"); // Contador de resultados const resultsCounter = row2.append("div") .style("margin-left", "auto") .style("padding", "8px 16px") .style("background", "rgba(68, 114, 196, 0.1)") .style("border-radius", "6px") .style("font-size", "12px") .style("color", "#4472c4") .style("font-weight", "600") .text("Cargando..."); // ============================================================================ // SVG Y VISUALIZACIÓN PRINCIPAL // ============================================================================ const svgContainer = container.append("div") .style("position", "relative") .style("border", "1px solid #d1d8e0") .style("border-radius", "0 0 8px 8px") .style("overflow", "hidden"); const svg = svgContainer.append("svg") .attr("width", CONFIG.width) .attr("height", CONFIG.height) .style("background", "linear-gradient(135deg, #fafbfc 0%, #f0f2f5 100%)") .style("display", "block"); const g = svg.append("g"); // Zoom mejorado const zoom = d3.zoom() .scaleExtent([0.2, 4]) .on("zoom", (e) => { g.attr("transform", e.transform); }); svg.call(zoom); // ============================================================================ // CARGA DE DATOS CON MANEJO DE ERRORES // ============================================================================ let loadError = null; try { console.log("Iniciando carga de datos desde OpenAlex..."); state.data = await fetchAllJournals(); console.log("Datos cargados exitosamente"); } catch (error) { console.error("Error al cargar datos de OpenAlex:", error); loadError = error.message; console.log("Usando datos de respaldo..."); state.data = getValidatedBackupData(); } // Poblar filtros de año basados en datos reales const years = [...new Set(state.data.nodes .filter(n => n.type === "work" && n.year > 0) .map(n => n.year))].sort((a, b) => b - a); years.forEach(year => { yearSelect.append("option").attr("value", year).text(year); }); // Poblar filtro de países const countrySelect = countryFilter.append("select") .style("padding", "8px 12px") .style("border", "2px solid #d1d8e0") .style("border-radius", "6px") .style("font-size", "12px") .style("background", "white") .style("cursor", "pointer") .style("min-width", "140px") .on("change", function() { const val = this.value; if (val === "all") { state.selectedCountries.clear(); } else { state.selectedCountries.clear(); state.selectedCountries.add(val); } state.isFiltered = true; updateVisualization(); setTimeout(() => { state.isFiltered = false; }, 2000); }); countrySelect.append("option").attr("value", "all").text("Todos los países"); (state.availableCountries || []).forEach(country => { const countryNames = { "SLV": "🇸🇻 El Salvador", "GTM": "🇬🇹 Guatemala", "HND": "🇭🇳 Honduras", "NIC": "🇳🇮 Nicaragua", "CRI": "🇨🇷 Costa Rica", "PAN": "🇵🇦 Panamá", "MEX": "🇲🇽 México", "COL": "🇨🇴 Colombia", "ECU": "🇪🇨 Ecuador", "PER": "🇵🇪 Perú", "CHL": "🇨🇱 Chile", "ARG": "🇦🇷 Argentina", "USA": "🇺🇸 Estados Unidos", "ESP": "🇪🇸 España" }; countrySelect.append("option").attr("value", country).text(countryNames[country] || country); }); // Escalas const radiusScale = (d) => { if (d.type === "work") return 10 + Math.sqrt(d.cited_by_count || 0) * 4; if (d.type === "author") return 7 + Math.min((d.works_count || 0) * 2, 15); return 6 + Math.min((d.count || 0) * 2.5, 12); }; // Color scale const getNodeColor = (d) => { if (d.type === "work") return d.journalColor || "#999"; if (d.type === "author") return CONFIG.colors.author; return CONFIG.colors.concept; }; // ============================================================================ // SIMULACIÓN DE FÍSICA CON FUERZAS ADAPTATIVAS // ============================================================================ // Centro gravitacional que se mueve según el estado const centerForce = d3.forceCenter(CONFIG.width / 2, CONFIG.height / 2); const simulation = d3.forceSimulation(state.data.nodes) .force("link", d3.forceLink(state.data.links) .id(d => d.id) .distance(d => { // Distancias variables según tipo if (d.type === "authorship") return 50; if (d.type === "concept") return 80; return 120; // citas }) .strength(0.6)) .force("charge", d3.forceManyBody() .strength(d => { // Repulsión adaptativa: más fuerte cuando se filtra const baseCharge = d.type === "work" ? -400 : d.type === "author" ? -200 : -100; return state.isFiltered ? baseCharge * 2.5 : baseCharge; })) .force("center", centerForce) .force("collision", d3.forceCollide() .radius(d => radiusScale(d) + 10) .strength(0.8)) .force("radial", d3.forceRadial(d => { // Agrupar por revista en círculos concéntricos cuando hay filtro if (!state.isFiltered) return 0; const journalIndex = CONFIG.journals.findIndex(j => j.id === d.journalId); return 100 + (journalIndex * 80); // Distancia radial según revista }, CONFIG.width / 2, CONFIG.height / 2) .strength(state.isFiltered ? 0.3 : 0)) .force("y", d3.forceY(d => { // Organización vertical por tipo if (d.type === "concept") return CONFIG.height * 0.2; if (d.type === "work") return CONFIG.height * 0.5; return CONFIG.height * 0.8; }).strength(state.isFiltered ? 0.2 : 0.05)); // Elementos visuales let link = g.append("g").attr("class", "links").selectAll("line"); let node = g.append("g").attr("class", "nodes").selectAll("g"); // Tooltip mejorado const tooltip = d3.select("body").append("div") .style("position", "absolute") .style("visibility", "hidden") .style("background", "#ffffff") .style("border", "1px solid #ddd") .style("padding", "15px") .style("border-radius", "8px") .style("font-size", "12px") .style("max-width", "350px") .style("box-shadow", "0 4px 20px rgba(0,0,0,0.15)") .style("pointer-events", "none") .style("z-index", "2000") .style("font-family", CONFIG.fonts.body); // ============================================================================ // FUNCIÓN DE ACTUALIZACIÓN DE VISUALIZACIÓN CON FÍSICA // ============================================================================ function updateVisualization() { // Determinar nodos visibles const visibleNodes = state.data.nodes.filter(d => { // Filtro por tipo if (!state.filterTypes.has(d.type)) return false; // Filtro por búsqueda if (state.searchQuery && !d.searchText?.includes(state.searchQuery)) return false; // Filtro por año (solo works) if (d.type === "work" && (d.year < state.yearRange.min || d.year > state.yearRange.max)) return false; // Filtro por citas (solo works) if (d.type === "work" && d.cited_by_count < state.citationRange.min) return false; // Filtro por país (solo authors) if (d.type === "author" && state.selectedCountries.size > 0 && !state.selectedCountries.has(d.country)) return false; // Filtro por revista (solo works) if (d.type === "work" && state.selectedJournals.size > 0 && !state.selectedJournals.has(d.journalId)) return false; return true; }); const visibleNodeIds = new Set(visibleNodes.map(n => n.id)); // Filtrar enlaces que conectan nodos visibles const visibleLinks = state.data.links.filter(l => { const sourceId = l.source.id || l.source; const targetId = l.target.id || l.target; return visibleNodeIds.has(sourceId) && visibleNodeIds.has(targetId); }); // Actualizar contador const workCount = visibleNodes.filter(n => n.type === "work").length; const authorCount = visibleNodes.filter(n => n.type === "author").length; const conceptCount = visibleNodes.filter(n => n.type === "concept").length; resultsCounter.html( "" + workCount + " artículos | " + "" + authorCount + " autores | " + "" + conceptCount + " conceptos | " + "" + visibleLinks.length + " conexiones" ); // Actualizar enlaces link = link.data(visibleLinks, d => { const s = d.source.id || d.source; const t = d.target.id || d.target; return s + "-" + t; }); link.exit().transition().duration(300).attr("opacity", 0).remove(); const linkEnter = link.enter().append("line") .attr("stroke", d => { if (d.type === "citation") return CONFIG.colors.citation; if (d.type === "authorship") return CONFIG.colors.authorship; return d.journalColor || CONFIG.colors.concept; }) .attr("stroke-width", d => d.type === "citation" ? 2.5 : 2) .attr("stroke-opacity", 0.5) .attr("stroke-dasharray", d => d.type === "citation" ? "5,5" : null); link = linkEnter.merge(link); // Actualizar nodos node = node.data(visibleNodes, d => d.id); node.exit() .transition() .duration(300) .attr("opacity", 0) .remove(); const nodeEnter = node.enter().append("g") .attr("class", "node-group") .call(d3.drag() .on("start", (e, d) => { if (!e.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; }) .on("drag", (e, d) => { d.fx = e.x; d.fy = e.y; }) .on("end", (e, d) => { if (!e.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; })); // Círculos principales con efecto de brillo const circles = nodeEnter.append("circle") .attr("class", "main-circle") .attr("r", 0) .attr("fill", d => getNodeColor(d)) .attr("stroke", "#fff") .attr("stroke-width", d => d.type === "work" ? 3 : 2) .style("cursor", "pointer") .style("filter", "drop-shadow(0 2px 4px rgba(0,0,0,0.2))") .transition() .duration(600) .ease(d3.easeBackOut) .attr("r", radiusScale); // Anillo de selección/búsqueda nodeEnter.append("circle") .attr("class", "highlight-ring") .attr("r", d => radiusScale(d) + 6) .attr("fill", "none") .attr("stroke", CONFIG.colors.highlight) .attr("stroke-width", 3) .attr("opacity", 0) .style("pointer-events", "none"); // Etiquetas mejoradas const labels = nodeEnter.append("text") .text(d => { if (d.type === "work") return truncateText(d.title, 40); return truncateText(d.name || d.title, 35); }) .attr("x", d => radiusScale(d) + 8) .attr("y", 4) .attr("font-size", d => d.type === "work" ? "11px" : "10px") .attr("font-weight", d => d.type === "work" ? "600" : "500") .attr("fill", "#2c3e50") .style("pointer-events", "none") .style("text-shadow", "0 1px 2px rgba(255,255,255,0.8)") .attr("opacity", 0) .transition() .delay(400) .duration(400) .attr("opacity", 1); // Contadores de citas en artículos nodeEnter.filter(d => d.type === "work" && d.cited_by_count > 0) .append("text") .attr("class", "citation-count") .text(d => d.cited_by_count) .attr("text-anchor", "middle") .attr("dy", ".35em") .attr("font-size", "11px") .attr("font-weight", "bold") .attr("fill", "white") .style("pointer-events", "none"); node = nodeEnter.merge(node); // Actualizar anillos de highlight node.select(".highlight-ring") .attr("opacity", d => { if (!state.searchQuery) return 0; const isMatch = d.searchText?.includes(state.searchQuery); return isMatch ? 1 : 0.15; }); // Eventos de interacción mejorados node.on("mouseover", (e, d) => { // Efecto de highlight en conexiones const connected = new Set([d.id]); link .style("stroke-opacity", l => { const s = l.source.id || l.source; const t = l.target.id || l.target; if (s === d.id || t === d.id) { connected.add(s); connected.add(t); return 0.9; } return 0.1; }) .style("stroke-width", l => { const s = l.source.id || l.source; const t = l.target.id || l.target; return (s === d.id || t === d.id) ? 3 : 1; }); node.style("opacity", n => connected.has(n.id) ? 1 : 0.25); // Escalar nodo seleccionado d3.select(e.currentTarget).select(".main-circle") .transition() .duration(200) .attr("r", radiusScale(d) * 1.2); showTooltip(e, d); }) .on("mousemove", (e) => { tooltip .style("left", (e.pageX + 15) + "px") .style("top", (e.pageY - 15) + "px"); }) .on("mouseout", (e, d) => { link .style("stroke-opacity", 0.5) .style("stroke-width", l => l.type === "citation" ? 2.5 : 2); node.style("opacity", 1); d3.select(e.currentTarget).select(".main-circle") .transition() .duration(200) .attr("r", radiusScale(d)); tooltip.style("visibility", "hidden"); }); // REINICIAR SIMULACIÓN CON NUEVOS PARÁMETROS DE FÍSICA simulation.nodes(visibleNodes); simulation.force("link").links(visibleLinks); // Ajustar fuerzas según estado de filtro simulation.force("charge").strength(d => { const baseCharge = d.type === "work" ? -400 : d.type === "author" ? -200 : -100; return state.isFiltered ? baseCharge * 2 : baseCharge; }); simulation.force("center").strength(state.isFiltered ? 0.1 : 0.05); // Activar fuerza radial solo cuando se filtra simulation.force("radial").strength(state.isFiltered ? 0.4 : 0); // Re-calentar simulación simulation.alpha(1).restart(); } function showTooltip(event, d) { let content = ""; if (d.type === "work") { const authors = state.data.links .filter(l => { const s = l.source.id || l.source; return s === d.id && l.type === "authorship"; }) .map(l => { const t = l.target.id || l.target; const authorNode = state.data.nodes.find(n => n.id === t); return authorNode?.name; }) .filter(Boolean) .join("; "); const concepts = state.data.links .filter(l => { const s = l.source.id || l.source; return s === d.id && l.type === "concept"; }) .map(l => { const t = l.target.id || l.target; const conceptNode = state.data.nodes.find(n => n.id === t); return conceptNode?.name; }) .filter(Boolean) .slice(0, 5) .join(", "); content = `

${d.journalName} ${d.open_access ? 'Open Access' : ''}

${d.fullTitle}

Autores: ${authors || "No disponible"}

${concepts ? `

Conceptos: ${concepts}

` : ''}

📊 Citas: ${d.cited_by_count} 📅 Año: ${d.year || "N/A"}

`; } else if (d.type === "author") { const workCount = state.data.links.filter(l => { const t = l.target.id || l.target; return t === d.id && l.type === "authorship"; }).length; const journalCounts = {}; state.data.links.filter(l => { const t = l.target.id || l.target; return t === d.id && l.type === "authorship"; }).forEach(l => { const s = l.source.id || l.source; const work = state.data.nodes.find(n => n.id === s); if (work) { journalCounts[work.journalName] = (journalCounts[work.journalName] || 0) + 1; } }); const journalInfo = Object.entries(journalCounts) .map(([name, count]) => name + ": " + count) .join(", "); content = `

Autor

${d.name}

Institución: ${d.institutions}

País: ${d.country}

Artículos totales: ${workCount}

${journalInfo ? `

Por revista: ${journalInfo}

` : ''}

`; } else { const workCount = state.data.links.filter(l => { const t = l.target.id || l.target; return t === d.id && l.type === "concept"; }).length; content = `

Concepto Académico

${d.name}

Frecuencia: ${workCount} artículos

${d.score ? `

Relevancia: ${(d.score * 100).toFixed(1)}%

` : ''} ${d.level !== undefined ? `

Nivel jerárquico: ${d.level}

` : ''}

`; } tooltip.html(content) .style("visibility", "visible"); } function resetFilters() { state.searchQuery = ""; state.filterTypes = new Set(["work", "author", "concept"]); state.yearRange = { min: 0, max: 9999 }; state.citationRange = { min: 0, max: 9999 }; state.selectedCountries.clear(); state.selectedJournals = new Set(CONFIG.journals.map(j => j.id)); state.isFiltered = false; // Reset UI searchInput.property("value", ""); yearSelect.property("value", "all"); countrySelect.property("value", "all"); d3.selectAll(".filter-type") .style("background", function() { const type = d3.select(this).attr("data-type"); return type === "work" ? "#666" : type === "author" ? CONFIG.colors.author : CONFIG.colors.concept; }) .style("color", "white"); // Reset botones de revista d3.selectAll(".journal-btn") .style("opacity", 1) .style("transform", "scale(1)") .style("border-width", "2px"); updateVisualization(); } // ============================================================================ // TÍTULO Y LEYENDA DE REVISTAS (INTERACTIVA) // ============================================================================ const titleGroup = svg.append("g").attr("transform", "translate(" + (CONFIG.width/2) + ", 35)"); titleGroup.append("text") .attr("text-anchor", "middle") .attr("font-family", CONFIG.fonts.title) .attr("font-size", "18px") .attr("font-weight", "bold") .attr("fill", "#1a1a1a") .style("text-shadow", "0 1px 2px rgba(0,0,0,0.1)") .text("Red de Conocimiento: 4 Revistas Centroamericanas"); // Subtítulo con indicador de error si aplica if (loadError) { titleGroup.append("text") .attr("text-anchor", "middle") .attr("y", 22) .attr("font-size", "11px") .attr("fill", "#e74c3c") .text("⚠️ Usando datos de respaldo (Error: " + loadError + ")"); } // Leyenda de revistas (flotante, arriba a la derecha) - INTERACTIVA const journalLegend = svg.append("g").attr("transform", "translate(" + (CONFIG.width - 200) + ", 70)"); const legendBg = journalLegend.append("rect") .attr("width", 180) .attr("height", 25 + (CONFIG.journals.length * 35)) .attr("fill", "rgba(255,255,255,0.95)") .attr("stroke", "#e0e0e0") .attr("rx", 8) .attr("stroke-width", 1) .style("filter", "drop-shadow(0 2px 8px rgba(0,0,0,0.1))"); journalLegend.append("text") .attr("x", 15) .attr("y", 22) .attr("font-size", "12px") .attr("font-weight", "bold") .attr("fill", "#333") .text("Filtrar por Revista"); CONFIG.journals.forEach((journal, i) => { const g = journalLegend.append("g") .attr("transform", "translate(15, " + (42 + i * 30) + ")") .attr("class", "journal-btn") .style("cursor", "pointer") .on("click", function() { // Toggle selección de revista const isSelected = state.selectedJournals.has(journal.id); if (isSelected) { if (state.selectedJournals.size > 1) { state.selectedJournals.delete(journal.id); d3.select(this) .transition() .duration(200) .style("opacity", 0.4) .style("transform", "scale(0.95)"); } } else { state.selectedJournals.add(journal.id); d3.select(this) .transition() .duration(200) .style("opacity", 1) .style("transform", "scale(1)"); } state.isFiltered = true; updateVisualization(); // Mantener agrupamiento por 3 segundos setTimeout(() => { state.isFiltered = false; }, 3000); }); // Indicador visual de revista g.append("circle") .attr("r", 8) .attr("fill", journal.color) .attr("stroke", "#fff") .attr("stroke-width", 2) .style("filter", "drop-shadow(0 1px 2px rgba(0,0,0,0.2))"); g.append("text") .attr("x", 20) .attr("y", 4) .text(journal.name) .attr("font-size", "12px") .attr("fill", "#333") .attr("font-weight", "500"); // Contador de artículos const count = state.data.nodes.filter(n => n.type === "work" && n.journalId === journal.id).length; g.append("text") .attr("x", 20) .attr("y", 16) .text(count + " artículos") .attr("font-size", "9px") .attr("fill", "#666"); }); // Botón "Ver todas" en leyenda journalLegend.append("text") .attr("x", 15) .attr("y", 42 + (CONFIG.journals.length * 30) + 5) .style("cursor", "pointer") .style("font-size", "10px") .style("fill", "#4472c4") .style("text-decoration", "underline") .text("↻ Mostrar todas") .on("click", () => { state.selectedJournals = new Set(CONFIG.journals.map(j => j.id)); d3.selectAll(".journal-btn") .transition() .duration(200) .style("opacity", 1) .style("transform", "scale(1)"); state.isFiltered = true; updateVisualization(); setTimeout(() => { state.isFiltered = false; }, 2000); }); // Leyenda de tipos de nodos (flotante, arriba a la izquierda) const typeLegend = svg.append("g").attr("transform", "translate(25, 70)"); const typeLegendData = [ {label: "Autores", color: CONFIG.colors.author, r: 6}, {label: "Conceptos", color: CONFIG.colors.concept, r: 5} ]; typeLegend.append("rect") .attr("width", 110) .attr("height", 70) .attr("fill", "rgba(255,255,255,0.95)") .attr("stroke", "#e0e0e0") .attr("rx", 6) .style("filter", "drop-shadow(0 2px 6px rgba(0,0,0,0.1))"); typeLegend.append("text") .attr("x", 12) .attr("y", 20) .attr("font-size", "11px") .attr("font-weight", "bold") .attr("fill", "#333") .text("Tipos de Nodos"); typeLegendData.forEach((d, i) => { const g = typeLegend.append("g").attr("transform", "translate(12, " + (38 + i * 22) + ")"); g.append("circle") .attr("r", d.r) .attr("fill", d.color) .attr("stroke", "#fff") .attr("stroke-width", 2); g.append("text") .attr("x", 16) .attr("y", 4) .text(d.label) .attr("font-size", "11px") .attr("fill", "#333"); }); // Controles de zoom mejorados const zoomControls = svg.append("g").attr("transform", "translate(" + (CONFIG.width - 50) + ", " + (CONFIG.height - 120) + ")"); const zoomButtons = [ {y: 0, icon: "+", scale: 1.4, label: "Acercar"}, {y: 36, icon: "−", scale: 0.7, label: "Alejar"}, {y: 72, icon: "⌂", scale: null, label: "Centrar"} ]; zoomButtons.forEach(btn => { const g = zoomControls.append("g") .attr("transform", "translate(0, " + btn.y + ")") .style("cursor", "pointer"); g.append("rect") .attr("width", 32) .attr("height", 28) .attr("fill", "#ffffff") .attr("stroke", "#ccc") .attr("rx", 4) .style("filter", "drop-shadow(0 1px 3px rgba(0,0,0,0.15))"); g.append("text") .attr("x", 16) .attr("y", 19) .attr("text-anchor", "middle") .text(btn.icon) .attr("font-size", "16px") .attr("fill", "#333"); g.on("click", () => { if (btn.scale) { svg.transition().duration(400).call(zoom.scaleBy, btn.scale); } else { svg.transition().duration(600).call(zoom.transform, d3.zoomIdentity); // Recentrar simulación simulation.alpha(0.5).restart(); } }); }); // Nota al pie svg.append("text") .attr("x", 25) .attr("y", CONFIG.height - 20) .attr("font-size", "9px") .attr("fill", "#666") .style("font-style", "italic") .text("Fuente: OpenAlex API | Los colores indican la revista de origen | Física adaptativa: los nodos se agrupan al aplicar filtros"); // Inicializar visualización simulation.on("tick", () => { link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node.attr("transform", d => "translate(" + d.x + "," + d.y + ")"); }); // Primera carga updateVisualization(); return container.node(); }32:[] 2f:{"title":"Red de Conocimiento de Revistas UCA","cells":[{"id":0,"value":"# Red de Conocimiento de Revistas UCA","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}