2e:null 2f:["$","title",null,{"children":"Paneles ed | Sergio Rodríguez Gómez | Observable"}] 34:T4d1,setScenes = async (data, scenes) => { // syntax = {filter: [[key, comparator, value]...], type: "pack", "scatter", "compare", x: value, y: value} const keys = Object.keys(scenes); const vizFunction = {'pack': vanillaCanvasPack, 'scatter': vanillaCanvasScatter, 'compare': vanillaCanvasCompare} for (let k of keys) { if (scenes[k].viz === undefined) continue 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; } function filterFn(f) { if (f[1] === "=" || f[1] === "==" || 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 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: `${d.obras}
${d.autor}
${d.fecha}`, options: [{btn: "<<<", scene: `ind_${d.n}`}] } } return scenes }35: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 }36: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 }37: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 }38:[{"id":"f8b9b77ce51e0b4ca8d242f3431f3a4237292b4df81d2763904e8095dfb2a1e5fdf36b6f994035cf64512823f1bb8ddcccff269f099bccdb26e4e2694347edf2","href":"https://static.observableusercontent.com/files/f8b9b77ce51e0b4ca8d242f3431f3a4237292b4df81d2763904e8095dfb2a1e5fdf36b6f994035cf64512823f1bb8ddcccff269f099bccdb26e4e2694347edf2","name":"aventura.js","type":"application/javascript","lastModified":1679320242452.984,"size":29872},{"id":"43363cdb977601edbc6b027acb5cac83027a4cf73e13e506683d04893d03ee3059dae0057634456b92bfc65af5492fb8100aab5868221f64e680a7252943546d","href":"https://static.observableusercontent.com/files/43363cdb977601edbc6b027acb5cac83027a4cf73e13e506683d04893d03ee3059dae0057634456b92bfc65af5492fb8100aab5868221f64e680a7252943546d","name":"aventura@1.js","type":"application/javascript","lastModified":1679859587278.461,"size":29975}] 32:{"id":"0dc7737e0c7800d2","slug":"paneles_ed","title":"Paneles ed","thumbnail":"5e4253f20529222cf063ecc21c877ec824f3c13bfd31ac4ad589270cf1a9455c","access_level":"public","create_time":"$D2023-03-20T13:50:42.452Z","update_time":"$D2023-04-14T15:51:14.622Z","view_time":null,"first_public_time":"$D2023-03-20T13:50:42.452Z","has_unpublished_edits":null,"fork":{"id":"50c39a2c00ed5e7d","slug":"paneles","title":"Paneles","owner":{"id":"305bf5080ae4580a","login":"srsergiorodriguez","name":"Sergio Rodríguez Gómez"}},"stars":0,"starred":false,"owner":{"type":"team","id":"305bf5080ae4580a","login":"srsergiorodriguez","name":"Sergio Rodríguez Gómez","avatar_url":"https://avatars-next.observableusercontent.com/6326606b0640f2597b352da73f7c073f29b44d4060f66cc47c575dd937903b31","tier":"starter_2024"},"version":1208,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7d80462b6b41d223","login":"srsergiorodriguez","name":"Sergio Rodríguez Gómez","avatar_url":"https://avatars-next.observableusercontent.com/6326606b0640f2597b352da73f7c073f29b44d4060f66cc47c575dd937903b31","tier":null}],"members":[{"type":"individual","id":"7d80462b6b41d223","login":"srsergiorodriguez","name":"Sergio Rodríguez Gómez","avatar_url":"https://avatars-next.observableusercontent.com/6326606b0640f2597b352da73f7c073f29b44d4060f66cc47c575dd937903b31","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Paneles ed","cells":[{"id":0,"value":"# Paneles ed","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":"scenes = (\n {\n 1: {\n viz: {filter: [[\"fecha\", \"<\", 1900],[\"otros\", \"=\", false],[\"modelo\", \"=\", \"roulin\"]], type: \"pack\", x: \"modelo\", y: \"modelo\"},\n // viz: {filter: [[\"periodo\", \"<\", \"1819 - 1850\"],[\"modelo\",\"=\",\"humboldt\"]], type: \"pack\", x: \"modelo\", y: \"figura/fondo\"},\n text: \"\"+data[0][\"url\"],\n options: [\n { btn: \"pack\", scene: \"2\" },\n { btn: \"compare\", scene: \"3\" },\n { btn: \"scatter\", scene: \"4\" }\n ]\n },\n 2: {\n viz: {filter: [[\"fecha\", \">\", 2000]], type: \"pack\", x: \"figura/fondo\", y: \"modelo\"},\n options: [\n { btn: \"cont..\", scene: \"1\" },\n ]\n },\n 3: {\n viz: {filter: [], type: \"compare\", x: 0, y: 1},\n options: [\n { btn: \"cont..\", scene: \"1\" },\n ]\n },\n 4: {\n viz: {filter: [[\"fecha\", \"<\", 1900]], type: \"scatter\", x: \"figura/fondo\", y: \"modelo\"},\n options: [\n { btn: \"pack\", scene: \"2\" },\n { btn: \"compare\", scene: \"3\" }\n ]\n },\n }\n)","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":"$34","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":"processedScenes = 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":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":950,"value":"$37","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"}],"files":"$W38","stdlib":"1","titling":"auto"}} 33:"$32:body"