2c:null 2d:["$","title",null,{"children":"Profetas en el tiempo | Allen Q | Observable"}] 32:T4793,{ const d3 = await import("https://cdn.jsdelivr.net/npm/d3@7/+esm"); // ============================================================ // DATOS // start = comienzo aproximado del ministerio, a.C. // end = final aproximado del ministerio, a.C. // // uncertainty: // low = cronología relativamente bien establecida // medium = aproximada // high = cronología discutida // ============================================================ const prophets = [ // PROFETAS MAYORES { name: "Isaías", group: "Profetas mayores", start: 740, end: 700, stage: "Reino de Judá", certainty: "medium", reference: "Is 1:1; 6:1" }, { name: "Jeremías", group: "Profetas mayores", start: 627, end: 586, stage: "Judá → caída de Jerusalén", certainty: "low", reference: "Jer 1:2–3" }, { name: "Ezequiel", group: "Profetas mayores", start: 593, end: 571, stage: "Exilio babilónico", certainty: "low", reference: "Ez 1:1–3; 29:17" }, { name: "Daniel", group: "Profetas mayores", start: 605, end: 536, stage: "Exilio babilónico", certainty: "medium", reference: "Dn 1:1–6; 10:1" }, // PROFETAS MENORES { name: "Jonás", group: "Profetas menores", start: 800, end: 780, stage: "Reino de Israel", certainty: "medium", reference: "2 Re 14:25" }, { name: "Amós", group: "Profetas menores", start: 765, end: 755, stage: "Reino de Israel", certainty: "medium", reference: "Am 1:1; 7:10–17" }, { name: "Oseas", group: "Profetas menores", start: 750, end: 715, stage: "Reino de Israel", certainty: "medium", reference: "Os 1:1" }, { name: "Miqueas", group: "Profetas menores", start: 735, end: 700, stage: "Reino de Judá", certainty: "medium", reference: "Mi 1:1" }, { name: "Nahúm", group: "Profetas menores", start: 663, end: 612, stage: "Reino de Judá", certainty: "high", reference: "Nah 1:1; 3:8" }, { name: "Sofonías", group: "Profetas menores", start: 640, end: 609, stage: "Reino de Judá", certainty: "medium", reference: "Sof 1:1" }, { name: "Habacuc", group: "Profetas menores", start: 609, end: 605, stage: "Reino de Judá", certainty: "high", reference: "Hab 1:1–6" }, { name: "Abdías", group: "Profetas menores", start: 586, end: 550, stage: "Caída / Exilio", certainty: "high", reference: "Abd 10–14" }, { name: "Hageo", group: "Profetas menores", start: 520, end: 519, stage: "Retorno / Persia", certainty: "low", reference: "Hag 1:1; 2:10" }, { name: "Zacarías", group: "Profetas menores", start: 520, end: 518, stage: "Retorno / Persia", certainty: "low", reference: "Zac 1:1; 7:1" }, { name: "Malaquías", group: "Profetas menores", start: 450, end: 430, stage: "Retorno / Persia", certainty: "high", reference: "Mal 1:1" }, { name: "Joel", group: "Profetas menores", start: 450, end: 400, stage: "Retorno / Persia", certainty: "high", reference: "Jl 1:1" } ]; // ============================================================ // CONTEXTOS HISTÓRICOS // ============================================================ const stages = [ { name: "Reino de Israel", subtitle: "Reino del Norte", color: "#65a9c9" }, { name: "Reino de Judá", subtitle: "Reino del Sur", color: "#e59a5b" }, { name: "Judá → caída de Jerusalén", subtitle: "Últimos años de Judá", color: "#c96d6d" }, { name: "Caída / Exilio", subtitle: "Destrucción y deportación", color: "#9a718e" }, { name: "Exilio babilónico", subtitle: "Babilonia", color: "#8076ad" }, { name: "Retorno / Persia", subtitle: "Período postexílico", color: "#d8ae52" } ]; const stageMap = new Map(stages.map(d => [d.name, d])); // ============================================================ // ACONTECIMIENTOS HISTÓRICOS // ============================================================ const events = [ {year: 722, label: "Caída de Samaria"}, {year: 612, label: "Caída de Nínive"}, {year: 605, label: "Babilonia domina Judá"}, {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: "Inicio del retorno"}, {year: 516, label: "Segundo Templo"} ]; // ============================================================ // DIMENSIONES // ============================================================ const width = 1200; const height = 1500; const leftX = 225; const timelineX = 610; const rightX = 980; const top = 115; const bottom = 1410; // Los años a.C. disminuyen al avanzar hacia abajo. const y = d3.scaleLinear() .domain([820, 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", 25) .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("Ministerios aproximados, contexto histórico y cronología"); // ============================================================ // ENCABEZADOS // ============================================================ svg.append("text") .attr("x", leftX) .attr("y", 105) .attr("text-anchor", "middle") .attr("font-size", 14) .attr("font-weight", 700) .text("PROFETAS"); svg.append("text") .attr("x", timelineX) .attr("y", 105) .attr("text-anchor", "middle") .attr("font-size", 14) .attr("font-weight", 700) .text("LÍNEA DE TIEMPO"); svg.append("text") .attr("x", rightX) .attr("y", 105) .attr("text-anchor", "middle") .attr("font-size", 14) .attr("font-weight", 700) .text("CONTEXTO HISTÓRICO"); // ============================================================ // LÍNEA CENTRAL // ============================================================ svg.append("line") .attr("x1", timelineX) .attr("x2", timelineX) .attr("y1", top) .attr("y2", bottom) .attr("stroke", "#222") .attr("stroke-width", 2); // pequeños bloques, como en la referencia const years = d3.range(820, 389, -5); svg.append("g") .selectAll("rect") .data(years) .join("rect") .attr("x", timelineX - 7) .attr("y", d => y(d) - 2) .attr("width", 14) .attr("height", 4) .attr("fill", "#171717"); // Etiquetas cada 50 años svg.append("g") .selectAll("text") .data(d3.range(800, 399, -50)) .join("text") .attr("x", timelineX + 18) .attr("y", d => y(d) + 4) .attr("font-size", 11) .attr("fill", "#555") .text(d => `${d} a.C.`); // ============================================================ // ACONTECIMIENTOS // ============================================================ const eventG = svg.append("g"); eventG.selectAll("line") .data(events) .join("line") .attr("x1", timelineX - 16) .attr("x2", timelineX + 16) .attr("y1", d => y(d.year)) .attr("y2", d => y(d.year)) .attr("stroke", "#9b2f2f") .attr("stroke-width", 2); eventG.selectAll("text") .data(events) .join("text") .attr("x", timelineX + 36) .attr("y", d => y(d.year) - 6) .attr("font-size", 10) .attr("fill", "#8c3434") .text(d => `${d.year} · ${d.label}`); // ============================================================ // POSICIONES DE PROFETAS // ============================================================ // Mantiene aproximadamente su cronología, // pero evita que nombres contemporáneos se superpongan. const sorted = [...prophets] .sort((a,b) => b.start - a.start); let previousY = 125; sorted.forEach(d => { const ideal = y((d.start + d.end) / 2); d.labelY = Math.max(ideal, previousY + 42); previousY = d.labelY; }); // Si la lista se extiende demasiado, comprimimos. const maxLabelY = d3.max(sorted, d => d.labelY); if (maxLabelY > bottom - 10) { const compression = (bottom - 135) / (maxLabelY - 125); sorted.forEach(d => { d.labelY = 125 + (d.labelY - 125) * compression; }); } // ============================================================ // POSICIONES DE LOS CONTEXTOS // ============================================================ const stagePositions = new Map([ ["Reino de Israel", 360], ["Reino de Judá", 610], ["Judá → caída de Jerusalén", 800], ["Caída / Exilio", 930], ["Exilio babilónico", 1080], ["Retorno / Persia", 1300] ]); // ============================================================ // TOOLTIP // ============================================================ const tooltip = document.createElement("div"); Object.assign(tooltip.style, { position: "fixed", pointerEvents: "none", opacity: 0, background: "rgba(255,255,255,.97)", border: "1px solid #bbb", borderRadius: "8px", padding: "11px 13px", font: "12px Inter, sans-serif", lineHeight: "1.45", boxShadow: "0 4px 18px rgba(0,0,0,.15)", zIndex: 9999, maxWidth: "260px" }); document.body.appendChild(tooltip); // ============================================================ // FUNCIÓN PARA CONSTRUIR LA BANDA // // La línea llega fina desde el profeta. // Al alcanzar la cronología se abre verticalmente, // abarcando TODO el intervalo de ministerio. // Después vuelve a cerrarse hacia el contexto. // ============================================================ function ribbonPath(d) { const stageY = stagePositions.get(d.stage); const yStart = y(d.start); const yEnd = y(d.end); const yMid = (yStart + yEnd) / 2; const leftStartX = leftX + 72; const rightEndX = rightX - 105; const xBandLeft = timelineX - 11; const xBandRight = timelineX + 11; const thickness = 5; const p = d3.path(); // parte superior desde profeta p.moveTo(leftStartX, d.labelY - thickness / 2); p.bezierCurveTo( 390, d.labelY - thickness / 2, 505, yStart, xBandLeft, yStart ); // borde superior del intervalo p.lineTo(xBandRight, yStart); // salida hacia contexto p.bezierCurveTo( 720, yStart, 820, stageY - thickness / 2, rightEndX, stageY - thickness / 2 ); p.lineTo(rightEndX, stageY + thickness / 2); // regreso hacia final del intervalo p.bezierCurveTo( 820, stageY + thickness / 2, 720, yEnd, xBandRight, yEnd ); // borde inferior del intervalo p.lineTo(xBandLeft, yEnd); // regreso al profeta p.bezierCurveTo( 505, yEnd, 390, d.labelY + thickness / 2, leftStartX, d.labelY + thickness / 2 ); p.closePath(); return p.toString(); } // ============================================================ // BANDAS // ============================================================ 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", d => d.certainty === "high" ? 0.40 : d.certainty === "medium" ? 0.57 : 0.72 ) .attr("stroke", d => stageMap.get(d.stage).color) .attr("stroke-width", d => d.certainty === "high" ? 1.2 : 0.6 ) .attr("stroke-dasharray", d => d.certainty === "high" ? "5,4" : null ) .style("cursor", "pointer"); // ============================================================ // NOMBRES DE PROFETAS // ============================================================ const prophetG = svg.append("g") .selectAll("g") .data(sorted) .join("g") .attr("transform", d => `translate(${leftX},${d.labelY})` ) .style("cursor", "pointer"); prophetG.append("rect") .attr("x", 58) .attr("y", -11) .attr("width", 7) .attr("height", 22) .attr("fill", d => d.group === "Profetas mayores" ? "#292929" : "#777" ); prophetG.append("text") .attr("x", 48) .attr("y", -1) .attr("text-anchor", "end") .attr("font-size", 14) .attr("font-weight", 700) .text(d => d.name); prophetG.append("text") .attr("x", 48) .attr("y", 15) .attr("text-anchor", "end") .attr("font-size", 10) .attr("fill", "#777") .text(d => `${d.start}–${d.end} a.C.` ); // ============================================================ // CONTEXTOS A LA DERECHA // ============================================================ const stageG = svg.append("g") .selectAll("g") .data(stages) .join("g") .attr("transform", d => `translate(${rightX},${stagePositions.get(d.name)})` ); stageG.append("rect") .attr("x", -104) .attr("y", -20) .attr("width", 9) .attr("height", 40) .attr("fill", d => d.color); stageG.append("text") .attr("x", -82) .attr("y", -3) .attr("font-size", 14) .attr("font-weight", 700) .text(d => d.name); stageG.append("text") .attr("x", -82) .attr("y", 14) .attr("font-size", 11) .attr("fill", "#666") .text(d => d.subtitle); // ============================================================ // INTERACTIVIDAD // ============================================================ function highlight(event, d) { ribbons .transition() .duration(150) .attr("fill-opacity", x => x.name === d.name ? 0.92 : 0.07 ); prophetG .transition() .duration(150) .attr("opacity", x => x.name === d.name ? 1 : 0.22 ); stageG .transition() .duration(150) .attr("opacity", x => x.name === d.stage ? 1 : 0.25 ); const certaintyText = d.certainty === "low" ? "Cronología relativamente bien establecida" : d.certainty === "medium" ? "Cronología aproximada" : "Cronología discutida"; tooltip.innerHTML = `

${d.name}

${d.group}

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

Contexto: ${d.stage}

${certaintyText}

Referencia: ${d.reference}

`; tooltip.style.opacity = 1; moveTooltip(event); } function moveTooltip(event) { tooltip.style.left = `${event.clientX + 15}px`; tooltip.style.top = `${event.clientY + 15}px`; } function reset() { ribbons .transition() .duration(200) .attr("fill-opacity", d => d.certainty === "high" ? 0.40 : d.certainty === "medium" ? 0.57 : 0.72 ); prophetG .transition() .duration(200) .attr("opacity", 1); stageG .transition() .duration(200) .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 // ============================================================ const legend = svg.append("g") .attr("transform", "translate(835,135)"); legend.append("rect") .attr("width", 300) .attr("height", 115) .attr("fill", "#fff") .attr("stroke", "#777"); legend.append("text") .attr("x", 16) .attr("y", 24) .attr("font-size", 13) .attr("font-weight", 700) .text("Cómo leer la visualización"); legend.append("text") .attr("x", 16) .attr("y", 48) .attr("font-size", 11) .attr("fill", "#555") .text("La banda vertical representa el ministerio estimado."); legend.append("line") .attr("x1", 17) .attr("x2", 48) .attr("y1", 70) .attr("y2", 70) .attr("stroke", "#777") .attr("stroke-width", 7) .attr("opacity", .75); legend.append("text") .attr("x", 58) .attr("y", 74) .attr("font-size", 11) .text("Cronología más estable"); legend.append("line") .attr("x1", 17) .attr("x2", 48) .attr("y1", 94) .attr("y2", 94) .attr("stroke", "#777") .attr("stroke-width", 5) .attr("stroke-dasharray", "5,4") .attr("opacity", .45); legend.append("text") .attr("x", 58) .attr("y", 98) .attr("font-size", 11) .text("Cronología discutida"); return svg.node(); }33:[] 30:{"id":"25b4bf671b74c5b6","slug":"profetas-en-el-tiempo","title":"Profetas en el tiempo","thumbnail":"17e98dc8a9b24f6b82914416dff2cdcc148ce551fa491d84519d1200e221f6ab","access_level":"public","create_time":"$D2026-10-02T00:59:24.159Z","update_time":"$D2026-10-02T16:31:38.930Z","view_time":null,"first_public_time":"$D2026-10-02T00:59:38.375Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"9b777312fea6dc77","login":"allen-q","name":"Allen Q","avatar_url":"https://avatars-next.observableusercontent.com/f32293ffdef37fc20c657b7076e05c45826631edaf56406066aec07922e29316","tier":"starter_2024"},"version":7,"publish_version":7,"role":null,"authored":false,"authors":[{"type":"individual","id":"a8a0f4ea11d88ae6","login":"allen-q","name":"Allen Q","avatar_url":"https://avatars-next.observableusercontent.com/f32293ffdef37fc20c657b7076e05c45826631edaf56406066aec07922e29316","tier":null}],"members":[{"type":"team","id":"9b777312fea6dc77","login":"allen-q","name":"Allen Q","avatar_url":"https://avatars-next.observableusercontent.com/f32293ffdef37fc20c657b7076e05c45826631edaf56406066aec07922e29316","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Profetas en el tiempo","cells":[{"id":1,"value":"# Profetas en el tiempo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"2"}} 31:"$30:body"