2c:null 2d:["$","title",null,{"children":"Panel Scatterplot de las representaciones contemporáneas del carguero (1900-2020) | juanFelipe | Observable"}] 32: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 }33: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} }34: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 }35: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 }36:T995,37:[{"id":"f730406662161dfb8b08e4afed83bd1bf9710ec9a25a4af8ae41cd2bf6f2fe662e7ff17787b9e4405952e3ecdeb2e201d9148d163c621b6673f941b00dd97bbf","href":"https://static.observableusercontent.com/files/f730406662161dfb8b08e4afed83bd1bf9710ec9a25a4af8ae41cd2bf6f2fe662e7ff17787b9e4405952e3ecdeb2e201d9148d163c621b6673f941b00dd97bbf","name":"aventura_panel@2.js","type":"application/javascript","lastModified":1728483036735.167,"size":31249}] 30:{"id":"1e183a538a5840b1","slug":null,"title":"Panel Scatterplot de las representaciones contemporáneas del carguero (1900-2020)","thumbnail":"35cd84f1fa99d4cf4198f986884a659f97392736885f7a4a21c264b7f579789a","access_level":"public","create_time":"$D2024-10-09T14:10:36.735Z","update_time":"$D2024-10-14T22:15:49.815Z","view_time":null,"first_public_time":"$D2024-10-09T14:10:36.735Z","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":2110,"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":"Panel Scatterplot de las representaciones contemporáneas del carguero (1900-2020)","cells":[{"id":2102,"value":"titulo = md`\n# Panel Scatterplot de las representaciones contemporáneas del carguero (1900-2020)\n`","pinned":false,"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":"scenes = (\n{\n \"start\": {\n \"viz\": {\"filter\": [[\"fecha\", \">\", 1900], [\"otros\", \"=\", false]], \"type\": \"scatter\", \"x\": \"periodo\", \"y\": \"genero\"},\n \"titulo\": \"Panel Sacatterplot de las representaciones contemporáneas del carguero (1900-2020)\",\n \"texto\": \" La imagen del carguero mantiene su presencia y relevancia a través de su aparición y recontextualización en diversas formas como monumentos conmemorativos, grafitis, artesanías, memes, fotomontajes, portadas de libros, carteles de eventos académicos, metáforas en debates públicos, logotipos de instituciones históricas, películas y obras de arte contemporáneo. *Hacer clic sobre las imágenes para visualizar y acceder sus metadatos\"\n },\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":893,"value":"$32","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":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":950,"value":"$35","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":"$36","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 31:"$30:body"