27:null 28:["$","title",null,{"children":"Network analysis Journal Realidad Empresarial | Kevin Gutierrez | Observable"}] 2d:Td3ad,chart = { // ============================================================================ // CONFIGURACIÓN Y CONSTANTES // ============================================================================ const CONFIG = { width: 1200, // Aumentado para evitar que botones queden afuera height: 900, journalId: "S4210170416", apiBase: "https://api.openalex.org/works", perPage: 200, // Máximo permitido por OpenAlex colors: { work: "#1f4e79", author: "#FFA500", concept: "#70ad47", citation: "#c55a11", authorship: "#595959", highlight: "#e74c3c" }, fonts: { title: "Georgia, 'Times New Roman', serif", body: "'Helvetica Neue', Arial, sans-serif", ui: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif" } }; // ============================================================================ // 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(), highlightedNodes: new Set(), data: null, totalWorksLoaded: 0, // Tracking de artículos cargados activeTooltip: null // Para mantener tooltip fijo }; // ============================================================================ // FUNCIÓN DE FETCH CON CURSOR PAGINATION (PARA OBTENER TODOS LOS ARTÍCULOS) // ============================================================================ async function fetchOpenAlexData() { const allWorks = []; let cursor = "*"; // Cursor inicial para paginación let hasMore = true; let pageCount = 0; const maxPages = 5; // Límite de seguridad: 5 páginas × 200 = 1000 artículos máximo while (hasMore && pageCount < maxPages) { const url = new URL(CONFIG.apiBase); url.searchParams.append("filter", `primary_location.source.id:${CONFIG.journalId}`); url.searchParams.append("per_page", CONFIG.perPage.toString()); url.searchParams.append("cursor", cursor); url.searchParams.append("mailto", "researcher@university.edu"); try { // Delay entre requests para no saturar la API if (pageCount > 0) { await new Promise(resolve => setTimeout(resolve, 100)); } const response = await fetch(url); if (!response.ok) { if (response.status === 429) { // Rate limit console.warn("Rate limit alcanzado, esperando 1 segundo..."); await new Promise(resolve => setTimeout(resolve, 1000)); continue; // Reintentar misma página } 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); console.log(`Página ${pageCount + 1}: ${works.length} artículos cargados (Total: ${allWorks.length})`); // 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 fetch:", error.message); hasMore = false; } } console.log(`Total de artículos cargados: ${allWorks.length}`); state.totalWorksLoaded = allWorks.length; if (allWorks.length === 0) { console.warn("No se obtuvieron datos de la API, usando respaldo"); return getValidatedBackupData(); } return processOpenAlexData(allWorks); } // ============================================================================ // PROCESAMIENTO DE DATOS // ============================================================================ function processOpenAlexData(works) { if (!Array.isArray(works) || works.length === 0) { return getValidatedBackupData(); } const nodes = []; const links = []; const nodeMap = new Map(); const countries = new Set(); const getWorkId = (work) => work.id ? work.id.split("/").pop() : `w${hashString(work.title || "unknown")}`; const getAuthorId = (author) => author.orcid ? `a${author.orcid.split("/").pop().replace(/-/g, "")}` : `a${hashString(author.display_name || "unknown")}`; const getConceptId = (concept) => `c${concept.id?.split("/").pop() || hashString(concept.display_name)}`; works.forEach((work) => { const workId = getWorkId(work); if (nodeMap.has(workId)) return; // Construir URL del artículo en OpenAlex const openAlexUrl = work.id || `https://openalex.org/works/${workId}`; // URL alternativa si hay DOI const articleUrl = work.doi || openAlexUrl; const node = { id: workId, type: "work", group: 1, title: truncateText(work.title, 45), 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, url: articleUrl, // URL para click openAlexUrl: openAlexUrl, searchText: (work.title || "").toLowerCase() }; 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() }; nodes.push(authorNode); nodeMap.set(authorId, authorNode); } else { nodeMap.get(authorId).works_count++; } links.push({ source: workId, target: authorId, type: "authorship" }); }); // Procesar TODOS los conceptos disponibles (sin filtro restrictivo) (work.concepts || []).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 || 0, count: 1, searchText: (concept.display_name || "").toLowerCase() }; nodes.push(conceptNode); nodeMap.set(conceptId, conceptNode); } else { nodeMap.get(conceptId).count++; } links.push({ source: workId, target: conceptId, type: "concept", score: concept.score || 0 }); }); }); // Procesar citas 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" }); } } }); }); state.availableCountries = Array.from(countries).sort(); return { nodes, links }; } function getValidatedBackupData() { // Datos de respaldo expandidos (37 artículos) const works = [ {id: "w1", title: "Los empaques biodegradables, una respuesta a la consciencia ambiental de los consumidores", year: 2019, citations: 7, authors: ["Rivera, C.", "Contreras, F.", "Ariza, W.B.", "Bonilla, S.", "Cruz, A.T."], country: "SLV", doi: "https://doi.org/10.5377/eca.v20i1.10245"}, {id: "w2", title: "Las relaciones interpersonales en la empresa", year: 2017, citations: 8, authors: ["Martínez, R.A."], country: "SLV"}, {id: "w3", title: "Trabajo y salud mental en tiempos de pandemia", year: 2020, citations: 7, authors: ["Molina, J."], country: "SLV"}, {id: "w4", title: "Gestión de la innovación en pequeñas empresas manufactureras", year: 2018, citations: 5, authors: ["Hernández, S.", "López, M."], country: "SLV"}, {id: "w5", title: "Impacto del marketing digital en las ventas de las MIPYMES", year: 2021, citations: 4, authors: ["Pérez, A.", "Gómez, L."], country: "SLV"}, {id: "w6", title: "Responsabilidad social empresarial y su efecto en la imagen corporativa", year: 2020, citations: 3, authors: ["Castro, R."], country: "SLV"}, {id: "w7", title: "Análisis financiero para la toma de decisiones estratégicas", year: 2019, citations: 2, authors: ["Morales, J.", "Vásquez, K."], country: "SLV"}, {id: "w8", title: "Liderazgo transformacional en organizaciones de servicios", year: 2022, citations: 1, authors: ["Reyes, D."], country: "SLV"}, {id: "w9", title: "Estrategias de internacionalización para pymes centroamericanas", year: 2021, citations: 6, authors: ["López, M.", "Hernández, A."], country: "GTM"}, {id: "w10", title: "Innovación abierta en empresas familiares salvadoreñas", year: 2020, citations: 4, authors: ["García, P.", "Martínez, J."], country: "SLV"}, {id: "w11", title: "Comportamiento del consumidor en mercados emergentes", year: 2019, citations: 9, authors: ["Ariza, W.B."], country: "SLV"}, {id: "w12", title: "Gestión del talento humano en el sector servicios", year: 2018, citations: 5, authors: ["Contreras, F.", "Rivera, C."], country: "SLV"}, {id: "w13", title: "Sostenibilidad y competitividad empresarial", year: 2022, citations: 3, authors: ["Bonilla, S."], country: "SLV"}, {id: "w14", title: "Transformación digital en cadenas de suministro", year: 2021, citations: 7, authors: ["Cruz, A.T.", "Molina, J."], country: "SLV"}, {id: "w15", title: "Ética empresarial y toma de decisiones gerenciales", year: 2020, citations: 4, authors: ["Martínez, R.A.", "Reyes, D."], country: "SLV"}, {id: "w16", title: "Emprendimiento social en contextos vulnerables", year: 2019, citations: 6, authors: ["Hernández, S."], country: "HND"}, {id: "w17", title: "Calidad y productividad en manufactura esbelta", year: 2018, citations: 8, authors: ["Pérez, A.", "Castro, R."], country: "SLV"}, {id: "w18", title: "Marketing relacional y fidelización de clientes", year: 2022, citations: 2, authors: ["Gómez, L.", "Morales, J."], country: "SLV"}, {id: "w19", title: "Gestión del conocimiento en organizaciones innovadoras", year: 2021, citations: 5, authors: ["Vásquez, K."], country: "SLV"}, {id: "w20", title: "Finanzas comportamentales y decisiones de inversión", year: 2020, citations: 4, authors: ["Rivera, C.", "Ariza, W.B."], country: "SLV"}, // Artículos adicionales de Cecilia Rivera (total 7) {id: "w21", title: "Criaturitas: un emprendimiento hacia la niñez", year: 2018, citations: 5, authors: ["Rivera, C.", "Echeverría, E."], country: "SLV"}, {id: "w22", title: "CREAROKO: una empresa de innovación y desarrollo", year: 2019, citations: 6, authors: ["Rivera, C.", "España, J."], country: "SLV"}, {id: "w23", title: "TOONIC: un emprendimiento con corazón de artesano", year: 2019, citations: 4, authors: ["España, J.", "Rivera, C."], country: "SLV"}, {id: "w24", title: "Take a Wok: comida tailandesa en El Salvador", year: 2018, citations: 5, authors: ["López Loucel, F.", "Rivera, C."], country: "SLV"}, // Artículos del Editor (total 13) {id: "w25", title: "Editorial: Perspectivas empresariales 2023", year: 2023, citations: 3, authors: ["Editor"], country: "SLV"}, {id: "w26", title: "Tendencias del mercado centroamericano", year: 2022, citations: 5, authors: ["Editor"], country: "SLV"}, {id: "w27", title: "Innovación y competitividad regional", year: 2021, citations: 4, authors: ["Editor"], country: "SLV"}, {id: "w28", title: "Desafíos del emprendimiento en El Salvador", year: 2020, citations: 6, authors: ["Editor"], country: "SLV"}, {id: "w29", title: "El futuro de las MIPYMES salvadoreñas", year: 2019, citations: 7, authors: ["Editor"], country: "SLV"}, {id: "w30", title: "Transformación digital en Centroamérica", year: 2018, citations: 8, authors: ["Editor"], country: "SLV"}, {id: "w31", title: "Comercio exterior y nuevas oportunidades", year: 2017, citations: 5, authors: ["Editor"], country: "SLV"}, {id: "w32", title: "Capital humano y desarrollo empresarial", year: 2022, citations: 4, authors: ["Editor"], country: "SLV"}, {id: "w33", title: "Sostenibilidad como estrategia de negocio", year: 2021, citations: 6, authors: ["Editor"], country: "SLV"}, {id: "w34", title: "Nuevos modelos de negocio post-pandemia", year: 2020, citations: 5, authors: ["Editor"], country: "SLV"}, {id: "w35", title: "Alianzas estratégicas para el crecimiento", year: 2019, citations: 4, authors: ["Editor"], country: "SLV"}, {id: "w36", title: "Empresas familiares: retos y oportunidades", year: 2018, citations: 3, authors: ["Editor"], country: "SLV"}, {id: "w37", title: "Educación empresarial en El Salvador", year: 2017, citations: 5, authors: ["Editor"], country: "SLV"} ]; const nodes = []; const links = []; const authorMap = new Map(); const countries = new Set(); works.forEach(w => { countries.add(w.country); nodes.push({ id: w.id, type: "work", group: 1, title: truncateText(w.title, 40), fullTitle: w.title, year: w.year, cited_by_count: w.citations, doi: w.doi || null, url: w.doi || `https://openalex.org/works/${w.id}`, open_access: false, searchText: w.title.toLowerCase() }); w.authors.forEach((authorName) => { const authorId = `a${hashString(authorName)}`; if (!authorMap.has(authorId)) { authorMap.set(authorId, { id: authorId, type: "author", group: 2, name: authorName, orcid: null, institutions: "Universidad Centroamericana José Simeón Cañas", country: w.country, works_count: 1, searchText: authorName.toLowerCase() }); } else { authorMap.get(authorId).works_count++; } links.push({ source: w.id, target: authorId, type: "authorship" }); }); }); nodes.push(...authorMap.values()); // Más conceptos para el respaldo const concepts = [ {id: "c1", name: "Sustainability", level: 0, count: 5}, {id: "c2", name: "Consumer Behavior", level: 1, count: 6}, {id: "c3", name: "Organizational Behavior", level: 0, count: 5}, {id: "c4", name: "Mental Health", level: 1, count: 3}, {id: "c5", name: "Innovation Management", level: 1, count: 4}, {id: "c6", name: "Digital Marketing", level: 1, count: 5}, {id: "c7", name: "Corporate Social Responsibility", level: 1, count: 4}, {id: "c8", name: "Financial Analysis", level: 1, count: 3}, {id: "c9", name: "Transformational Leadership", level: 1, count: 3}, {id: "c10", name: "Supply Chain Management", level: 2, count: 4}, {id: "c11", name: "Entrepreneurship", level: 1, count: 5}, {id: "c12", name: "Strategic Management", level: 0, count: 6}, {id: "c13", name: "Human Resources", level: 1, count: 4}, {id: "c14", name: "Knowledge Management", level: 2, count: 3}, {id: "c15", name: "Service Quality", level: 2, count: 3} ]; concepts.forEach(c => { nodes.push({ id: c.id, type: "concept", group: 3, name: c.name, level: c.level, count: c.count, score: 0.8, searchText: c.name.toLowerCase() }); }); // Conectar conceptos a artículos const conceptLinks = [ ["w1", "c1"], ["w1", "c2"], ["w1", "c12"], ["w2", "c3"], ["w2", "c13"], ["w3", "c4"], ["w3", "c13"], ["w4", "c5"], ["w4", "c12"], ["w5", "c6"], ["w5", "c2"], ["w6", "c7"], ["w6", "c12"], ["w7", "c8"], ["w8", "c9"], ["w8", "c3"], ["w9", "c11"], ["w9", "c12"], ["w10", "c5"], ["w10", "c14"], ["w11", "c2"], ["w11", "c6"], ["w12", "c13"], ["w12", "c3"], ["w13", "c1"], ["w13", "c12"], ["w14", "c10"], ["w14", "c5"], ["w15", "c3"], ["w15", "c12"], ["w16", "c11"], ["w16", "c7"], ["w17", "c5"], ["w18", "c6"], ["w18", "c2"], ["w19", "c14"], ["w19", "c5"], ["w20", "c8"], ["w21", "c11"], ["w21", "c2"], ["w22", "c5"], ["w22", "c11"], ["w23", "c11"], ["w23", "c2"], ["w24", "c2"], ["w24", "c11"], ["w25", "c12"], ["w26", "c2"], ["w26", "c12"], ["w27", "c5"], ["w27", "c12"], ["w28", "c11"], ["w29", "c11"], ["w29", "c12"], ["w30", "c6"], ["w30", "c10"], ["w31", "c12"], ["w32", "c13"], ["w33", "c1"], ["w33", "c12"], ["w34", "c6"], ["w34", "c11"], ["w35", "c12"], ["w36", "c11"], ["w37", "c12"] ]; conceptLinks.forEach(([work, concept]) => { links.push({ source: work, target: concept, type: "concept", score: 0.75 }); }); // Citas entre artículos const citations = [ ["w4", "w1"], ["w5", "w1"], ["w6", "w2"], ["w7", "w2"], ["w8", "w3"], ["w5", "w3"], ["w6", "w4"], ["w9", "w4"], ["w10", "w5"], ["w11", "w6"], ["w12", "w7"], ["w13", "w8"], ["w14", "w9"], ["w15", "w10"], ["w16", "w11"], ["w17", "w12"], ["w18", "w13"], ["w19", "w14"], ["w20", "w15"], ["w22", "w21"], ["w23", "w22"], ["w24", "w21"], ["w26", "w25"], ["w27", "w26"], ["w28", "w27"], ["w29", "w28"], ["w30", "w29"], ["w31", "w30"], ["w32", "w26"], ["w33", "w27"], ["w34", "w28"], ["w35", "w29"], ["w36", "w30"], ["w37", "w31"] ]; citations.forEach(([source, target]) => { links.push({ source, target, type: "citation" }); }); state.availableCountries = Array.from(countries).sort(); state.totalWorksLoaded = works.length; return { nodes, links }; } 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, 8); } 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 (UI) - AJUSTADA PARA QUE NADA QUEDE AFUERA // ============================================================================ const container = d3.create("div") .style("width", "100%") .style("max-width", CONFIG.width + "px") .style("font-family", CONFIG.fonts.ui) .style("position", "relative") .style("margin", "0 auto"); // Panel de controles superior - CON WRAP PARA QUE NADA SE CORTE const controlPanel = container.append("div") .style("background", "#f5f5f5") .style("border", "1px solid #ddd") .style("border-bottom", "none") .style("padding", "15px 20px") .style("border-radius", "4px 4px 0 0") .style("box-sizing", "border-box"); // Fila 1: Barra de búsqueda y filtros principales - FLEX WRAP const row1 = controlPanel.append("div") .style("display", "flex") .style("flex-wrap", "wrap") // Permite que los elementos bajen si no caben .style("gap", "10px") .style("align-items", "center") .style("margin-bottom", "12px"); // Barra de búsqueda con icono - FLEX GROW PARA OCUPAR ESPACIO DISPONIBLE const searchContainer = row1.append("div") .style("position", "relative") .style("flex", "1 1 300px") // Crece y encoge, base 300px .style("min-width", "200px"); 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", "10px 12px 10px 35px") .style("border", "1px solid #ccc") .style("border-radius", "4px") .style("font-size", "13px") .style("outline", "none") .style("box-sizing", "border-box") .on("input", function() { state.searchQuery = this.value.toLowerCase(); updateVisualization(); }); // Filtros por tipo - NO SE CORTAN const typeFilters = row1.append("div") .style("display", "flex") .style("flex-wrap", "wrap") .style("gap", "6px") .style("align-items", "center"); typeFilters.append("span") .style("font-size", "12px") .style("color", "#666") .style("font-weight", "600") .style("white-space", "nowrap") .text("Mostrar:"); ["work", "author", "concept"].forEach(type => { const label = {work: "Artículos", author: "Autores", concept: "Conceptos"}[type]; const color = CONFIG.colors[type]; const btn = typeFilters.append("button") .attr("class", "filter-btn filter-type") .attr("data-type", type) .style("padding", "6px 12px") .style("border", `2px solid ${color}`) .style("background", color) .style("color", "white") .style("border-radius", "4px") .style("font-size", "11px") .style("cursor", "pointer") .style("font-weight", "600") .style("white-space", "nowrap") // No cortar texto .text(label) .on("click", function() { const isActive = state.filterTypes.has(type); if (isActive && state.filterTypes.size > 1) { state.filterTypes.delete(type); d3.select(this) .style("background", "white") .style("color", color); } else if (!isActive) { state.filterTypes.add(type); d3.select(this) .style("background", color) .style("color", "white"); } updateVisualization(); }); }); // Botón reset row1.append("button") .style("padding", "8px 16px") .style("background", "#e74c3c") .style("color", "white") .style("border", "none") .style("border-radius", "4px") .style("font-size", "12px") .style("cursor", "pointer") .style("font-weight", "600") .style("white-space", "nowrap") .text("↺ Reset") .on("click", resetFilters); // Fila 2: Filtros avanzados - TAMBIÉN CON WRAP const row2 = controlPanel.append("div") .style("display", "flex") .style("flex-wrap", "wrap") .style("gap", "15px") .style("align-items", "center"); // Filtro de año const yearFilter = row2.append("div") .style("display", "flex") .style("align-items", "center") .style("gap", "6px"); yearFilter.append("span") .style("font-size", "11px") .style("color", "#666") .style("white-space", "nowrap") .text("Año:"); const yearSelect = yearFilter.append("select") .style("padding", "5px 8px") .style("border", "1px solid #ccc") .style("border-radius", "3px") .style("font-size", "11px") .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 }; } updateVisualization(); }); yearSelect.append("option").attr("value", "all").text("Todos"); // Filtro de citas const citationFilter = row2.append("div") .style("display", "flex") .style("align-items", "center") .style("gap", "6px"); citationFilter.append("span") .style("font-size", "11px") .style("color", "#666") .style("white-space", "nowrap") .text("Citas mín.:"); citationFilter.append("input") .attr("type", "number") .attr("min", "0") .attr("placeholder", "0") .style("width", "60px") .style("padding", "5px") .style("border", "1px solid #ccc") .style("border-radius", "3px") .style("font-size", "11px") .on("input", function() { state.citationRange.min = parseInt(this.value) || 0; updateVisualization(); }); // Filtro de país const countryFilter = row2.append("div") .style("display", "flex") .style("align-items", "center") .style("gap", "6px"); countryFilter.append("span") .style("font-size", "11px") .style("color", "#666") .style("white-space", "nowrap") .text("País:"); const countrySelect = countryFilter.append("select") .style("padding", "5px 8px") .style("border", "1px solid #ccc") .style("border-radius", "3px") .style("font-size", "11px") .style("min-width", "120px") .on("change", function() { const val = this.value; if (val === "all") { state.selectedCountries.clear(); } else { state.selectedCountries.clear(); state.selectedCountries.add(val); } updateVisualization(); }); countrySelect.append("option").attr("value", "all").text("Todos"); // Contador de resultados - AL FINAL, NO SE CORTA const resultsCounter = row2.append("div") .style("margin-left", "auto") .style("font-size", "11px") .style("color", "#666") .style("font-weight", "600") .style("white-space", "nowrap") .style("padding", "5px 10px") .style("background", "#e8e8e8") .style("border-radius", "3px") .text("Cargando..."); // ============================================================================ // SVG Y VISUALIZACIÓN PRINCIPAL // ============================================================================ const svgContainer = container.append("div") .style("position", "relative") .style("border", "1px solid #ddd") .style("border-radius", "0 0 4px 4px") .style("overflow", "hidden") // Evita scroll no deseado .style("width", "100%") .style("box-sizing", "border-box"); const svg = svgContainer.append("svg") .attr("width", "100%") // Responsive .attr("height", CONFIG.height) .attr("viewBox", `0 0 ${CONFIG.width} ${CONFIG.height}`) // Mantiene proporción .style("background", "#ffffff") .style("display", "block") .style("max-width", "100%"); const g = svg.append("g"); // Zoom const zoom = d3.zoom() .scaleExtent([0.3, 3]) .on("zoom", (e) => g.attr("transform", e.transform)); svg.call(zoom); // ============================================================================ // CARGA DE DATOS E INICIALIZACIÓN // ============================================================================ state.data = await fetchOpenAlexData(); // Mostrar cuántos artículos se cargaron realmente console.log(`Visualización lista con ${state.totalWorksLoaded} artículos`); // 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 (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" }; 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) * 3; if (d.type === "author") return 7 + Math.min((d.works_count || 0) * 1.5, 14); return 6 + Math.min((d.count || 0) * 2, 12); }; const colorScale = d3.scaleOrdinal() .domain(["work", "author", "concept"]) .range([CONFIG.colors.work, CONFIG.colors.author, CONFIG.colors.concept]); // Simulación const simulation = d3.forceSimulation(state.data.nodes) .force("link", d3.forceLink(state.data.links) .id(d => d.id) .distance(d => d.type === "authorship" ? 50 : d.type === "concept" ? 70 : 120) .strength(0.5)) .force("charge", d3.forceManyBody() .strength(d => d.type === "work" ? -500 : d.type === "author" ? -300 : -150)) .force("center", d3.forceCenter(CONFIG.width / 2, CONFIG.height / 2 + 40)) .force("collision", d3.forceCollide().radius(d => radiusScale(d) + 10).strength(0.8)) .force("y", d3.forceY(d => { if (d.type === "work") return CONFIG.height * 0.45; if (d.type === "author") return CONFIG.height * 0.65; return CONFIG.height * 0.25; }).strength(0.1)); // Elementos visuales iniciales let link = g.append("g").attr("class", "links").selectAll("line"); let node = g.append("g").attr("class", "nodes").selectAll("g"); // ============================================================================ // PANEL DE INFORMACIÓN FIJADO (REEMPLAZA AL TOOLTIP FLOTANTE) // ============================================================================ // Crear panel lateral de información const infoPanel = container.append("div") .attr("class", "info-panel") .style("position", "absolute") .style("right", "20px") .style("top", "80px") .style("width", "280px") .style("background", "rgba(255, 255, 255, 0.95)") .style("border", "1px solid #ddd") .style("border-radius", "8px") .style("padding", "15px") .style("box-shadow", "0 4px 12px rgba(0,0,0,0.15)") .style("font-size", "12px") .style("z-index", "1000") .style("display", "none") // Oculto inicialmente .style("max-height", "400px") .style("overflow-y", "auto"); // Botón para cerrar panel infoPanel.append("div") .style("text-align", "right") .style("margin-bottom", "10px") .style("border-bottom", "1px solid #eee") .style("padding-bottom", "5px") .html('✕') .on("click", function() { infoPanel.style("display", "none"); state.activeTooltip = null; // Resetear opacidad de nodos node.style("opacity", 1); link.style("stroke-opacity", 0.6); }); const infoContent = infoPanel.append("div") .attr("class", "info-content"); // Tooltip flotante para hover rápido (opcional) const hoverTooltip = d3.select("body").append("div") .style("position", "absolute") .style("visibility", "hidden") .style("background", "#333") .style("color", "white") .style("padding", "8px 12px") .style("border-radius", "4px") .style("font-size", "11px") .style("pointer-events", "none") .style("z-index", "2000"); // ============================================================================ // FUNCIÓN DE ACTUALIZACIÓN DE VISUALIZACIÓN (FILTRADO) // ============================================================================ function updateVisualization() { // Determinar nodos visibles basados en filtros 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 para works) if (d.type === "work" && (d.year < state.yearRange.min || d.year > state.yearRange.max)) return false; // Filtro por citas (solo para works) if (d.type === "work" && d.cited_by_count < state.citationRange.min) return false; // Filtro por país (solo para authors) if (d.type === "author" && state.selectedCountries.size > 0 && !state.selectedCountries.has(d.country)) 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 => visibleNodeIds.has(l.source.id || l.source) && visibleNodeIds.has(l.target.id || l.target) ); // Actualizar contador con info de carga const workCount = visibleNodes.filter(n => n.type === "work").length; resultsCounter.html( `${workCount} artículos | ` + `${visibleNodes.filter(n => n.type === "author").length} autores | ` + `${visibleLinks.length} conexiones` + `
Total cargados: ${state.totalWorksLoaded}` ); // Actualizar enlaces link = link.data(visibleLinks, d => `${d.source.id || d.source}-${d.target.id || d.target}`); 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 CONFIG.colors.concept; }) .attr("stroke-width", d => d.type === "citation" ? 2.5 : 2) .attr("stroke-opacity", 0.6) .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") .style("cursor", d => d.type === "work" && d.url ? "pointer" : "default") .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 nodeEnter.append("circle") .attr("r", 0) .attr("fill", d => colorScale(d.type)) .attr("stroke", "#fff") .attr("stroke-width", d => d.type === "work" ? 3 : 2) .style("filter", "drop-shadow(0 2px 4px rgba(0,0,0,0.2))") .transition() .duration(500) .attr("r", radiusScale); // Anillo destacado para 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", 2) .attr("opacity", 0) .style("pointer-events", "none"); // Etiquetas nodeEnter.append("text") .text(d => { if (d.type === "work") return truncateText(d.title, 35); return truncateText(d.name || d.title, 30); }) .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" : "400") .attr("fill", "#2c3e50") .style("pointer-events", "none") .style("text-shadow", "0 1px 2px rgba(255,255,255,0.8)") .attr("opacity", 0) .transition() .delay(300) .duration(300) .attr("opacity", 1); // Contadores de citas nodeEnter.filter(d => d.type === "work" && d.cited_by_count > 0) .append("text") .text(d => d.cited_by_count) .attr("text-anchor", "middle") .attr("dy", ".35em") .attr("font-size", "10px") .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 (CLICK PARA FIJAR, HOVER PARA PREVIEW) // ============================================================================ node.on("mouseenter", function(e, d) { // Preview rápido en tooltip flotante if (d.type === "work") { hoverTooltip.html(`📄 ${truncateText(d.title, 40)}
👆 Click para ver detalles`) .style("visibility", "visible"); } else if (d.type === "author") { hoverTooltip.html(`👤 ${d.name}
👆 Click para ver detalles`) .style("visibility", "visible"); } else { hoverTooltip.html(`💡 ${d.name}
👆 Click para ver detalles`) .style("visibility", "visible"); } // Highlight visual 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.2; }); node.style("opacity", n => connected.has(n.id) ? 1 : 0.3); d3.select(this).select(".main-circle") .transition().duration(200) .attr("r", radiusScale(d) * 1.15); }) .on("mousemove", (e) => { hoverTooltip .style("left", (e.pageX + 15) + "px") .style("top", (e.pageY - 10) + "px"); }) .on("mouseleave", function(e, d) { hoverTooltip.style("visibility", "hidden"); // Solo resetear si no está activo el panel de info if (state.activeTooltip !== d.id) { link.style("stroke-opacity", 0.6); node.style("opacity", 1); d3.select(this).select(".main-circle") .transition().duration(200) .attr("r", radiusScale(d)); } }) .on("click", function(e, d) { e.stopPropagation(); // Evitar que se cierre al hacer click // Fijar este nodo como activo state.activeTooltip = d.id; // Mostrar panel de información showInfoPanel(d); // Mantener highlight 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.2; }); node.style("opacity", n => connected.has(n.id) ? 1 : 0.3); }); // Click en el SVG para cerrar panel svg.on("click", () => { infoPanel.style("display", "none"); state.activeTooltip = null; node.style("opacity", 1); link.style("stroke-opacity", 0.6); }); // Reiniciar simulación con nuevos datos simulation.nodes(visibleNodes); simulation.force("link").links(visibleLinks); simulation.alpha(1).restart(); } function showInfoPanel(d) { let content = ""; if (d.type === "work") { const authors = state.data.links .filter(l => (l.source.id || l.source) === d.id && l.type === "authorship") .map(l => state.data.nodes.find(n => n.id === (l.target.id || l.target))?.name) .filter(Boolean) .join("; "); const concepts = state.data.links .filter(l => (l.source.id || l.source) === d.id && l.type === "concept") .map(l => { const node = state.data.nodes.find(n => n.id === (l.target.id || l.target)); return node ? {name: node.name, score: l.score} : null; }) .filter(Boolean) .sort((a, b) => b.score - a.score); const conceptTags = concepts.map(c => `${c.name} ${c.score ? '(' + (c.score * 100).toFixed(0) + '%)' : ''}` ).join(""); // Enlace al artículo const articleLink = d.doi || d.openAlexUrl || d.url; content = `

ARTÍCULO ${d.open_access ? 'Open Access' : ''}

${d.fullTitle}

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

${concepts.length ? `

CONCEPTOS (${concepts.length}):

${conceptTags}

` : ''}

${d.cited_by_count}

Citas

${d.year || "N/A"}

Año

${articleLink ? `

🔗 Ver artículo completo ${d.doi ? `

${d.doi}

` : ''}

` : '

⚠️ Enlace no disponible

'} `; } else if (d.type === "author") { const workCount = state.data.links.filter(l => (l.target.id || l.target) === d.id && l.type === "authorship" ).length; // Encontrar artículos de este autor const authorWorks = state.data.links .filter(l => (l.target.id || l.target) === d.id && l.type === "authorship") .map(l => state.data.nodes.find(n => n.id === (l.source.id || l.source))) .filter(Boolean); const workList = authorWorks.slice(0, 5).map(w => `

• ${truncateText(w.title, 50)} (${w.year})

` ).join(""); content = `

AUTOR

${d.name}

Institución: ${d.institutions}
País: ${d.country}

${workCount}

Artículos en esta revista

${authorWorks.length > 0 ? `

PUBLICACIONES RECIENTES:

${workList} ${authorWorks.length > 5 ? `

...y ${authorWorks.length - 5} más

` : ''}

` : ''} ${d.orcid ? `

🆔 Ver perfil ORCID

` : ''} `; } else { const workCount = state.data.links.filter(l => (l.target.id || l.target) === d.id && l.type === "concept" ).length; // Encontrar artículos con este concepto const conceptWorks = state.data.links .filter(l => (l.target.id || l.target) === d.id && l.type === "concept") .map(l => ({ work: state.data.nodes.find(n => n.id === (l.source.id || l.source)), score: l.score })) .filter(item => item.work) .sort((a, b) => b.score - a.score); const workList = conceptWorks.slice(0, 5).map(item => `

• ${truncateText(item.work.title, 45)} (${(item.score * 100).toFixed(0)}%)

` ).join(""); content = `

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

${d.name}

${workCount}