function caminoSeleccionado(camino){

const filtradas = data

.filter(d => d.camino === camino)

.map(d => d.url);

return filtradas

return caminoSeleccionado("Putumayo")

}

const newScenes = JSON.parse(JSON.stringify(scenes));

await setScenes(data, newScenes);

showPanel(newScenes, start);

return newScenes

"start":{

"titulo":"Montaje con un detalle del contorno del volcán Tolima en la lámina V de Vues contrastado con los bocetos que aparecen en los diarios",

"meta":"285",

"texto": "",

"imagen":"assets/imgs/292.jpg",

"opciones": [{"btn": "<<<", "scene": "contorno" }],

"areas": [

{

"x": 430,

"y": 441,

"w": 608,

"h": 474,

"btn": "",

"tooltip": "",

"scene": "medidasTolima"

},

{

"x": 1182,

"y": 407,

"w": 727,

"h": 556,

"btn": "",

"tooltip": "",

"scene": "montajeContorno"

},

{

"x": 1967,

"y": 411,

"w": 597,

"h": 497,

"btn": "",

"tooltip": "",

"scene": "medidasTolima"

},

{

"x": 835,

"y": 993,

"w": 745,

"h": 415,

"btn": "",

"tooltip": "",

"scene": "perfilesTolima"

},

{

"x": 1633,

"y": 997,

"w": 537,

"h": 400,

"btn": "",

"tooltip": "",

"scene": "perfilesTolima"

},

{

"x": 806,

"y": 1502,

"w": 612,

"h": 378,

"btn": "",

"tooltip": "",

"scene": "cenitalQuindio"

},

{

"x": 1474,

"y": 1476,

"w": 478,

"h": 408,

"btn": "",

"tooltip": "",

"scene": "cenitalQuindio"

}

]

},

"medidasTolima":{

"viz": {"filter": [[]], "type": "compare", "x": 258, "y": 259},

"opciones": [{"btn":"<<<", "scene":"bocetosTolima"}]

},

"perfilesTolima":{

"viz": {"filter": [[]], "type": "compare", "x": 260, "y": 261},

"opciones": [{"btn":"<<<", "scene":"bocetosTolima"}]

},

"cenitalQuindio":{

"viz": {"filter": [[]], "type": "compare", "x": 262, "y": 263},

"opciones": [{"btn":"<<<", "scene":"bocetosTolima"}]

},

"pichincha":{

"imagen":"assets/imgs/261.jpg",

"meta":"254",

"opciones": [{"btn": "<<<", "scene": "contorno" }],

"areas": [

{

"x": 2859,

"y": 2970,

"w": 1248,

"h": 771,

"btn": "",

"tooltip": "",

"scene": "bocetosPichincha"

},

{

"x": 2644,

"y": 1654,

"w": 1121,

"h": 334,

"btn": "",

"tooltip": "",

"scene": "bocetosPichincha"

},

{

"x": 2990,

"y": 2413,

"w": 127,

"h": 87,

"btn": "",

"tooltip": "",

"scene": "figurasPichincha"

}

]

},

"bocetosPichincha": {

"viz": {"filter": [[]], "type": "compare", "x": 255, "y": 256},

"opciones": [{"btn":"<<<", "scene":"pichincha"}]

},

"figurasPichincha": {

"imagen": "assets/imgs/293.jpg",

"opciones": [{"btn":"<<<", "scene":"pichincha"}]

},

"figurasContornos": {

"viz": {"filter": [[]], "type": "compare", "x": 246, "y": 286},

"titulo":"Figuras humanas en medio de montañas",

"texto": "En esta comparación de dos imágenes adyacentes se pueden observar las figuras humanas en la lámina del Cayambe y en la del Pichincha.",

"opciones": [{"btn":"<<<", "scene":"señalando"}, {"btn":"Figuras Humanas V lámina de Vues", "scene":"figurasCargueros"}]

},

"figurasCargueros":{

"imagen":"assets/imgs/283.jpg",

"titulo":"Figuras humanas en la V lámina de Vues",

"texto":"Las figuras humanas de la lámina V de Vues tienen diferencias con esta perspectiva. Herrera destaca que el interés de Humboldt por mostrar la imagen de los cargueros y entrar en detalles sobre la actitud de los cargados, lleva a situar las figuras humanas en una posición más cercana al observador, neutralizando así el efecto de la pequeñez de la escala humana frente a la magnitud de las montañas. Allí es la ciudad la que refleja la insignificancia de la dimensión humana frente a las colosales magnitudes de la cordillera andina. <br><br> La ilustración muestra una fila de once cargueros, cada uno involucrado en diversas actividades. El primer carguero carga a un individuo que aparenta ser un monje, quien se encuentra leyendo un libro. El segundo carguero lleva una silla vacía y sostiene unas hojas de bijao en su mano. El tercero no lleva silla, pero porta un rollo de hojas de bijao. Otro carguero transporta a un sujeto con sombrero, mientras que otros cargueros parecen siluetas sin una función específica en la comitiva. Esta amplitud de actividades se puede confirmar en la descripción de la lámina en Vues y en los comentarios pertinentes hechos por Humboldt en el diario. Al mostrar a los cargueros no solo cargando a los viajeros y sus pertenencias, sino también transportando plantas útiles para la protección y el resguardo, así como portando información relevante para el viaje, se les presenta en un papel de apoyo, asistencia y, en última instancia, de guías y acompañantes. Esta representación da cuenta de una configuración visual de la figura del carguero y el cargado ambigua, en donde estos pueden ser interpretados tanto como sujetos dedicados a una labor humillante, como seres que guían, apoyan, cargan, protegen e informan.",

"opciones": [{"btn":"<<<", "scene":"figurasContornos"}, {"btn":"Amo/Esclavo", "scene": "amoEsclavo"}]

},

"amoEsclavo": {

"viz": {"filter": [[]], "type": "compare", "x": 276, "y": 288},

"titulo": "Daléctica del Amo y esclavo. Dialéctica del carguero y cargado",

"texto": "<a href='https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwjCqbef3oqBAxWFrIkEHWw8DrIQFnoECA4QAQ&url=http%3A%2F%2Fwww.worldcat.org%2Foclc%2F741480544&usg=AOvVaw29hbYvFJOR9BxuJ64ke826&opi=89978449' target='_blank'>Susan Buck-Morss</a> sustentó la posibilidad de que Hegel hubiese basado su figura del amo y el esclavo en la revolución de Haití. Humboldt también se interesó en Haití. Los cargueros, los bogas, y otros sujetos subordinados con los que se encontró en América, sirvieron para hacer contrastes con las condiciones de los esclavos. Usando como analogía el caso de Hegel, es posible hablar de una dialéctica del carguero y el cargado. En el relato de Hegel esta dialéctica se desarrolla por medio de una clara inversión en la que el esclavo vence, a partir del conocimiento y la autonomía que adquiere al tener la experiencia directa del objeto por medio de su trabajo, frente al amo quien pierde la autonomía al estar abocado a una experiencia mediada del objeto que solo puede ser consumido en su faceta de manufactura <a href='https://desarmandolacultura.files.wordpress.com/2018/04/hegel-georg-fenomenologia-del-espiritu-edicion-bilingue.pdf' target='_blank'>(Hegel, [1807]2010: 265)</a>. Por su parte, la manera en que Humboldt valora la experiencia directa que tiene el carguero del territorio, frente a la experiencia mediada de los cargados, permite imaginarse una interacción dialéctica semejante a la hegeliana, pero aplicada en este caso al modo como se habita el espacio vertical andino.<br><br> Entonces, Humboldt empieza preocupándose por el modo como el carguero es considerado por los criollos y los españoles como un animal de carga. Es decir, el carguero es cosificado por sus usuarios, quienes lo instrumentalizan y lo usan como un medio para no experimentar ellos mismos el viaje. En este momento del proceso, el carguero no tiene autoconciencia y el reconocimiento que recibe por parte del cargado es el de un animal, que en términos legales es un objeto. Sin embargo, a medida que se desenvuelve el proceso dialéctico, a los ojos de Humboldt el aparente dominio del cargado se invierte debido a que se percata de que, durante el viaje, los cargados dependen totalmente del carguero. Humboldt al describir la figura afirma que “el sillero camina infinitamente recto y erguido, mientras que el cargado, atrás, recostado, presenta una miserable y desamparada figura” <a href='https://descubridor.banrepcultural.org/permalink/57BDLRDC_INST/qk5q4l/alma991005445879707486' target='_blank'>(Humboldt, [1801]1992: 113a)</a>. Asimismo, en su gesto de no querer dejarse cargar está implícito el reconocimiento de la humanidad del otro y de su carácter de fin y no de medio, pero también su determinación de tener una experiencia inmediata del objeto, es decir la experiencia del viaje. <br><br> Por otro lado, Humboldt se explica la existencia de estas personas por el gusto de una vida errante y vagabunda y la idea de independencia (indépendance) que en sus diarios en 1801 había comparado con la “vida libre” (freien leben) sin obligaciones, salvaje como la del “jabalí” con fuertes ansias de volver al “crudo estado de naturaleza” (rohen Naturzustand)<a href='https://descubridor.banrepcultural.org/permalink/57BDLRDC_INST/qk5q4l/alma991005445879707486' target='_blank'>(Humboldt, [1801]1992: 83a)</a>. En este sentido, podria decirse que el carguero va en una dirección opuesta al curso de la historia. El carguero utiliza su poder, libertad y autodeterminación para aferrarse a títulos nobiliarios anacrónicos en un contexto de procesos revolucionarios como los ocurridos en América del Norte, Francia y Haití. Utiliza su poder de negociación y agencia, orientándose hacia un pasado mítico que representa un estado “crudo” de la naturaleza en lugar de buscar la formación de una comunidad política. <br><br> Para Humboldt, esta contradicción debe resolverse por medio de una acción de las autoridades, a las que indistintamente Estado (der Staat), República (Republik), o Gobierno (Gouvernement) <a href='https://descubridor.banrepcultural.org/permalink/57BDLRDC_INST/qk5q4l/alma991005445879707486' target='_blank'>(Humboldt, [1801]1992: 114a)</a>. En este caso, reformas legales, en la educación y racionalizaciones en el ejercicio de la técnica pueden en efecto redirigir los usos de la energía humana. De esta manera, la lectura que hace Humboldt del carguero presenta ambigüedades que no tienen una resolución cierta por el momento. Estas se mantienen en un estado de suspensión. Así, la escena del encuentro de Humboldt con Villanero se puede leer como un evento en el que ciertos lenguajes, metáforas, imágenes y gestos permiten imaginar una inversión en los términos de la relación entre lo que está arriba y lo que está abajo.",

"opciones": [{"btn":"<<<", "scene":"inicio"}]

},

}

)

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 += `<h3>${scenes[k].title}</h3>`;

delete scenes[k].title;

}

scenes[k].text = newText + (scenes[k].text || "");

if (scenes[k].info) { scenes[k].text +=`<a href=${scenes[k].info[1]} target="_blank">${scenes[k].info[0]}</a>` }

}

function getMeta(d) {

return `<div class="meta-container"><p><b>Title:</b> ${d.obras}</p><p><b>Date:</b> ${d.fecha}</p><p><b>Author:</b> ${d.autor}</p><p><b>Source:</b> ${d.fuente}</p><p><b>Description:</b> ${d.descripcion}</p><a class="repo-link" href="${d.repositorio}" target="_blank">Repository</a></div>`

}

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

let prevScene = start;

const a = new aventuraModule.Aventura('en', {

adventureContainer: "panel-container",

typewriterSpeed: 0,

sceneCallbackStart: (scene) => {

if (prevScene === scene.key) return

if (scene.options === undefined) {

scene.options = [{ btn: "<<<", scene: prevScene, back: true }];

} else {

if (scene.options[0].back) {

scene.options[0].scene = prevScene;

} else {

scene.options.unshift({ btn: "<<<", scene: prevScene, back: true });

}

}

if (!scene.key.includes("ind_")) {

prevScene = scene.key;

}

}

})

a.setScenes(scenes).testScenes().startAdventure(start)

return scenes

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}

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

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