2c:null 2d:["$","title",null,{"children":"Paneles ed2 | juanFelipe | Observable"}] 32:Tba6,scenes = ( { 1: { viz: {filter: d => d.fecha < 1900 && d.otros === false, type: "scatter", x: "periodo", y: "figura/fondo"}, options: [ { btn: "Scatter fecha-modelo", scene: "2" }, ] }, 2: { viz: {filter: d => d.fecha < 1900 && d.otros === false, type: "scatter", x: "fecha", y: "modelo"}, options: [ { btn: "Pack 1819-1850", scene: "3" }, { btn: "Volver", scene: "1" } ] }, 3: { viz: {filter: d => d.periodo === "1819 - 1850" && d.otros === false, type: "pack", x: "modelo", y: "figura/fondo"}, options: [ { btn: "Pack Roulin", scene: "4" }, { btn: "Volver", scene: "2" } ] }, 4: { viz: {filter: d => d.modelo === "roulin" && d.otros === false, type: "pack", x: "periodo", y: "figura/fondo"}, options: [ { btn: "Pack Humboldt", scene: "5"}, { btn: "Volver", scene: "3" } ] }, 5: { viz: {filter: d => d.modelo === "humboldt" && d.fecha < 1900, type: "pack", x: "periodo", y: "figura/fondo"}, options: [ { btn: "Compare Roulin Humboldt", scene: "6"}, { btn: "Volver", scene: "4" } ] }, 6: { viz: {filter: d => d, type: "compare", x: 6, y: 11}, options: [ { btn: "Soportes", scene: "7" }, { btn: "Volver", scene: "6" } ] }, 7: { viz: {filter: d => d.periodo === "1819 - 1850" && d.otros === false, type: "pack", x: "soporte", y: "modelo"}, options: [ { btn: "Mirada", scene: "8" }, { btn: "Volver", scene: "7" } ] }, 8: { viz: {filter: d => d.fecha < 1900 && d.otros === false, type: "pack", x: "direccionMiradaCarguero", y: "region"}, options: [ { btn: "///", scene: "9" }, { btn: "Volver", scene: "8" } ] }, 9: { viz: {filter: d => d.fecha < 1900 && d.otros === false, type: "pack", x: "modelo", y: "periodo"}, options: [ { btn: "///", scene: "10" }, { btn: "Volver", scene: "8" } ] }, 10: { viz: {filter: d => d.fecha < 1900 && d.otros === false, type: "pack", x: "genero", y: "periodo"}, options: [ { btn: "///", scene: "11" }, { btn: "Volver", scene: "9" } ] }, 11: { viz: {filter: d => d.fecha < 1900 && d.otros === false && d.periodo === "1750 - 1810", type: "pack", x: "figura/fondo", y: "periodo"}, options: [ { btn: "Compare Roulin, Hamilton", scene: "12" }, { btn: "Volver", scene: "10" } ] }, 12: { viz: {filter: d => d, type: "compare", x: 11, y: 14}, options: [ { btn: "Compare Roulin and d'Orbigny", scene: "13" }, { btn: "Volver", scene: "11" } ] }, 13: { viz: {filter: d => d, type: "compare", x: 11, y: 22, z: 1}, options: [ { btn: "Soportes", scene: "14" }, { btn: "Volver", scene: "12" } ] }, } )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":1679870815101.188,"size":29975}] 30:{"id":"1367476bc005a755","slug":null,"title":"Paneles ed2","thumbnail":"7e941b1d2b0f741b53aa5e8e4259d55b934d7d71ad8a3b7a9259b4407e699c3c","access_level":"public","create_time":"$D2023-03-26T22:46:55.101Z","update_time":"$D2023-04-17T10:43:51.408Z","view_time":null,"first_public_time":"$D2023-03-26T22:46:55.101Z","has_unpublished_edits":null,"fork":{"id":"0dc7737e0c7800d2","slug":"paneles_ed","title":"Paneles ed","owner":{"id":"305bf5080ae4580a","login":"srsergiorodriguez","name":"Sergio Rodríguez Gómez"}},"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":1222,"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":1,"collection":null,"type":"notebook","body":{"title":"Paneles ed2","cells":[{"id":0,"value":"# Paneles ed2","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":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}
Repositorio`,\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":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"}],"files":"$W36","stdlib":"1","titling":"auto"}} 31:"$30:body"