27:null 28:["$","title",null,{"children":"Índice de Citas por Año - Comparación de Revistas (2016-2025) | Kevin Gutierrez | Observable"}] 2d:T2e8b,chart = { // ===== URLs DE OPENALEX ===== const API_URLS = [ "https://api.openalex.org/sources/S4210199283", "https://api.openalex.org/sources/S4210170416", "https://api.openalex.org/sources/S4210185616", "https://api.openalex.org/sources/S4210171525", "https://api.openalex.org/sources/S4404676674", "https://api.openalex.org/sources/S4387287909", "https://api.openalex.org/sources/S4387287634" ]; const journalNames = { "S4210199283": { full: "ECA Estudios Centroamericanos", short: "ECA" }, "S4210170416": { full: "Realidad Empresarial", short: "RealidadEmpresarial" }, "S4210185616": { full: "Realidad (RRCSH)", short: "RRCSH" }, "S4210171525": { full: "Revista Latinoamericana de Teología", short: "RLT" }, "S4404676674": { full: "Investigaciones latinoamericanas en ingeniería y arquitectura", short: "ILIA" }, "S4387287909": { full: "Investigaciones UCA", short: "InvestigacionesUCA" }, "S4387287634": { full: "Proceso", short: "Proceso" } }; const colors = { ECA: "#FF6B35", RealidadEmpresarial: "red", RRCSH: "steelblue", RLT: "#333333", ILIA: "#911eb4", InvestigacionesUCA: "#46f0f0", Proceso: "#234a80" }; // ===== FETCH DATOS EN TIEMPO REAL ===== const fetchData = async () => { const results = await Promise.all( API_URLS.map(url => fetch(url).then(r => r.json()).catch(e => null)) ); return results; }; const sources = await fetchData(); // Procesar datos const processedData = sources.map((source, idx) => { if (!source) return null; const id = API_URLS[idx].split("/").pop(); const meta = journalNames[id]; const yearMap = {}; if (source.counts_by_year) { source.counts_by_year.forEach(d => { yearMap[d.year] = d.cited_by_count; }); } return { short: meta.short, full: meta.full, total: source.cited_by_count || 0, works_count: source.works_count || 0, yearMap: yearMap, first_year: source.first_publication_year, last_year: source.last_publication_year }; }).filter(d => d !== null); // Construir datos del gráfico (2016-2025) const years = Array.from({length: 10}, (_, i) => 2016 + i); const chartData = years.map(year => { const row = { Year: year }; processedData.forEach(journal => { row[journal.short] = journal.yearMap[year] || 0; }); return row; }); // Estado de visibilidad de revistas let visibleJournals = new Set(processedData.map(d => d.short)); // ===== CONFIGURACIÓN ===== const width = 1000; const height = 600; const margin = { top: 110, right: 40, bottom: 50, left: 70 }; const maxValue = d3.max(chartData, d => { let max = 0; processedData.forEach(j => { if (visibleJournals.has(j.short) && d[j.short] > max) max = d[j.short]; }); return max; }); const x = d3.scaleBand() .domain(chartData.map(d => d.Year)) .range([margin.left, width - margin.right]) .padding(0.2); const y = d3.scaleLinear() .domain([0, maxValue + 5]) .range([height - margin.bottom, margin.top]); // ===== CREAR CONTENEDOR ===== const container = d3.create("div") .style("font-family", "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif") .style("max-width", "1250px") .style("margin", "0 auto"); // ===== BOTÓN EXPORTAR CSV ===== const exportBtn = container.append("button") .text("Exportar datos a CSV") .style("position", "absolute") .style("top", "10px") .style("right", "20px") .style("padding", "8px 16px") .style("background", "#2196f3") .style("color", "white") .style("border", "none") .style("border-radius", "6px") .style("cursor", "pointer") .style("font-size", "12px") .style("z-index", "100") .on("mouseover", function() { d3.select(this).style("background", "#FF6B35"); }) .on("mouseout", function() { d3.select(this).style("background", "#234a80"); }) .on("click", function() { const headers = ["Year", ...processedData.map(j => j.short)]; const rows = chartData.map(row => [row.Year, ...processedData.map(j => row[j.short])]); const csv = [headers.join(","), ...rows.map(r => r.join(","))].join("\n"); const blob = new Blob([csv], { type: "text/csv" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "citas_revistas_uca_2016-2025.csv"; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }); // ===== CREAR SVG ===== const svg = container.append("svg") .attr("width", width) .attr("height", height) .style("display", "block"); // ===== EJE X (abajo) ===== const xAxisGroup = svg.append("g") .attr("class", "x-axis") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickFormat(d3.format("d"))); xAxisGroup.selectAll("text") .style("font-size", "12px") .style("fill", "#333"); xAxisGroup.selectAll("line, path") .style("stroke", "#333"); // Etiqueta eje X svg.append("text") .attr("x", (width + margin.left - margin.right) / 2) .attr("y", height - 20) .attr("text-anchor", "middle") .style("font-size", "13px") .style("font-weight", "bold") .style("fill", "#555") .text("Año"); // ===== EJE Y (izquierda) ===== const yAxisGroup = svg.append("g") .attr("class", "y-axis") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)); yAxisGroup.selectAll("text") .style("font-size", "12px") .style("fill", "#333"); yAxisGroup.selectAll("line, path") .style("stroke", "#333"); // Etiqueta eje Y svg.append("text") .attr("transform", "rotate(-90)") .attr("y", 20) .attr("x", -(height / 2)) .attr("text-anchor", "middle") .style("font-size", "13px") .style("font-weight", "bold") .style("fill", "#555") .text("Número de Citas"); // Tooltip const tooltip = svg.append("text") .style("opacity", 0) .style("font-size", "12px") .style("font-weight", "bold") .style("fill", "#333"); // Función para crear líneas const createLine = (field) => d3.line() .x(d => x(d.Year) + x.bandwidth() / 2) .y(d => y(d[field])); // Grupos para líneas y puntos const linesGroup = svg.append("g").attr("class", "lines-group"); const dotsGroup = svg.append("g").attr("class", "dots-group"); const labelsGroup = svg.append("g").attr("class", "labels-group"); // Función para renderizar el gráfico function renderChart() { // Recalcular maxValue solo con visibles const currentMax = d3.max(chartData, d => { let max = 0; processedData.forEach(j => { if (visibleJournals.has(j.short) && d[j.short] > max) max = d[j.short]; }); return max; }); y.domain([0, currentMax + 5]); yAxisGroup.call(d3.axisLeft(y)); // Reaplicar estilo después de redraw yAxisGroup.selectAll("text").style("font-size", "12px").style("fill", "#333"); yAxisGroup.selectAll("line, path").style("stroke", "#333"); // Limpiar grupos linesGroup.selectAll("*").remove(); dotsGroup.selectAll("*").remove(); labelsGroup.selectAll("*").remove(); // Dibujar solo las visibles processedData.forEach(journal => { if (!visibleJournals.has(journal.short)) return; const field = journal.short; linesGroup.append("path") .datum(chartData) .attr("fill", "none") .attr("stroke", colors[field]) .attr("stroke-width", "3") .attr("d", createLine(field)); dotsGroup.selectAll(`.${field}-dot`) .data(chartData) .enter().append("circle") .attr("class", `${field}-dot`) .attr("cx", d => x(d.Year) + x.bandwidth() / 2) .attr("cy", d => y(d[field])) .attr("r", "12") .attr("fill", colors[field]) .on("mouseover", function(event, d) { d3.select(this).transition().duration(200).attr("r", "16"); tooltip.style("opacity", "1") .text(`${journal.full}: ${d[field]} citas`) .attr("x", event.pageX - 50) .attr("y", event.pageY - 20); }) .on("mousemove", function(event) { tooltip.attr("x", event.pageX - 50).attr("y", event.pageY - 20); }) .on("mouseout", function() { d3.select(this).transition().duration(200).attr("r", "12"); tooltip.style("opacity", "0"); }); labelsGroup.selectAll(`.${field}-label`) .data(chartData) .enter().append("text") .attr("class", `${field}-label`) .attr("x", d => x(d.Year) + x.bandwidth() / 2) .attr("y", d => y(d[field]) + 4) .text(d => d[field] > 0 ? d[field] : "") .attr("text-anchor", "middle") .style("font-size", "9px") .style("fill", "white") .style("font-weight", "bold") .style("pointer-events", "none"); }); } // ===== LEYENDA INTERACTIVA ===== const legendGroup = svg.append("g") .attr("class", "legend-group"); function renderLegend() { legendGroup.selectAll("*").remove(); const legendItems = processedData.map((j, i) => ({ name: j.full, color: colors[j.short], short: j.short, isVisible: visibleJournals.has(j.short) })); const availableWidth = width - margin.left - margin.right; const itemWidth = Math.floor(availableWidth / legendItems.length); legendItems.forEach((item, i) => { const legendRow = legendGroup.append("g") .attr("transform", `translate(${margin.left + i * itemWidth}, 65)`) .style("cursor", "pointer") .on("click", function() { if (visibleJournals.has(item.short)) { visibleJournals.delete(item.short); } else { visibleJournals.add(item.short); } renderLegend(); renderChart(); }); legendRow.append("rect") .attr("width", itemWidth - 10) .attr("height", 18) .attr("rx", 3) .attr("fill", item.isVisible ? "rgba(255,255,255,0.8)" : "rgba(200,200,200,0.3)") .attr("stroke", item.isVisible ? item.color : "#ccc") .attr("stroke-width", item.isVisible ? 1.5 : 1); legendRow.append("rect") .attr("width", 14) .attr("height", 14) .attr("x", 4) .attr("y", 2) .attr("rx", 2) .style("fill", item.isVisible ? item.color : "#ccc"); legendRow.append("text") .attr("x", 22) .attr("y", 13) .text(item.name.length > 18 ? item.name.substring(0, 15) + "..." : item.name) .style("font-size", "10px") .style("fill", item.isVisible ? "#333" : "#999") .style("font-weight", item.isVisible ? "bold" : "normal"); }); const visibleCount = visibleJournals.size; legendGroup.append("text") .attr("x", margin.left) .attr("y", 55) .text(`Mostrando ${visibleCount} de ${processedData.length} revistas — Haz clic para mostrar/ocultar`) .style("font-size", "10px") .style("fill", "#888") .style("font-style", "italic"); } // ===== TÍTULO ===== svg.append("text") .attr("x", width / 2) .attr("y", 25) .attr("text-anchor", "middle") .style("font-size", "18px") .style("font-weight", "bold") .text("Citas por Año - Revistas UCA (OpenAlex en tiempo real)"); // Subtítulo con fecha const now = new Date().toLocaleString('es-ES'); svg.append("text") .attr("x", width / 2) .attr("y", 45) .attr("text-anchor", "middle") .style("font-size", "11px") .style("fill", "#666") .text(`Datos actualizados: ${now}`); // ===== INICIALIZAR ===== renderLegend(); renderChart(); return container.node(); }2e:[] 2b:{"id":"ff6c6be34cbf903f","slug":null,"title":"Índice de Citas por Año - Comparación de Revistas (2016-2025)","thumbnail":"59b56b0bfe49d8f823d1aae06946254c7ed509b74df1acc5afef2ac5e8610e4c","access_level":"public","create_time":"$D2026-06-15T16:41:49.220Z","update_time":"$D2026-08-12T02:58:06.019Z","view_time":null,"first_public_time":"$D2026-06-15T17:41:48.072Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"51fe6e2ec1bb1cf6","login":"kahernandezg","name":"Kevin Gutierrez","avatar_url":"https://avatars-next.observableusercontent.com/2565601e8fd1d0ae6653db3f9322b46e911143f9b192883ac7484f5393c17bde","tier":"starter_2024"},"version":97,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"10fe80357ee10d94","login":"kevin-amilcar-hernandez-gutierrez","name":"Kevin Amilcar Hernández Gutierrez","avatar_url":"https://avatars-next.observableusercontent.com/5e7bab77859fa97769d110935c464ca14bf058cee0bf8ec50ef736a6e77653f3","tier":null}],"members":[{"type":"team","id":"51fe6e2ec1bb1cf6","login":"kahernandezg","name":"Kevin Gutierrez","avatar_url":"https://avatars-next.observableusercontent.com/2565601e8fd1d0ae6653db3f9322b46e911143f9b192883ac7484f5393c17bde","tier":"starter_2024","role":"editor"},{"type":"individual","id":"10fe80357ee10d94","login":"kevin-amilcar-hernandez-gutierrez","name":"Kevin Amilcar Hernández Gutierrez","avatar_url":"https://avatars-next.observableusercontent.com/5e7bab77859fa97769d110935c464ca14bf058cee0bf8ec50ef736a6e77653f3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Índice de Citas por Año - Comparación de Revistas (2016-2025)","cells":[{"id":0,"value":"# Índice de Citas por Año - Comparación de Revistas (2016-2025)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"

\n\n

Fuente de datos: OpenAlex

Software: ObservableHQ con D3.js

Análisis: K. Gutiérrez

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"