{ const d3 = await import("https://cdn.jsdelivr.net/npm/d3@7/+esm"); // ============================================================ // PROFETAS DE LA HISTORIA BÍBLICA // // start/end = intervalo aproximado de actividad profética. // // certainty: // high -> intervalo muy aproximado o discutido // medium -> reconstrucción razonable por reinados/contexto // low -> datación relativamente bien anclada // ============================================================ const prophets = [ // ========================================================== // TRANSICIÓN A LA MONARQUÍA / REINO UNIDO // ========================================================== { name: "Samuel", type: "Profeta narrativo", start: 1070, end: 1015, stage: "Transición / Reino unido", certainty: "medium", reference: "1 Sam 3:19–20; 10:1; 16:13", note: "Juez y profeta. Vinculado a Saúl y David." }, { name: "Gad", type: "Profeta narrativo", start: 1015, end: 970, stage: "Reino unido", certainty: "high", reference: "1 Sam 22:5; 2 Sam 24:11", note: "Vidente asociado al reinado de David." }, { name: "Natán", type: "Profeta narrativo", start: 1000, end: 970, stage: "Reino unido", certainty: "medium", reference: "2 Sam 7; 12; 1 Re 1", note: "Profeta de la corte de David." }, // ========================================================== // DIVISIÓN DEL REINO // ========================================================== { name: "Ahías de Silo", type: "Profeta narrativo", start: 940, end: 910, stage: "División / Israel", certainty: "medium", reference: "1 Re 11:29–39; 14:1–18", note: "Anuncia a Jeroboam la división del reino." }, { name: "Semaías", type: "Profeta narrativo", start: 931, end: 910, stage: "Reino de Judá", certainty: "medium", reference: "1 Re 12:22–24; 2 Cr 12:5–8", note: "Profeta durante el reinado de Roboam." }, { name: "Azarías hijo de Oded", type: "Profeta narrativo", start: 900, end: 890, stage: "Reino de Judá", certainty: "high", reference: "2 Cr 15:1–8", note: "Profetiza durante el reinado de Asa." }, { name: "Hanani", type: "Profeta narrativo", start: 895, end: 875, stage: "Reino de Judá", certainty: "high", reference: "2 Cr 16:7–10", note: "Vidente durante el reinado de Asa." }, { name: "Jehú hijo de Hanani", type: "Profeta narrativo", start: 900, end: 870, stage: "Israel / Judá", certainty: "high", reference: "1 Re 16:1–7; 2 Cr 19:2", note: "Actúa tanto respecto de Israel como de Judá." }, // ========================================================== // ELÍAS Y ELISEO // ========================================================== { name: "Elías", type: "Profeta narrativo", start: 875, end: 850, stage: "Reino de Israel", certainty: "medium", reference: "1 Re 17–19; 21; 2 Re 1–2", note: "Ministerio asociado especialmente a Acab y Ocozías." }, { name: "Micaías hijo de Imla", type: "Profeta narrativo", start: 855, end: 850, stage: "Reino de Israel", certainty: "medium", reference: "1 Re 22:7–28", note: "Profetiza ante Acab y Josafat." }, { name: "Eliseo", type: "Profeta narrativo", start: 850, end: 800, stage: "Reino de Israel", certainty: "medium", reference: "2 Re 2–9; 13:14–20", note: "Su ministerio continúa durante varios reyes de Israel." }, // ========================================================== // PROFETAS ESCRITORES. PREEXILIO // ========================================================== { name: "Jonás", type: "Profeta menor", start: 800, end: 780, stage: "Reino de Israel", certainty: "medium", reference: "2 Re 14:25; Jon 1:1", note: "Asociado al período de Jeroboam II." }, { name: "Amós", type: "Profeta menor", start: 765, end: 755, stage: "Reino de Israel", certainty: "medium", reference: "Am 1:1; 7:10–17", note: "Profetiza principalmente al Reino del Norte." }, { name: "Oseas", type: "Profeta menor", start: 750, end: 715, stage: "Reino de Israel", certainty: "medium", reference: "Os 1:1", note: "Atraviesa los últimos decenios del Reino del Norte." }, { name: "Isaías", type: "Profeta mayor", start: 740, end: 700, stage: "Reino de Judá", certainty: "medium", reference: "Is 1:1; 6:1", note: "Profetiza durante varios reyes de Judá." }, { name: "Miqueas", type: "Profeta menor", start: 735, end: 700, stage: "Reino de Judá", certainty: "medium", reference: "Mi 1:1", note: "Contemporáneo de Isaías." }, { name: "Nahúm", type: "Profeta menor", start: 660, end: 612, stage: "Reino de Judá", certainty: "high", reference: "Nah 1:1; 3:8", note: "Su mensaje anticipa la caída de Nínive." }, { name: "Sofonías", type: "Profeta menor", start: 640, end: 609, stage: "Reino de Judá", certainty: "medium", reference: "Sof 1:1", note: "Situado durante el reinado de Josías." }, { name: "Habacuc", type: "Profeta menor", start: 615, end: 600, stage: "Últimos años de Judá", certainty: "high", reference: "Hab 1:1–6", note: "Relacionado con el ascenso de Babilonia." }, { name: "Jeremías", type: "Profeta mayor", start: 627, end: 580, stage: "Judá → Exilio", certainty: "medium", reference: "Jer 1:2–3; 40–44", note: "Atraviesa la caída de Jerusalén." }, { name: "Abdías", type: "Profeta menor", start: 586, end: 550, stage: "Caída / Exilio", certainty: "high", reference: "Abd 10–14", note: "Datación discutida." }, // ========================================================== // EXILIO // ========================================================== { name: "Daniel", type: "Profeta mayor", start: 605, end: 536, stage: "Exilio babilónico", certainty: "medium", reference: "Dn 1:1–6; 10:1", note: "Su relato atraviesa Babilonia y el comienzo persa." }, { name: "Ezequiel", type: "Profeta mayor", start: 593, end: 571, stage: "Exilio babilónico", certainty: "low", reference: "Ez 1:1–3; 29:17", note: "Profetiza entre los deportados en Babilonia." }, // ========================================================== // RETORNO // ========================================================== { name: "Hageo", type: "Profeta menor", start: 520, end: 519, stage: "Retorno / Persia", certainty: "low", reference: "Hag 1:1; 2:10", note: "Ministerio fechado con gran precisión en el texto." }, { name: "Zacarías", type: "Profeta menor", start: 520, end: 518, stage: "Retorno / Persia", certainty: "low", reference: "Zac 1:1; 7:1", note: "Contemporáneo de Hageo." }, { name: "Malaquías", type: "Profeta menor", start: 450, end: 430, stage: "Retorno / Persia", certainty: "high", reference: "Mal 1:1", note: "Período postexílico." }, { name: "Joel", type: "Profeta menor", start: 450, end: 400, stage: "Retorno / Persia", certainty: "high", reference: "Jl 1:1", note: "Datación especialmente discutida." } ]; // ============================================================ // ETAPAS HISTÓRICAS // ============================================================ const stages = [ { name: "Transición / Reino unido", title: "TRANSICIÓN", subtitle: "Samuel · comienzo de la monarquía", color: "#86775f", y: 185 }, { name: "Reino unido", title: "REINO UNIDO", subtitle: "Saúl · David · Salomón", color: "#b8995b", y: 305 }, { name: "División / Israel", title: "DIVISIÓN DEL REINO", subtitle: "Jeroboam I · Reino del Norte", color: "#65a9c9", y: 445 }, { name: "Reino de Israel", title: "ISRAEL", subtitle: "Reino del Norte", color: "#4e9fc5", y: 620 }, { name: "Israel / Judá", title: "ISRAEL Y JUDÁ", subtitle: "Ministerio relacionado con ambos", color: "#8aa293", y: 760 }, { name: "Reino de Judá", title: "JUDÁ", subtitle: "Reino del Sur", color: "#df9858", y: 925 }, { name: "Últimos años de Judá", title: "CRISIS DE JUDÁ", subtitle: "Ascenso de Babilonia", color: "#d27662", y: 1070 }, { name: "Judá → Exilio", title: "CAÍDA DE JERUSALÉN", subtitle: "Judá → Exilio", color: "#bf6268", y: 1190 }, { name: "Caída / Exilio", title: "EXILIO", subtitle: "Destrucción y deportación", color: "#9c718f", y: 1305 }, { name: "Exilio babilónico", title: "BABILONIA", subtitle: "Cautiverio babilónico", color: "#7774ad", y: 1420 }, { name: "Retorno / Persia", title: "RETORNO", subtitle: "Dominio persa · período postexílico", color: "#d5ac4e", y: 1610 } ]; const stageMap = new Map(stages.map(d => [d.name, d])); // ============================================================ // ACONTECIMIENTOS PRINCIPALES // ============================================================ const events = [ {year: 1050, label: "Comienzo de la monarquía"}, {year: 1010, label: "David"}, {year: 970, label: "Salomón"}, {year: 931, label: "División del reino"}, {year: 853, label: "Últimos años de Acab"}, {year: 841, label: "Comienzo de Jehú"}, {year: 722, label: "Caída de Samaria"}, {year: 612, label: "Caída de Nínive"}, {year: 605, label: "Ascenso de Babilonia"}, {year: 597, label: "Deportación de Joaquín"}, {year: 586, label: "Caída de Jerusalén"}, {year: 539, label: "Caída de Babilonia"}, {year: 538, label: "Retorno"}, {year: 516, label: "Segundo Templo"} ]; // ============================================================ // DIMENSIONES // ============================================================ const width = 1400; const height = 1800; const leftX = 255; const timelineX = 720; const rightX = 1110; const top = 145; const bottom = 1700; const y = d3.scaleLinear() .domain([1100, 390]) .range([top, bottom]); // ============================================================ // SVG // ============================================================ const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .style("max-width", "100%") .style("height", "auto") .style( "font-family", "Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif" ) .style("background", "#fbfaf7"); // ============================================================ // TÍTULO // ============================================================ svg.append("text") .attr("x", width / 2) .attr("y", 42) .attr("text-anchor", "middle") .attr("font-size", 28) .attr("font-weight", 700) .text("Los profetas en la historia bíblica"); svg.append("text") .attr("x", width / 2) .attr("y", 70) .attr("text-anchor", "middle") .attr("font-size", 13) .attr("fill", "#666") .text( "De Samuel al período postexílico · cronología aproximada" ); // ============================================================ // ENCABEZADOS // ============================================================ [ [leftX, "PROFETAS"], [timelineX, "LÍNEA DE TIEMPO"], [rightX, "CONTEXTO HISTÓRICO"] ].forEach(([x, text]) => { svg.append("text") .attr("x", x) .attr("y", 112) .attr("text-anchor", "middle") .attr("font-size", 14) .attr("font-weight", 800) .attr("letter-spacing", 1) .text(text); }); // ============================================================ // LÍNEA TEMPORAL // ============================================================ svg.append("line") .attr("x1", timelineX) .attr("x2", timelineX) .attr("y1", top) .attr("y2", bottom) .attr("stroke", "#222") .attr("stroke-width", 2); // Segmentos cada 5 años svg.append("g") .selectAll("rect") .data(d3.range(1100, 389, -5)) .join("rect") .attr("x", timelineX - 7) .attr("y", d => y(d) - 1.5) .attr("width", 14) .attr("height", 3) .attr("fill", "#222"); // Fechas cada 50 años svg.append("g") .selectAll("text") .data(d3.range(1100, 399, -50)) .join("text") .attr("x", timelineX + 18) .attr("y", d => y(d) + 4) .attr("font-size", 10) .attr("fill", "#777") .text(d => `${d} a.C.`); // ============================================================ // EVENTOS HISTÓRICOS // ============================================================ const eventG = svg.append("g"); eventG.selectAll("line") .data(events) .join("line") .attr("x1", timelineX - 17) .attr("x2", timelineX + 17) .attr("y1", d => y(d.year)) .attr("y2", d => y(d.year)) .attr("stroke", "#923b3b") .attr("stroke-width", 2.3); eventG.selectAll("text") .data(events) .join("text") .attr("x", timelineX + 32) .attr("y", d => y(d.year) - 5) .attr("font-size", 9.5) .attr("font-weight", 600) .attr("fill", "#923b3b") .text(d => `${d.year} · ${d.label}`); // ============================================================ // POSICIÓN DE LOS NOMBRES // ============================================================ const sorted = [...prophets] .sort((a, b) => b.start - a.start); let previousY = top - 20; sorted.forEach(d => { const ideal = y((d.start + d.end) / 2); d.labelY = Math.max( ideal, previousY + 50 ); previousY = d.labelY; }); // Comprimir para que todos entren const maxLabelY = d3.max(sorted, d => d.labelY); if (maxLabelY > bottom) { const factor = (bottom - top) / (maxLabelY - top); sorted.forEach(d => { d.labelY = top + (d.labelY - top) * factor; }); } // ============================================================ // PATH DE LAS BANDAS // // Nombre -> línea fina // Línea temporal -> intervalo vertical // Intervalo -> línea fina hacia etapa histórica // ============================================================ function ribbonPath(d) { const stage = stageMap.get(d.stage); const y1 = y(d.start); const y2 = y(d.end); const sourceX = leftX + 95; const bandLeft = timelineX - 12; const bandRight = timelineX + 12; const targetX = rightX - 125; const thin = 5; const p = d3.path(); // borde superior izquierdo p.moveTo( sourceX, d.labelY - thin / 2 ); p.bezierCurveTo( sourceX + 150, d.labelY - thin / 2, timelineX - 150, y1, bandLeft, y1 ); // intervalo completo en cronología p.lineTo(bandRight, y1); // hacia contexto p.bezierCurveTo( timelineX + 135, y1, targetX - 125, stage.y - thin / 2, targetX, stage.y - thin / 2 ); p.lineTo( targetX, stage.y + thin / 2 ); // regreso p.bezierCurveTo( targetX - 125, stage.y + thin / 2, timelineX + 135, y2, bandRight, y2 ); p.lineTo(bandLeft, y2); p.bezierCurveTo( timelineX - 150, y2, sourceX + 150, d.labelY + thin / 2, sourceX, d.labelY + thin / 2 ); p.closePath(); return p.toString(); } // ============================================================ // BANDAS // ============================================================ function baseOpacity(d) { if (d.certainty === "low") return 0.78; if (d.certainty === "medium") return 0.58; return 0.35; } const ribbons = svg.append("g") .attr("class", "ribbons") .selectAll("path") .data(sorted) .join("path") .attr("d", ribbonPath) .attr("fill", d => stageMap.get(d.stage).color) .attr("fill-opacity", baseOpacity) .attr("stroke", d => stageMap.get(d.stage).color) .attr("stroke-width", 0.8) .attr( "stroke-dasharray", d => d.certainty === "high" ? "5,4" : null ) .style("cursor", "pointer"); // ============================================================ // PROFETAS // ============================================================ const prophetG = svg.append("g") .selectAll("g") .data(sorted) .join("g") .attr( "transform", d => `translate(${leftX},${d.labelY})` ) .style("cursor", "pointer"); // Indicador de categoría prophetG.append("rect") .attr("x", 75) .attr("y", -12) .attr("width", 8) .attr("height", 24) .attr("rx", 2) .attr("fill", d => { if (d.type === "Profeta mayor") return "#292929"; if (d.type === "Profeta menor") return "#777"; return "#b18b49"; }); prophetG.append("text") .attr("x", 64) .attr("y", -2) .attr("text-anchor", "end") .attr("font-size", 14) .attr("font-weight", 700) .text(d => d.name); prophetG.append("text") .attr("x", 64) .attr("y", 14) .attr("text-anchor", "end") .attr("font-size", 9.5) .attr("fill", "#777") .text(d => `${d.start}–${d.end} a.C.` ); // ============================================================ // ETAPAS HISTÓRICAS // ============================================================ const stageG = svg.append("g") .selectAll("g") .data(stages) .join("g") .attr( "transform", d => `translate(${rightX},${d.y})` ); stageG.append("rect") .attr("x", -125) .attr("y", -23) .attr("width", 10) .attr("height", 46) .attr("rx", 2) .attr("fill", d => d.color); stageG.append("text") .attr("x", -102) .attr("y", -4) .attr("font-size", 14) .attr("font-weight", 800) .text(d => d.title); stageG.append("text") .attr("x", -102) .attr("y", 14) .attr("font-size", 10.5) .attr("fill", "#666") .text(d => d.subtitle); // ============================================================ // TOOLTIP // ============================================================ const tooltip = document.createElement("div"); Object.assign(tooltip.style, { position: "fixed", pointerEvents: "none", opacity: 0, background: "rgba(255,255,255,.98)", border: "1px solid #aaa", borderRadius: "8px", padding: "12px 14px", font: "12px Inter, sans-serif", lineHeight: "1.5", boxShadow: "0 5px 20px rgba(0,0,0,.16)", zIndex: 9999, maxWidth: "290px" }); document.body.appendChild(tooltip); function moveTooltip(event) { tooltip.style.left = `${event.clientX + 15}px`; tooltip.style.top = `${event.clientY + 15}px`; } function highlight(event, d) { ribbons .transition() .duration(130) .attr( "fill-opacity", x => x.name === d.name ? 0.95 : 0.045 ); prophetG .transition() .duration(130) .attr( "opacity", x => x.name === d.name ? 1 : 0.17 ); stageG .transition() .duration(130) .attr( "opacity", x => x.name === d.stage ? 1 : 0.20 ); const certaintyText = d.certainty === "low" ? "Cronología relativamente bien anclada" : d.certainty === "medium" ? "Cronología aproximada" : "Cronología discutida / reconstruida"; tooltip.innerHTML = `

${d.name}

${d.type}

Ministerio estimado:
${d.start}–${d.end} a.C.

Contexto:
${stageMap.get(d.stage).title}

${d.note}

${certaintyText}

${d.reference}

`; tooltip.style.opacity = 1; moveTooltip(event); } function reset() { ribbons .transition() .duration(180) .attr("fill-opacity", baseOpacity); prophetG .transition() .duration(180) .attr("opacity", 1); stageG .transition() .duration(180) .attr("opacity", 1); tooltip.style.opacity = 0; } ribbons .on("mouseenter", highlight) .on("mousemove", moveTooltip) .on("mouseleave", reset); prophetG .on("mouseenter", highlight) .on("mousemove", moveTooltip) .on("mouseleave", reset); // ============================================================ // LEYENDA DE TIPOS // ============================================================ const legend = svg.append("g") .attr( "transform", "translate(1040,125)" ); legend.append("rect") .attr("width", 315) .attr("height", 145) .attr("rx", 5) .attr("fill", "#fff") .attr("stroke", "#bbb"); legend.append("text") .attr("x", 16) .attr("y", 24) .attr("font-size", 12) .attr("font-weight", 800) .text("TIPOS DE PROFETAS"); const legendTypes = [ ["#292929", "Profeta mayor"], ["#777", "Profeta menor"], ["#b18b49", "Profeta narrativo"] ]; legendTypes.forEach((d, i) => { legend.append("rect") .attr("x", 17) .attr("y", 39 + i * 23) .attr("width", 8) .attr("height", 15) .attr("fill", d[0]); legend.append("text") .attr("x", 35) .attr("y", 51 + i * 23) .attr("font-size", 10.5) .text(d[1]); }); legend.append("line") .attr("x1", 17) .attr("x2", 48) .attr("y1", 120) .attr("y2", 120) .attr("stroke", "#777") .attr("stroke-width", 5) .attr("stroke-dasharray", "5,4") .attr("opacity", .5); legend.append("text") .attr("x", 58) .attr("y", 124) .attr("font-size", 10.5) .text("Cronología especialmente incierta"); return svg.node(); }