2f:T46d, # Red de conocimiento: Realidad Empresarial30:T87f9,chart = { // ============================================================================ // CONFIGURACIÓN Y CONSTANTES // ============================================================================ const CONFIG = { width: 1000, height: 800, journalId: "S7407059703", apiBase: "https://api.openalex.org/works", perPage: 200, 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 }; // ============================================================================ // FUNCIÓN DE FETCH CON MANEJO DE ERRORES // ============================================================================ async function fetchOpenAlexData() { const url = new URL(CONFIG.apiBase); url.searchParams.append("filter", `primary_location.source.id:${CONFIG.journalId}`); url.searchParams.append("per_page", CONFIG.perPage); url.searchParams.append("mailto", "researcher@university.edu"); try { const response = await fetch(url); if (!response.ok) throw new Error(`HTTP ${response.status}`); const data = await response.json(); console.log(`OpenAlex API: ${data.meta?.count || 0} works found`); return processOpenAlexData(data.results || []); } catch (error) { console.warn("API Error:", error.message); return getValidatedBackupData(); } } // ============================================================================ // PROCESAMIENTO DE DATOS (igual que antes, optimizado) // ============================================================================ 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 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, searchText: (work.title || "").toLowerCase() }; nodes.push(node); nodeMap.set(workId, node); (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" }); }); (work.concepts || []) .filter(c => (c.score || 0) > 0.5 && (c.level || 0) <= 1) .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() }; nodes.push(conceptNode); nodeMap.set(conceptId, conceptNode); } else { nodeMap.get(conceptId).count++; } links.push({ source: workId, target: conceptId, type: "concept", score: concept.score }); }); }); 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() { 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"}, {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"} ]; 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: null, 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()); const concepts = [ {id: "c1", name: "Sustainability", level: 0, count: 3}, {id: "c2", name: "Consumer Behavior", level: 1, count: 4}, {id: "c3", name: "Organizational Behavior", level: 0, count: 3}, {id: "c4", name: "Mental Health", level: 1, count: 2}, {id: "c5", name: "Innovation Management", level: 1, count: 2}, {id: "c6", name: "Digital Marketing", level: 1, count: 2}, {id: "c7", name: "Corporate Social Responsibility", level: 1, count: 2}, {id: "c8", name: "Financial Analysis", level: 1, count: 1}, {id: "c9", name: "Transformational Leadership", level: 1, count: 1} ]; 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() }); }); const conceptLinks = [ ["w1", "c1"], ["w1", "c2"], ["w2", "c3"], ["w3", "c4"], ["w3", "c3"], ["w4", "c5"], ["w5", "c6"], ["w5", "c2"], ["w6", "c7"], ["w7", "c8"], ["w8", "c9"], ["w8", "c3"], ["w4", "c3"], ["w6", "c3"] ]; conceptLinks.forEach(([work, concept]) => { links.push({ source: work, target: concept, type: "concept", score: 0.75 }); }); const citations = [ ["w4", "w1"], ["w5", "w1"], ["w6", "w2"], ["w7", "w2"], ["w8", "w3"], ["w5", "w3"], ["w6", "w4"] ]; citations.forEach(([source, target]) => { links.push({ source, target, type: "citation" }); }); state.availableCountries = Array.from(countries).sort(); 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", CONFIG.width + "px") .style("font-family", CONFIG.fonts.ui) .style("position", "relative"); // 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"); // Fila 1: Barra de búsqueda y filtros principales const row1 = controlPanel.append("div") .style("display", "flex") .style("gap", "15px") .style("align-items", "center") .style("margin-bottom", "12px"); // Barra de búsqueda con icono 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", "10px 12px 10px 35px") .style("border", "1px solid #ccc") .style("border-radius", "4px") .style("font-size", "13px") .style("outline", "none") .style("transition", "border-color 0.2s") .on("input", function() { state.searchQuery = this.value.toLowerCase(); updateVisualization(); }) .on("focus", function() { d3.select(this).style("border-color", "#4472c4"); }) .on("blur", function() { d3.select(this).style("border-color", "#ccc"); }); // Autocompletado const autocomplete = searchContainer.append("div") .style("position", "absolute") .style("top", "100%") .style("left", "0") .style("right", "0") .style("background", "white") .style("border", "1px solid #ddd") .style("border-top", "none") .style("border-radius", "0 0 4px 4px") .style("max-height", "200px") .style("overflow-y", "auto") .style("z-index", "1000") .style("display", "none") .style("box-shadow", "0 4px 8px rgba(0,0,0,0.1)"); // 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("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") .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") .text("↺ Reset") .on("click", resetFilters); // 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", "11px") .style("color", "#666") .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", "8px"); citationFilter.append("span") .style("font-size", "11px") .style("color", "#666") .text("Citas mínimas:"); citationFilter.append("input") .attr("type", "number") .attr("min", "0") .attr("placeholder", "0") .style("width", "50px") .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 (se poblará después de cargar datos) 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", "11px") .style("color", "#666") .text("País:"); // Contador de resultados const resultsCounter = row2.append("div") .style("margin-left", "auto") .style("font-size", "11px") .style("color", "#666") .style("font-weight", "600") .text("Mostrando: 0 nodos"); // ============================================================================ // 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"); const svg = svgContainer.append("svg") .attr("width", CONFIG.width) .attr("height", CONFIG.height) .style("background", "#ffffff") .style("display", "block"); 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(); // 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", "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 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" }; countrySelect.append("option").attr("value", country).text(countryNames[country] || country); }); // Escalas const radiusScale = (d) => { if (d.type === "work") return 8 + Math.sqrt(d.cited_by_count || 0) * 3; if (d.type === "author") return 6 + Math.min((d.works_count || 0) * 1.5, 12); return 5 + Math.min((d.count || 0) * 2, 10); }; 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" ? 40 : d.type === "concept" ? 60 : 100) .strength(0.5)) .force("charge", d3.forceManyBody() .strength(d => d.type === "work" ? -400 : d.type === "author" ? -200 : -100)) .force("center", d3.forceCenter(CONFIG.width / 2, CONFIG.height / 2 + 40)) .force("collision", d3.forceCollide().radius(d => radiusScale(d) + 8).strength(0.7)) .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.12)); // Elementos visuales iniciales let link = g.append("g").attr("class", "links").selectAll("line"); let node = g.append("g").attr("class", "nodes").selectAll("g"); // Tooltip const tooltip = d3.select("body").append("div") .style("position", "absolute") .style("visibility", "hidden") .style("background", "#ffffff") .style("border", "1px solid #999") .style("padding", "12px") .style("border-radius", "3px") .style("font-size", "11px") .style("max-width", "320px") .style("box-shadow", "0 2px 8px 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 (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 resultsCounter.text(`Mostrando: ${visibleNodes.length} nodos | ${visibleLinks.length} conexiones`); // 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 : 1.5) .attr("stroke-opacity", 0.6) .attr("stroke-dasharray", d => d.type === "citation" ? "4,4" : 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") .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" ? 2.5 : 1.5) .style("cursor", "pointer") .transition() .duration(500) .attr("r", radiusScale); // Anillo destacado para búsqueda nodeEnter.append("circle") .attr("class", "highlight-ring") .attr("r", d => radiusScale(d) + 5) .attr("fill", "none") .attr("stroke", CONFIG.colors.highlight) .attr("stroke-width", 2) .attr("opacity", 0); // 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) + 6) .attr("y", 3) .attr("font-size", d => d.type === "work" ? "10px" : "9px") .attr("font-weight", d => d.type === "work" ? "600" : "400") .attr("fill", "#2c3e50") .style("pointer-events", "none") .attr("opacity", 0) .transition() .delay(300) .duration(300) .attr("opacity", 1); // Contadores 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.1; }); // Eventos de interacción node.on("mouseover", (e, d) => { // Highlight conexiones const connected = new Set([d.id]); link.style("stroke-opacity", l => { const sourceId = l.source.id || l.source; const targetId = l.target.id || l.target; if (sourceId === d.id || targetId === d.id) { connected.add(sourceId); connected.add(targetId); return 0.9; } return 0.1; }); node.style("opacity", n => connected.has(n.id) ? 1 : 0.2); // Tooltip showTooltip(e, d); }) .on("mousemove", (e) => { tooltip.style("left", (e.pageX + 12) + "px").style("top", (e.pageY - 12) + "px"); }) .on("mouseout", () => { link.style("stroke-opacity", 0.6); node.style("opacity", 1); tooltip.style("visibility", "hidden"); }); // Reiniciar simulación con nuevos datos simulation.nodes(visibleNodes); simulation.force("link").links(visibleLinks); simulation.alpha(1).restart(); } function showTooltip(event, 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 => state.data.nodes.find(n => n.id === (l.target.id || l.target))?.name) .filter(Boolean) .slice(0, 4) .join(", "); content = `

Artículo ${d.open_access ? 'Open Access' : ''}

${d.fullTitle}

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

${concepts ? `

Temas: ${concepts}

` : ''}

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

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

Autor

${d.name}

Institución: ${d.institutions}

País: ${d.country}

Artículos en esta revista: ${workCount}

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

Concepto

${d.name}

Frecuencia: ${workCount} artículos ${d.score ? `
Relevancia: ${(d.score * 100).toFixed(0)}%` : ''}

`; } tooltip.html(content) .style("visibility", "visible") .style("left", (event.pageX + 12) + "px") .style("top", (event.pageY - 12) + "px"); } 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(); // 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 CONFIG.colors[type]; }) .style("color", "white"); updateVisualization(); } // ============================================================================ // TÍTULO Y LEYENDA ESTÁTICA // ============================================================================ const titleGroup = svg.append("g").attr("transform", `translate(${CONFIG.width/2}, 30)`); titleGroup.append("text") .attr("text-anchor", "middle") .attr("font-family", CONFIG.fonts.title) .attr("font-size", "16px") .attr("font-weight", "bold") .attr("fill", "#1a1a1a") .text("Red de Conocimiento: Realidad Empresarial"); // Leyenda flotante const legend = svg.append("g").attr("transform", "translate(20, 60)"); const legendData = [ {type: "work", label: "Artículos", color: CONFIG.colors.work}, {type: "author", label: "Autores", color: CONFIG.colors.author}, {type: "concept", label: "Conceptos", color: CONFIG.colors.concept} ]; legend.append("rect") .attr("width", 140) .attr("height", 85) .attr("fill", "rgba(255,255,255,0.9)") .attr("stroke", "#ddd") .attr("rx", 3); legend.append("text") .attr("x", 10) .attr("y", 18) .attr("font-size", "10px") .attr("font-weight", "bold") .attr("fill", "#333") .text("Tipología"); legendData.forEach((d, i) => { const g = legend.append("g").attr("transform", `translate(10, ${32 + i * 18})`); g.append("circle") .attr("r", d.type === "work" ? 6 : d.type === "author" ? 5 : 4) .attr("fill", d.color) .attr("stroke", "#fff") .attr("stroke-width", 1.5); g.append("text") .attr("x", 16) .attr("y", 4) .text(d.label) .attr("font-size", "10px") .attr("fill", "#333"); }); // Controles de zoom const zoomControls = svg.append("g").attr("transform", `translate(${CONFIG.width - 45}, ${CONFIG.height - 100})`); [{y: 0, icon: "+", scale: 1.3}, {y: 32, icon: "−", scale: 0.7}, {y: 64, icon: "⟲", scale: null}].forEach(btn => { const g = zoomControls.append("g") .attr("transform", `translate(0, ${btn.y})`) .style("cursor", "pointer"); g.append("rect") .attr("width", 28) .attr("height", 26) .attr("fill", "#f8f8f8") .attr("stroke", "#ccc") .attr("rx", 3); g.append("text") .attr("x", 14) .attr("y", 17) .attr("text-anchor", "middle") .text(btn.icon) .attr("font-size", "14px") .attr("fill", "#333"); g.on("click", () => { if (btn.scale) svg.transition().duration(300).call(zoom.scaleBy, btn.scale); else svg.transition().duration(500).call(zoom.transform, d3.zoomIdentity); }); }); // Nota al pie svg.append("text") .attr("x", 20) .attr("y", CONFIG.height - 15) .attr("font-size", "8px") .attr("fill", "#666") .text("Fuente: OpenAlex API. Los nodos se dimensionan proporcionalmente a su métrica de impacto."); // 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})`); }); updateVisualization(); return container.node(); }31:[] 2d:{"title":"Red de conocimiento: Realidad Empresarial","cells":[{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}