2c:null 2d:["$","title",null,{"children":"Lámina V. Passage du Quindiu dans le Cordillère des Andes | juanFelipe | Observable"}] 32:T836,scenes = ( { "start": { "meta": 6, "areas": [ { "x": 907, "y": 660, "w": 316, "h": 474, "btn": "", "tooltip": "", "scene": "villanero" }, { "x": 1225, "y": 619, "w": 273, "h": 547, "btn": "", "tooltip": "", "scene": "agave" }, { "x": 615, "y": 342, "w": 727, "h": 453, "btn": "", "tooltip": "", "scene": "humboldtPack" } ] }, "villanero": { "meta": 122, "options": [ { "btn": "Volver", "scene": "start"} ], "areas": [ { "x": 157, "y": 242, "w": 120, "h": 154, "btn": "", "tooltip": "", "scene": "bijao" } ] }, "bijao": { "meta": 119, "text": "The Cargueros act as guides and make it possible to cross the difficult path, not only because of their physical strength, but also because of the knowledge they have of the landscape they inhabit. They know the signs of the terrain, climate, and usefulness of plants. The same Carguero, the one in the image that stares at the viewer and has an empty chair, carries in his hands some bijao leaves that, the story tells us, will later be used to make tents and shelter from the rain.Humboldt draws the bijao leaves in his diary", "options": [ { "btn": "Volver", "scene": "start"} ] }, "agave": { "meta": 120, "text": "There is a flowering Fique or Agave on the right side of the Plate V of Vues. This plant is used for the elaboration of ropes that tie the Bijao leaves and secure the tents. In Humboltd's diaries, there are drawings of the tents specifying how to tie them so that they are resistant. In the story, these plants are considered regarding their geographical location in relation to altitude, taxonomically by being categorized into families and species, and by their usefulness by speculating about their industrial applications.", "options": [ { "btn": "Back to main route", "scene": "pack1750_1810"} ] }, "humboldtPack": { "viz":{ "filter": [ ["modelo", "=", "contorno"]], "type": "pack", "x": "modelo", "y": "medio"}, "title": "Contorno del nevado del Tolima", "text": "", "options": [ { "btn": "Volver", "scene": "start"} ] }, } )33:T8b1,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}

Description: ${d.descripcion}

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":1724179380625.33,"size":31249}] 30:{"id":"4c3d75a3ada888a9","slug":null,"title":"Lámina V. Passage du Quindiu dans le Cordillère des Andes","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-08-20T18:43:00.625Z","update_time":"$D2024-10-15T14:27:30.256Z","view_time":null,"first_public_time":"$D2024-08-20T18:43:00.625Z","has_unpublished_edits":null,"fork":{"id":"66d3536bf3316635","slug":null,"title":"Atlas. Experimentos","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":2091,"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":1,"collection":null,"type":"notebook","body":{"title":"Lámina V. Passage du Quindiu dans le Cordillère des Andes","cells":[{"id":2088,"value":"titulo = md`\n# Lámina V. Passage du Quindiu dans le Cordillère des Andes\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","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"