2f:Tc2c7,chart = { // ============================================================================ // CONFIGURACIÓN Y CONSTANTES - ECA: ESTUDIOS CENTROAMERICANOS // ============================================================================ const CONFIG = { width: 1200, height: 900, journalId: "S4210199283", // ← ID de ECA en OpenAlex journalName: "ECA: Estudios Centroamericanos", journalIssn: "0014-1445 / 2788-9580", institutionId: "I63797719", // UCA El Salvador apiBase: "https://api.openalex.org/works", perPage: 200, colors: { work: "#DE3210", author: "#FFA500", concept: "#333333", 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, activeTooltip: null }; // ============================================================================ // FUNCIÓN DE FETCH CON CURSOR PAGINATION // ============================================================================ async function fetchOpenAlexData() { const allWorks = []; let cursor = "*"; let hasMore = true; let pageCount = 0; const maxPages = 4; // 4 páginas × 200 = 800 artículos máximo while (hasMore && pageCount < maxPages) { const url = new URL(CONFIG.apiBase); // Filtro por revista ECA (sin restricción de institución/país para obtener datos) 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 { 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; } 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})`); 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; const openAlexUrl = work.id || `https://openalex.org/works/${workId}`; 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, 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 (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 basados en artículos reales de ECA const works = [ {id: "w1", title: "Corte Suprema de Justicia", year: 2011, citations: 360, authors: ["El Editor"], country: "SV", doi: "https://doi.org/10.51378/eca.v66i726.3419"}, {id: "w2", title: "Pensamiento social cristiano y realidad centroamericana", year: 1975, citations: 45, authors: ["Segundo Montes, S.J."], country: "SV"}, {id: "w3", title: "El Salvador: democracia y paz", year: 1992, citations: 120, authors: ["Jon Sobrino, S.J."], country: "SV"}, {id: "w4", title: "La violencia en Centroamérica", year: 1980, citations: 89, authors: ["Ignacio Martín-Baró, S.J."], country: "SV"}, {id: "w5", title: "Economía política del desarrollo centroamericano", year: 1985, citations: 67, authors: ["Hector Dada Hirezi"], country: "SV"}, {id: "w6", title: "Migración y remesas en El Salvador", year: 2005, citations: 95, authors: ["Paolo Luers"], country: "SV"}, {id: "w7", title: "Género y violencia en Centroamérica", year: 1998, citations: 78, authors: ["Morena Herrera"], country: "SV"}, {id: "w8", title: "La guerra civil salvadoreña: causas y consecuencias", year: 1995, citations: 110, authors: ["Rafael Menjívar"], country: "SV"}, {id: "w9", title: "Derechos humanos en El Salvador", year: 1990, citations: 85, authors: ["Miguel Cruz"], country: "SLV"}, {id: "w10", title: "Transformación agraria en Centroamérica", year: 1982, citations: 55, authors: ["Alfredo Jovel"], country: "SLV"}, {id: "w11", title: "Educación popular y concientización", year: 1978, citations: 72, authors: ["Carlos Acevedo"], country: "SLV"}, {id: "w12", title: "El papel de la Iglesia en la sociedad salvadoreña", year: 1988, citations: 63, authors: ["Rodolfo Cardenal"], country: "SLV"}, {id: "w13", title: "Neoliberalismo y pobreza en El Salvador", year: 2000, citations: 92, authors: ["Ricardo Stein"], country: "SLV"}, {id: "w14", title: "Juventud y violencia en Centroamérica", year: 2010, citations: 58, authors: ["Juan Carlos Sánchez"], country: "GTM"}, {id: "w15", title: "Memoria histórica y reconciliación", year: 2015, citations: 42, authors: ["Erik Ching"], country: "SLV"}, {id: "w16", title: "Comercio exterior y desarrollo en Centroamérica", year: 1990, citations: 38, authors: ["Manuel Orozco"], country: "HND"}, {id: "w17", title: "Cultura política y democracia", year: 2008, citations: 51, authors: ["José Miguel Cruz"], country: "SLV"}, {id: "w18", title: "Desplazamiento forzado en El Salvador", year: 1986, citations: 47, authors: ["Elizabeth Wood"], country: "SLV"}, {id: "w19", title: "Relaciones El Salvador-Estados Unidos", year: 1994, citations: 65, authors: ["Cynthia Arnson"], country: "SLV"}, {id: "w20", title: "Pobreza rural y desarrollo sostenible", year: 2002, citations: 53, authors: ["Ana Silvia Monzón"], country: "SLV"}, // Artículos del Editor {id: "w21", title: "Editorial: Perspectivas centroamericanas 2023", year: 2023, citations: 3, authors: ["Editor"], country: "SLV"}, {id: "w22", title: "Editorial: Desafíos de la región", year: 2022, citations: 5, authors: ["Editor"], country: "SLV"}, {id: "w23", title: "Editorial: Paz y reconciliación", year: 2021, citations: 4, authors: ["Editor"], country: "SLV"}, {id: "w24", title: "Editorial: Migración y desarrollo", year: 2020, citations: 6, authors: ["Editor"], country: "SLV"}, {id: "w25", title: "Editorial: Justicia social", year: 2019, citations: 7, authors: ["Editor"], country: "SLV"}, {id: "w26", title: "Editorial: Democracia y participación", year: 2018, citations: 8, authors: ["Editor"], country: "SLV"}, {id: "w27", title: "Editorial: Medio ambiente y sostenibilidad", year: 2017, citations: 5, authors: ["Editor"], country: "SLV"}, {id: "w28", title: "Editorial: Derechos humanos", year: 2016, citations: 4, authors: ["Editor"], country: "SLV"}, {id: "w29", title: "Editorial: Economía y sociedad", year: 2015, citations: 6, authors: ["Editor"], country: "SLV"}, {id: "w30", title: "Editorial: Cultura e identidad", year: 2014, citations: 5, authors: ["Editor"], country: "SLV"}, {id: "w31", title: "Editorial: Educación y futuro", year: 2013, citations: 4, authors: ["Editor"], country: "SLV"}, {id: "w32", title: "Editorial: Salud y bienestar", year: 2012, citations: 3, authors: ["Editor"], country: "SLV"}, {id: "w33", title: "Editorial: Tecnología e innovación", year: 2011, 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()); // Conceptos relevantes para ECA const concepts = [ {id: "c1", name: "Human Rights", level: 0, count: 8}, {id: "c2", name: "Political Science", level: 0, count: 10}, {id: "c3", name: "Social Justice", level: 1, count: 7}, {id: "c4", name: "Latin American Studies", level: 0, count: 9}, {id: "c5", name: "Peace and Conflict Studies", level: 1, count: 6}, {id: "c6", name: "Development Economics", level: 1, count: 5}, {id: "c7", name: "Migration Studies", level: 1, count: 4}, {id: "c8", name: "Gender Studies", level: 1, count: 5}, {id: "c9", name: "Rural Sociology", level: 2, count: 3}, {id: "c10", name: "Liberation Theology", level: 2, count: 4}, {id: "c11", name: "Democracy", level: 1, count: 6}, {id: "c12", name: "Violence", level: 1, count: 7}, {id: "c13", name: "Poverty", level: 1, count: 5}, {id: "c14", name: "Education", level: 1, count: 4}, {id: "c15", name: "Memory Studies", 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", "c2"], ["w1", "c11"], ["w2", "c10"], ["w2", "c3"], ["w3", "c5"], ["w3", "c11"], ["w4", "c12"], ["w4", "c1"], ["w5", "c6"], ["w5", "c13"], ["w6", "c7"], ["w6", "c6"], ["w7", "c8"], ["w7", "c12"], ["w8", "c5"], ["w8", "c12"], ["w9", "c1"], ["w9", "c2"], ["w10", "c6"], ["w10", "c9"], ["w11", "c14"], ["w11", "c3"], ["w12", "c10"], ["w12", "c2"], ["w13", "c6"], ["w13", "c13"], ["w14", "c12"], ["w14", "c8"], ["w15", "c15"], ["w15", "c5"], ["w16", "c6"], ["w16", "c4"], ["w17", "c2"], ["w17", "c11"], ["w18", "c1"], ["w18", "c7"], ["w19", "c2"], ["w19", "c4"], ["w20", "c9"], ["w20", "c13"], ["w21", "c4"], ["w22", "c4"], ["w23", "c5"], ["w24", "c7"], ["w25", "c3"], ["w26", "c11"], ["w27", "c6"], ["w28", "c1"], ["w29", "c6"], ["w30", "c4"], ["w31", "c14"], ["w32", "c1"], ["w33", "c2"] ]; conceptLinks.forEach(([work, concept]) => { links.push({ source: work, target: concept, type: "concept", score: 0.75 }); }); // Citas entre artículos const citations = [ ["w3", "w2"], ["w4", "w2"], ["w8", "w4"], ["w9", "w4"], ["w13", "w5"], ["w15", "w8"], ["w17", "w9"], ["w18", "w4"], ["w19", "w8"], ["w20", "w10"], ["w22", "w21"], ["w23", "w22"], ["w24", "w23"], ["w25", "w24"], ["w26", "w25"], ["w27", "w26"], ["w28", "w27"], ["w29", "w28"], ["w30", "w29"], ["w31", "w30"], ["w32", "w31"], ["w33", "w32"] ]; 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) // ============================================================================ 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 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 const row1 = controlPanel.append("div") .style("display", "flex") .style("flex-wrap", "wrap") .style("gap", "10px") .style("align-items", "center") .style("margin-bottom", "12px"); const searchContainer = row1.append("div") .style("position", "relative") .style("flex", "1 1 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(); }); 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") .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(); }); }); 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 const row2 = controlPanel.append("div") .style("display", "flex") .style("flex-wrap", "wrap") .style("gap", "15px") .style("align-items", "center"); 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"); 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(); }); 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"); 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") .style("width", "100%") .style("box-sizing", "border-box"); const svg = svgContainer.append("svg") .attr("width", "100%") .attr("height", CONFIG.height) .attr("viewBox", `0 0 ${CONFIG.width} ${CONFIG.height}`) .style("background", "#ffffff") .style("display", "block") .style("max-width", "100%"); const g = svg.append("g"); 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(); console.log(`Visualización lista con ${state.totalWorksLoaded} artículos`); 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); }); (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", "SV": "El Salvador" }; countrySelect.append("option").attr("value", country).text(countryNames[country] || country); }); 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]); 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)); 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 // ============================================================================ 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") .style("max-height", "400px") .style("overflow-y", "auto"); 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; node.style("opacity", 1); link.style("stroke-opacity", 0.6); }); const infoContent = infoPanel.append("div") .attr("class", "info-content"); 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() { const visibleNodes = state.data.nodes.filter(d => { if (!state.filterTypes.has(d.type)) return false; if (state.searchQuery && !d.searchText?.includes(state.searchQuery)) return false; if (d.type === "work" && (d.year < state.yearRange.min || d.year > state.yearRange.max)) return false; if (d.type === "work" && d.cited_by_count < state.citationRange.min) return false; 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)); const visibleLinks = state.data.links.filter(l => visibleNodeIds.has(l.source.id || l.source) && visibleNodeIds.has(l.target.id || l.target) ); 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}` ); 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); 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; })); 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); 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"); 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); 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); node.select(".highlight-ring") .attr("opacity", d => { if (!state.searchQuery) return 0; const isMatch = d.searchText?.includes(state.searchQuery); return isMatch ? 1 : 0.15; }); node.on("mouseenter", function(e, d) { 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"); } 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"); 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(); state.activeTooltip = d.id; showInfoPanel(d); 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); }); svg.on("click", () => { infoPanel.style("display", "none"); state.activeTooltip = null; node.style("opacity", 1); link.style("stroke-opacity", 0.6); }); 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(""); 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; 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; 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}