25:["$","title",null,{"children":"Mapa de relaciones | Newtral Data | Observable"}] 49:T48b,viewof svgMapaRenderizado = { const container = html`

`; const svgElement = document.createElement("div"); svgElement.innerHTML = viewof svgMapa; container.appendChild(svgElement); const svg = svgElement.querySelector("svg"); if (!svg) { console.error("El SVG no se ha cargado correctamente."); return; } svg.onload = () => { const svgHeight = svg.clientHeight; container.style.height = `${svgHeight}px`; const containerWidth = container.clientWidth; const svgWidth = svg.clientWidth; const translateX = (containerWidth - svgWidth) / 2; const translateY = (container.clientHeight - svgHeight) / 2; svg.setAttribute("transform", `translate(${translateX}, ${translateY})`); }; const mapaGroup = svg.querySelector("#mapa"); // Configurar zoom const zoom = d3.zoom() .scaleExtent([0.5, 5]) .on("zoom", (event) => { mapaGroup.setAttribute("transform", event.transform); }); d3.select(svg) .call(zoom) .on("wheel.zoom", null) .on("dblclick.zoom", null); return container; }4a:Tabe,viewof interactividad = { const infoData = await googleSheetData; const svgElement = viewof svgMapaRenderizado.querySelector("svg"); if (!svgElement) { console.error("El SVG no se ha cargado correctamente."); return; } const tooltip = document.createElement("div"); tooltip.id = "tooltip"; tooltip.style.position = "absolute"; tooltip.style.pointerEvents = "none"; tooltip.style.display = "none"; tooltip.style.background = "#fff"; tooltip.style.color = "#000"; tooltip.style.padding = "5px 10px"; tooltip.style.borderRadius = "5px"; tooltip.style.boxShadow = "0 2px 6px rgba(0, 0, 0, 0.2)"; tooltip.style.zIndex = "1000"; tooltip.style.maxWidth = "400px"; tooltip.style.minWidth = "150px"; tooltip.style.wordWrap = "break-word"; document.body.appendChild(tooltip); let mapaGroup = svgElement.querySelector("#mapa"); if (!mapaGroup) { mapaGroup = document.createElementNS("http://www.w3.org/2000/svg", "g"); mapaGroup.setAttribute("id", "mapa"); while (svgElement.firstChild) { mapaGroup.appendChild(svgElement.firstChild); } svgElement.appendChild(mapaGroup); } const ajustarTooltip = (event) => { const tooltipRect = tooltip.getBoundingClientRect(); const viewportWidth = window.innerWidth; const viewportHeight = window.innerHeight; let left = event.clientX + 10; let top = event.clientY + 10; if (left + tooltipRect.width > viewportWidth) { left = event.clientX - tooltipRect.width - 10; } if (top + tooltipRect.height > viewportHeight) { top = event.clientY - tooltipRect.height - 10; } if (left < 0) left = 0; if (top < 0) top = 0; tooltip.style.left = `${left}px`; tooltip.style.top = `${top}px`; }; const mostrarTooltip = (event, data) => { tooltip.style.display = "block"; tooltip.innerHTML = `${data.NOMBRE}
${data.INFO}
${data.INFO2}`; ajustarTooltip(event); }; const ocultarTooltip = () => { tooltip.style.display = "none"; }; const interactivos = svgElement.querySelectorAll("#Interactivo *"); interactivos.forEach(elemento => { const id = elemento.id; const data = infoData.find(row => row.id == id); if (data) { elemento.addEventListener("mouseover", (event) => { mostrarTooltip(event, data); elemento.style.cursor = "pointer"; }); elemento.addEventListener("mousemove", (event) => { ajustarTooltip(event); }); elemento.addEventListener("mouseout", () => { ocultarTooltip(); }); elemento.addEventListener("click", (event) => { mostrarTooltip(event, data); }); } }); return "Interactividad y zoom habilitados"; }4b:[{"id":"3dea24758a6eda84c5b1f5cc0056081afb9d3e5ffb8a75f1a5655f564cbd58c2b580bddbce5865820c2726acc9715ac50f49d881820b974d6f549ba78e8eca0f","href":"https://static.observableusercontent.com/files/3dea24758a6eda84c5b1f5cc0056081afb9d3e5ffb8a75f1a5655f564cbd58c2b580bddbce5865820c2726acc9715ac50f49d881820b974d6f549ba78e8eca0f","name":"newtral_logo.png","type":"image/png","lastModified":1736345083697.289,"size":1409},{"id":"c6b0eb1f8f95c31d2bc9f673814df9e96573eaa02b76e5de0a1584a41efba315e361f987aeb3719bb573bb7a199ace2497f579cc62e0144b4db3267c85c26dd6","href":"https://static.observableusercontent.com/files/c6b0eb1f8f95c31d2bc9f673814df9e96573eaa02b76e5de0a1584a41efba315e361f987aeb3719bb573bb7a199ace2497f579cc62e0144b4db3267c85c26dd6","name":"RELACIONES_FINALES.svg","type":"image/svg+xml","lastModified":1736436369017.453,"size":3712536},{"id":"17535b6194e9d7c98f7fbddc3a6e5abe2b7ae0192ce5f9dec9068cbe3a03d0f49b7e5968f331d63dbeeb7671f70dfaf57c077816b35c1d23f973742fde2743a0","href":"https://static.observableusercontent.com/files/17535b6194e9d7c98f7fbddc3a6e5abe2b7ae0192ce5f9dec9068cbe3a03d0f49b7e5968f331d63dbeeb7671f70dfaf57c077816b35c1d23f973742fde2743a0","name":"RELACIONES_FINALES2.svg","type":"image/svg+xml","lastModified":1736440452499.902,"size":3712477}] 29:{"id":"5f21d9d72a0fbe7a","slug":null,"title":"Mapa de relaciones","thumbnail":"b92ae00ccdd6d4179888681a9ac62229192ca598441b186d4a4965a46a4fc73d","access_level":"public","create_time":"$D2025-01-08T14:00:52.696Z","update_time":"$D2025-06-10T15:55:04.885Z","view_time":null,"first_public_time":"$D2025-01-08T14:23:43.720Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6721f19fe640557e","login":"newtral-datos","name":"Newtral Data","avatar_url":"https://avatars-next.observableusercontent.com/ff6ff00f51721a8025f0514b4e310cc0f80a1f58417bdffd6aa86bd2c3bcd948","tier":"starter_2024","bio":"Somos el equipo de datos de Newtral. Nos dedicamos a analizar y convertir datos en historias periodísticas, utilizando IA y programación.","following":false},"version":178,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dcf36f2cf3d68944","login":"newtral-datos","name":"Newtral Data","avatar_url":"https://avatars-next.observableusercontent.com/ff6ff00f51721a8025f0514b4e310cc0f80a1f58417bdffd6aa86bd2c3bcd948","tier":null,"bio":"Somos el equipo de datos de Newtral. Nos dedicamos a analizar y convertir datos en historias periodísticas, utilizando IA y programación.","following":false}],"members":[{"type":"team","id":"6721f19fe640557e","login":"newtral-datos","name":"Newtral Data","avatar_url":"https://avatars-next.observableusercontent.com/ff6ff00f51721a8025f0514b4e310cc0f80a1f58417bdffd6aa86bd2c3bcd948","tier":"starter_2024","role":"editor"},{"type":"individual","id":"dcf36f2cf3d68944","login":"newtral-datos","name":"Newtral Data","avatar_url":"https://avatars-next.observableusercontent.com/ff6ff00f51721a8025f0514b4e310cc0f80a1f58417bdffd6aa86bd2c3bcd948","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mapa de relaciones","cells":[{"id":26,"value":"titulo = html`

Mapa de relaciones

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"csvURL = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vRZg544N1INu7IF4MKkxOQEDlx7DryxHIVHybDzO3fT1RJh41xwfuxiPjB-WjTut_rVo2dzE5JgSO3N/pub?output=csv\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"function csvToJson(csv) {\n const lines = csv.split(\"\\n\");\n const headers = lines[0].split(\",\");\n\n const result = lines.slice(1).map(line => {\n const values = line.split(/,(?=(?:[^\\\"]*\\\"[^\\\"]*\\\")*[^\\\"]*$)/);\n const obj = {};\n \n headers.forEach((header, index) => {\n let value = values[index].trim();\n\n value = value.replace(/\"/g, '').trim(); \n\n obj[header.trim()] = value;\n });\n \n return obj;\n });\n\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"googleSheetData = fetch(csvURL)\n .then(response => response.text())\n .then(csvText => csvToJson(csvText));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"viewof svgMapa = FileAttachment(\"RELACIONES_FINALES2.svg\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"infoImagenes = googleSheetData;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"estilos = html`\n \n

\n NewtralData\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null