2c:null 2d:["$","title",null,{"children":"Fernando López y Carl August Gosselman | juanFelipe | Observable"}] 32:T9ff,scenes = ( { "start": { "meta": 12, "text": "Mi pequeña verdad quiero expresarla por medio de una pequeña viñeta de viaje. Creo que condensa bien una serie de relaciones que para mí es importante dejar claras. Mi libro es sobre las imágenes de un personaje recurrente en relatos de viajes. Un personaje que sirvió a la vez de medio de transporte, guía, informante, mediador y dedo que señala y enmarca escenarios y paisajes. El viajero desembarca de un champán comandado por bogas, después de navegar a contracorriente varios días por el río Magdalena. El lugar es Puerto Nare. Se dispone a seguir a pie por el camino de Juntas para llegar hasta Medellín. Es un camino difícil, que se solía atravesar en las espaldas de cargueros. Puerto Nare era además un lugar de acopio y redistribución de mercancías que venían o iban entre Antioquia y el Magdalena. Antes de continuar, el viajero se detiene a hablar con un bodeguero aficionado a la geografía. El bodeguero, dice Gosselman, lo era de una ciencia “en la que, honestamente, no estaba suficientemente instruido”. Como no tenían un mapa a la mano, ambos se dieron a la tarea de dibujar uno sobre el piso de la bodega “con el filo de un machete”. Al final de la discusión, no sin ironía, Gosselman cuenta que el bodeguero le pidió pasar luego ese dibujo al papel para “no dejar algún punto de América en un lugar inconveniente”. Después el viaje sigue sobre las espaldas de un carguero. Lo que primero fue conversación y trazo sobre la tierra empieza ahora a convertirse en registro: en algo que pueda seguir el viaje y volver con él. El carguero no solo transporta al viajero. También le muestra el camino, le señala parajes y le da una posición desde la cual el territorio comienza a ordenarse ante los ojos casi como un mapa. Desde allí el paisaje se deja describir, dibujar y fijar en una imagen. Así puede llevarse de vuelta, acortar distancias, ponerse a circular e intercambiarse en un mundo cada vez más conectado, donde mapas, relatos e imágenes sirven para discutir, comparar y decidir. Por eso, cuando el carguero aparece en acuarelas, grabados o relatos, no carga solamente a un hombre. Carga también caminos, climas, mercancías y formas de conocer el territorio. Pero no queda reducido del todo a esa función. En la imagen persiste todavía el rastro del personaje mismo: la firmeza del cuerpo, la frontalidad de la postura, la mirada que devuelve de frente.", "opciones": [{"btn":"", "scene":"inicio"}] }, } )33:T886,setScenes = async (data, scenes) => { const msg = d3.select("#panel-container").append("div").text("Loading Atlas..."); // v 0.3.0 // sintaxis = {filter: () => {}, type: pack, scatter, compare, x:, y:} const keys = Object.keys(scenes); const vizFunction = {'pack': vanillaCanvasPack, 'scatter': vanillaCanvasScatter, 'compare': vanillaCanvasCompare} for (let k of keys) { if (scenes[k].viz !== undefined) { const {filter, type, x, y} = scenes[k].viz; let filtered = data; for (let f of filter) { const fn = filterFn(f) filtered = fn(filtered); } const {viz, areas} = await vizFunction[type](filtered, x, y); scenes[k].image = viz; scenes[k].areas = areas; } let newText = ""; if (scenes[k].meta) { newText += getMeta(data[scenes[k].meta]); scenes[k].image = data[scenes[k].meta].url; delete scenes[k].meta; } if (scenes[k].title) { newText += `

${scenes[k].title}

`; delete scenes[k].title; } scenes[k].text = newText + (scenes[k].text || ""); if (scenes[k].info) { scenes[k].text +=`${scenes[k].info[0]}` } } function getMeta(d) { return `

Title: ${d.obras}

Date: ${d.fecha}

Author: ${d.autor}

Source: ${d.fuente}

Repository

` } function filterFn(f) { if (f[1] === "=" || f[1] === "==" || f[1] === "===") { const condition = /true|True/i.test(""+f[2]) ? true : /false|False/i.test(""+f[2]) ? false : f[2]; return data => data.filter(d => d[f[0]] == condition) } else if (f[1] === "<") { return data => data.filter(d => d[f[0]] < f[2]) } else if (f[1] === ">") { return data => data.filter(d => d[f[0]] > f[2]) } else { return data => data } } for (let d of data) { scenes[`ind_${d.n}`] = { image: d.url, text: getMeta(d), options: [{ btn: "<<<", scene: `ind_${d.n}`, back: true }] } } msg.remove(); return scenes }34:T971,vanillaCanvasScatter = async (data, vx, vy) => { const size = 50; const margin = {l: 0.2 * width, r: 0.1 * width, t: 0.1 * height, b: 0.1 * height}; const wm = width - margin.l - margin.r; const hm = height - margin.t - margin.b; const filtered = data; const domainX = [...new Set(filtered.map(d => d[vx]))]; const domainY = [...new Set(filtered.map(d => d[vy]))]; const scaleX = d3.scalePoint().domain(domainX).range([0, wm]).padding(0.5).round(true); const scaleY = d3.scalePoint().domain(domainY).range([0, hm]).padding(0.5).round(true); const imgs = []; for (let d of filtered) { const img = new Image(); img.setAttribute('crossorigin', 'anonymous'); img.src = d.url; await new Promise(r => { img.onload = () => { r(true) }}); imgs.push({ url: d.url, x: scaleX(d[vx]), y: scaleY(d[vy]), img: img, r: size, n: d.n }); } const simulation = d3.forceSimulation(imgs) .force("charge", d3.forceManyBody().strength(5)) .force("collide", d3.forceCollide(10)) .tick(200) const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); canvas.width = width; canvas.height = height; ctx.fillStyle = "#313131"; ctx.fillRect(0, 0, width, height); ctx.strokeStyle = "white"; ctx.font = "14px serif"; ctx.textBaseline = "middle"; ctx.textAlign = "center"; for (let d of domainX) { ctx.fillStyle = "white"; ctx.fillText(d, margin.l + scaleX(d), margin.t + hm + (margin.b / 2)); } ctx.beginPath(); ctx.moveTo(margin.l, margin.t + hm); ctx.lineTo(margin.l + wm, margin.t + hm); ctx.stroke(); ctx.textAlign = "right"; for (let d of domainY) { ctx.fillStyle = "white"; ctx.fillText(d, margin.l - 5, margin.t + scaleY(d)); } ctx.beginPath(); ctx.moveTo(margin.l, margin.t); ctx.lineTo(margin.l, margin.t + hm); ctx.stroke(); ctx.strokeStyle = "black"; const areas = []; for (let i of imgs) { const w = size; const h = w * i.img.height / i.img.width; const j = Math.random() * 100; const x = i.x + margin.l + j; const y = i.y + margin.t // + Math.random() * 10; ctx.save(); ctx.translate(-w/2, -h/2); ctx.drawImage(i.img, x, y, w, h); ctx.restore(); const area = { x, y, w, h, btn: "", scene: `ind_${i.n}`, tooltip: "" } areas.push(area); } return {viz: canvas.toDataURL('image/png'), areas} }35:T945,vanillaCanvasPack = async (data, h1, h2) => { const filtered = data; const groups = d3.rollup(filtered, v => v.length, d => d[h1], d => d[h2]) const childrenAccessorFn = ([ key, value ]) => value.size && Array.from(value) const root = d3.hierarchy(groups, childrenAccessorFn) .sum(([,value]) => value) .sort((a, b) => b.value - a.value) const scheme = [...d3.schemeGreys[4]].reverse(); // scheme[0] = "#313131"; const desc = root.descendants(); const color = (v) => scheme[v]; d3.pack(root) .size([width, height]) .padding(20) (root) const imgs = []; for (let f of filtered) { for (let d of root.leaves()) { if (f[h1] === d.parent.data[0] && f[h2] === d.data[0]) { const img = new Image(); img.setAttribute('crossorigin', 'anonymous'); img.src = f.url; await new Promise(r => { img.onload = () => { r(true) }}); imgs.push({ url: f.url, x: d.x, y: d.y, r: 25, img: img, n: f.n }); } } } const simulation = d3.forceSimulation(imgs) .force("collide", d3.forceCollide(20)) .tick(200) const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); canvas.width = width; canvas.height = height; ctx.fillStyle = "#313131";; ctx.fillRect(0, 0, width, height); ctx.font = "12px serif"; ctx.textBaseline = "middle"; ctx.textAlign = "center"; for (let d of desc) { ctx.save(); ctx.translate(d.x, d.y); ctx.strokeStyle = "black"; ctx.fillStyle = color(d.depth); ctx.beginPath(); ctx.ellipse(0, 0, d.r, d.r, 0, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); ctx.fillStyle = "black"; ctx.fillText(d.depth === 1 || d.depth === 2 ? d.data[0] : "", 0, -d.r - 5); ctx.restore(); } const areas = []; for (let i of imgs) { const w = parseInt(50); const h = parseInt(w * i.img.height / i.img.width); const j = (Math.random() - 0.5) * 100; const x = i.x // + j; const y = i.y // + j; ctx.save(); ctx.translate(-w/2, -h/2); ctx.drawImage(i.img, x, y, w, h); ctx.restore(); const area = { x, y, w, h, btn: "", scene: `ind_${i.n}`, // ¿Cómo definir esto? tooltip: "" } areas.push(area); } return {viz: canvas.toDataURL('image/png'), areas} // return canvas }36:T51f,vanillaCanvasCompare = async (data, h1, h2) => { const filtered = [data.find(d => d.n == h1), data.find(d => d.n == h2)]; const imgs = []; for (let f of filtered) { const img = new Image(); img.setAttribute('crossorigin', 'anonymous'); img.src = f.url; await new Promise(r => { img.onload = () => { r(true) }}); imgs.push({ url: f.url, img: img, n: f.n }); } const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); canvas.width = width; canvas.height = height; ctx.fillStyle = "#313131"; ctx.fillRect(0, 0, width, height); ctx.font = "12px serif"; ctx.textBaseline = "middle"; ctx.textAlign = "center"; const areas = []; let count = 0; for (let i of imgs) { const m = parseInt(width / 2) * 0.1 const w = parseInt(width / 2) - m; const h = parseInt(w * i.img.height / i.img.width); const x = (count * (w + m)) + (w/2) + (m/2); const y = height/2; ctx.save(); ctx.translate(-w/2, -h/2); ctx.drawImage(i.img, x, y, w, h); ctx.restore(); const area = { x, y, w, h, btn: "", scene: `ind_${i.n}`, // ¿Cómo definir esto? tooltip: "" } areas.push(area); count++; } return {viz: canvas.toDataURL('image/png'), areas} // return canvas }37:T995,38:[{"id":"f730406662161dfb8b08e4afed83bd1bf9710ec9a25a4af8ae41cd2bf6f2fe662e7ff17787b9e4405952e3ecdeb2e201d9148d163c621b6673f941b00dd97bbf","href":"https://static.observableusercontent.com/files/f730406662161dfb8b08e4afed83bd1bf9710ec9a25a4af8ae41cd2bf6f2fe662e7ff17787b9e4405952e3ecdeb2e201d9148d163c621b6673f941b00dd97bbf","name":"aventura_panel@2.js","type":"application/javascript","lastModified":1774629194229.153,"size":31249}] 30:{"id":"4c37057d1899e2dd","slug":null,"title":"Fernando López y Carl August Gosselman","thumbnail":"1f351fd2d32063da77d58ffbf65dabba507d7cb62746d472a88c2b9410516cbf","access_level":"public","create_time":"$D2026-03-27T16:33:14.229Z","update_time":"$D2026-03-27T16:56:55.894Z","view_time":null,"first_public_time":"$D2026-03-27T16:33:14.229Z","has_unpublished_edits":null,"fork":{"id":"33bddfce407c70bc","slug":null,"title":"Dialéctica amo y esclavo. Dialéctica del carguero y el cargado","owner":{"id":"b08d810ce7971cef","login":"juanfuc","name":"juanFelipe"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b08d810ce7971cef","login":"juanfuc","name":"juanFelipe","avatar_url":"https://avatars-next.observableusercontent.com/037dd09add2cbc71786979cc31dd87cb23bfa363a7e7e4d2e86d11909d7b6be7","tier":"starter_2024"},"version":2106,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"787cd2505170a6b7","login":"juanfuc","name":"juanFelipe","avatar_url":"https://avatars-next.observableusercontent.com/037dd09add2cbc71786979cc31dd87cb23bfa363a7e7e4d2e86d11909d7b6be7","tier":null}],"members":[{"type":"individual","id":"787cd2505170a6b7","login":"juanfuc","name":"juanFelipe","avatar_url":"https://avatars-next.observableusercontent.com/037dd09add2cbc71786979cc31dd87cb23bfa363a7e7e4d2e86d11909d7b6be7","tier":null,"role":"editor"},{"type":"team","id":"b08d810ce7971cef","login":"juanfuc","name":"juanFelipe","avatar_url":"https://avatars-next.observableusercontent.com/037dd09add2cbc71786979cc31dd87cb23bfa363a7e7e4d2e86d11909d7b6be7","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Fernando López y Carl August Gosselman","cells":[{"id":0,"value":"# Fernando López y Carl August Gosselman","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":294,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"panelContainer","database":"$undefined"},{"id":5,"value":"path = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vTBIjdsvW9CukMdb8zkld70PCLFhk1f9g5331SHn7e6Wg4NgKv7YrO9BAjInskKlTZ9VvNBVYjiwhpi/pub?output=csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"imgUrl = \"https://lh3.googleusercontent.com/d/\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1170,"value":"csvString = fetch(path).then((response) => response.text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"data = d3.csvParse(csvString, d3.autoType).map(e => ({...e, url: imgUrl + e.id, otros: e.otros === \"False\" ? false : e.otros == \"True\" ? true : e.otros}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1999,"value":"tabla = Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1994,"value":"srcColumn = d3.map(data, d => d.src)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"urlColumn = d3.map(data, d => d.url)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2038,"value":" urlsFiltradas = {\n\n function caminoSeleccionado(camino){\n const filtradas = data\n .filter(d => d.camino === camino)\n .map(d => d.url);\n return filtradas\n}\n return caminoSeleccionado(\"Putumayo\")\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"panelFromScenes = async (data, scenes, start) => {\n const newScenes = JSON.parse(JSON.stringify(scenes));\n await setScenes(data, newScenes);\n showPanel(newScenes, start);\n return newScenes\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":896,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":893,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1861,"value":"showPanel = (scenes, start) => {\n let prevScene = start;\n const a = new aventuraModule.Aventura('en', {\n adventureContainer: \"panel-container\",\n typewriterSpeed: 0,\n sceneCallbackStart: (scene) => {\n if (prevScene === scene.key) return\n \n if (scene.options === undefined) {\n scene.options = [{ btn: \"<<<\", scene: prevScene, back: true }];\n } else {\n if (scene.options[0].back) {\n scene.options[0].scene = prevScene;\n } else {\n scene.options.unshift({ btn: \"<<<\", scene: prevScene, back: true });\n }\n }\n\n if (!scene.key.includes(\"ind_\")) {\n prevScene = scene.key;\n }\n \n }\n })\n a.setScenes(scenes).testScenes().startAdventure(start)\n return scenes\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":927,"value":"processedScenes = panelFromScenes(data, scenes, 'start')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":982,"value":"## General settings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":304,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"height = 900","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":941,"value":"## Viz functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":807,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":950,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":943,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"aventuraModule = import(await FileAttachment(\"aventura_panel@2.js\").url())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1590,"value":"## Style","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1343,"value":"$37","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 31:"$30:body"