2c:null 2d:["$","title",null,{"children":"Test Costumes / Colombie | juanFelipe | Observable"}] 32:T1b56,scenes = ( { 1: { image: ""+data[21]["url"], text: "

Title:

"+data[21]["obras"] + "
" + "

Date:

"+data[21]["fecha"] + "
" + "

Author:

"+data[21]["autor"] + "
" + "

Source:

"+data[21]["fuente"] + "
" + `Repository`, areas: [ { "x": 222, "y": 176, "w": 126, "h": 345, "btn": "", "tooltip": "", "name": "colgada", "escena": "colgadaBlake" }, { "x": 74, "y": 723, "w": 155, "h": 568, "btn": "", "tooltip": "", "name": "sacerdote", "escena": "sacerdote" }, { "x": 239, "y": 712, "w": 205, "h": 306, "btn": "", "tooltip": "", "name": "agachado", "escena": "agachado" }, { "x": 333, "y": 652, "w": 212, "h": 448, "btn": "", "tooltip": "", "escena": "cargandoNino" }, { "x": 583, "y": 386, "w": 362, "h": 603, "btn": "", "tooltip": "", "name": "carguero", "escena": "carguero" }, { "x": 851, "y": 674, "w": 360, "h": 684, "btn": "", "tooltip": "", "name": "plantadorSurinam" }, { "x": 1065, "y": 549, "w": 216, "h": 566, "btn": "", "tooltip": "", "name": "mujerSombrero" }, { "x": 1238, "y": 633, "w": 448, "h": 708, "btn": "", "tooltip": "", "name": "familia" }, { "x": 1484, "y": 328, "w": 233, "h": 522, "btn": "", "tooltip": "", "name": "colgado" }, { "x": 1498, "y": 697, "w": 201, "h": 609, "btn": "", "tooltip": "", "name": "mujerConPajaro" } ] }, colgadaBlake: { text: "

Title:

"+data[186]["obras"] + "
" + "

Date:

"+data[186]["fecha"] + "
" + "

Author:

"+data[186]["autor"] + "
" + "

Source:

"+data[186]["fuente"] + "
" + `Repository`, imagen: data[186]["url"], opciones: [ { btn: "<<<", escena: "1", } ] }, sacerdote: { text: "

Title:

"+data[181]["obras"] + "
" + "

Date:

"+data[181]["fecha"] + "
" + "

Author:

"+data[181]["autor"] + "
" + "

Source:

"+data[181]["fuente"] + "
" + `Repository`, imagen: data[181]["url"], opciones: [ { btn: "Volver", escena: "3", }, { btn: "Inicio", escena: "1" } ] }, agachado: { text: "

Title:

"+data[180]["obras"] + "
" + "

Date:

"+data[180]["fecha"] + "
" + "

Author:

"+data[180]["autor"] + "
" + "

Source:

"+data[180]["fuente"] + "
" + `Repository`, imagen: data[180]["url"], areas: [ { "x": 109, "y": 294, "w": 195, "h": 376, "btn": "", "tooltip": "", "name": "parado", "escena": "roulinPlaza" }, { "x": 245, "y": 382, "w": 136, "h": 229, "btn": "", "tooltip": "", "name": "agachado1", "escena": "roulinPlaza" } ], opciones: [ { btn: "Volver", escena: "3", }, { btn: "Inicio", escena: "1" } ] }, cargandoNino: { text: "

Title:

"+data[178]["obras"] + "
" + "

Date:

"+data[178]["fecha"] + "
" + "

Author:

"+data[178]["autor"] + "
" + "

Source:

"+data[178]["fuente"] + "
" + `Repository`, imagen: data[178]["url"], opciones: [ { btn: "Volver", escena: "3", }, { btn: "Inicio", escena: "1" } ] }, roulinPlaza: { text: "

Title:

"+data[154]["obras"] + "
" + "

Date:

"+data[154]["fecha"] + "
" + "

Author:

"+data[154]["autor"] + "
" + "

Source:

"+data[154]["fuente"] + "
" + `Repository`, imagen: data[154]["url"], areas: [ { "x": 400, "y": 762, "w": 152, "h": 276, "btn": "", "tooltip": "", "name": "cargando", "escena": "agachado" }, { "x": 586, "y": 708, "w": 140, "h": 152, "btn": "", "tooltip": "", "name": "agachado", "escena": "agachado" }, { "x": 748, "y": 653, "w": 104, "h": 178, "btn": "", "tooltip": "", "name": "mujerConBalde", "escena": "mujerConBalde" }, { "x": 382, "y": 439, "w": 400, "h": 350, "btn": "", "tooltip": "", "name": "fuente", "escena": "mujerConBalde" }, { "x": 429, "y": 440, "w": 154, "h": 104, "btn": "", "tooltip": "", "name": "roulin", "escene": "firma" } ] }, mujerConBalde: { text: "

Title:

"+data[165]["obras"] + "
" + "

Date:

"+data[165]["fecha"] + "
" + "

Author:

"+data[165]["autor"] + "
" + "

Source:

"+data[165]["fuente"] + "
" + `Repository`, imagen: data[165]["url"], areas: [ { "x": 199, "y": 350, "w": 156, "h": 283, "btn": "", "tooltip": "", "name": "mujer", "escena": "roulinPlaza" }, { "x": 303, "y": 339, "w": 154, "h": 137, "btn": "", "tooltip": "", "name": "area", "escena": "roulinPlaza" } ], opciones: [ { btn: "<<<", escena: "1" }, ] }, carguero: { text: "

Title:

"+data[14]["obras"] + "
" + "

Date:

"+data[14]["fecha"] + "
" + "

Author:

"+data[14]["autor"] + "
" + "

Source:

"+data[14]["fuente"] + "
" + `Repository`, imagen: data[14]["url"], areas: [ { "x": 549, "y": 876, "w": 276, "h": 426, "btn": "", "tooltip": "", "escena": "cargueroRoulin" } ] }, } )33:T9ba,vanillaCanvasScatter = async (data, vx, vy) => { const size = 50; const margin = {l: 0.3 * 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 = "lightgray"; ctx.fillRect(0, 0, width, height); ctx.strokeStyle = "black"; ctx.font = "12px serif"; ctx.textBaseline = "middle"; ctx.textAlign = "center"; for (let d of domainX) { ctx.fillStyle = "black"; 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 = "black"; 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"; ctx.fillStyle = "green"; 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}`, // ¿Cómo definir esto? tooltip: "" } areas.push(area); } return {viz: canvas.toDataURL('image/png'), areas} // return canvas }34:T92a,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(); 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 = "lightgray"; 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:T4e7,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 = "lightgray"; 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 w = parseInt(width / 2); const h = parseInt(w * i.img.height / i.img.width); const x = (count * w) + (w/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:[{"id":"43363cdb977601edbc6b027acb5cac83027a4cf73e13e506683d04893d03ee3059dae0057634456b92bfc65af5492fb8100aab5868221f64e680a7252943546d","href":"https://static.observableusercontent.com/files/43363cdb977601edbc6b027acb5cac83027a4cf73e13e506683d04893d03ee3059dae0057634456b92bfc65af5492fb8100aab5868221f64e680a7252943546d","name":"aventura@1.js","type":"application/javascript","lastModified":1680895728057.581,"size":29975}] 30:{"id":"41148deef27218ca","slug":null,"title":"Test Costumes / Colombie","thumbnail":"7e941b1d2b0f741b53aa5e8e4259d55b934d7d71ad8a3b7a9259b4407e699c3c","access_level":"public","create_time":"$D2023-04-07T19:28:48.057Z","update_time":"$D2023-04-16T17:29:28.802Z","view_time":null,"first_public_time":"$D2023-04-07T19:28:48.057Z","has_unpublished_edits":null,"fork":{"id":"1367476bc005a755","slug":null,"title":"Paneles ed2","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":1415,"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"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Test Costumes / Colombie","cells":[{"id":0,"value":"# Test Costumes / Colombie","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"path = \"https://docs.google.com/spreadsheets/d/1xkt2R62trJRBdELOjTXikNjl-sC0aR4R6ojQHygH6wc/export?format=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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1346,"value":"import {icon} from '@severo/fork-awesome-icons'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1170,"value":"csvString = fetch(path).then((response) => response.text())","pinned":true,"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}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"Inputs.table(data)","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":896,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"panelFromScenes = async (data, scenes, start) => {\n await setScenes(data, scenes);\n showPanel(scenes, start);\n return scenes\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":893,"value":"setScenes = async (data, scenes) => {\n // sintaxis = {filter: () => {}, type: pack, scatter, compare, x:, y:}\n const keys = Object.keys(scenes);\n const vizFunction = {'pack': vanillaCanvasPack, 'scatter': vanillaCanvasScatter, 'compare': vanillaCanvasCompare}\n\n for (let k of keys) {\n if (scenes[k].viz === undefined) continue\n const {filter, type, x, y} = scenes[k].viz;\n const filtered = data.filter(filter);\n const {viz, areas} = await vizFunction[type](filtered, x, y);\n scenes[k].image = viz;\n scenes[k].areas = areas;\n }\n\n for (let d of data) {\n scenes[`ind_${d.n}`] = {\n image: d.url,\n text: `Obra: ${d.obras}
Autor: ${d.autor}
Fecha: ${d.fecha}
Fuente: ${d.fuente}
Descripción: ${d.descripcion}
Repository`,\n options: [{btn: \"<<<\", scene: `ind_${d.n}`}]\n }\n }\n\n return scenes\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"showPanel = (scenes, start) => {\n let prevScene = start;\n const a = new aventuraModule.Aventura('en', {\n adventureContainer: \"panel-container\",\n typewriterSpeed: 0,\n // adventureScroll: true\n sceneCallback: (scene) => {\n if (scene.viz !== undefined) {\n prevScene = scene.key\n } else {\n scene.options[0].scene = prevScene\n }\n }\n })\n a.setScenes(scenes).startAdventure(start)\n return scenes\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":927,"value":"finalPanel = panelFromScenes(data, scenes, '1')","pinned":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":950,"value":"$35","pinned":false,"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":1332,"value":"await icon('archive', 96, 16)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"aventuraModule = import(await FileAttachment(\"aventura@1.js\").url())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1166,"value":"x = \"hola, v\\n1,3\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1136,"value":"tst = d3.csvParse(x, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1304,"value":"data[185][\"repositorio\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1307,"value":"data[185].repositorio","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1321,"value":"icon('archive')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1326,"value":"${await icon('archive')}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1329,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 31:"$30:body"