4d:I[132969,["$2"],"IconMark"] 25:["$","title",null,{"children":"Mapa Metro de Madrid | Newtral Data | Observable"}] 49:T44f,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"); const zoom = d3.zoom() .scaleExtent([0.5, 5]) .on("zoom", (event) => { mapaGroup.setAttribute("transform", event.transform); }); d3.select(svg).call(zoom).on("dblclick.zoom", null); return container; }4a:Tb9c,viewof interactividad = { const infoEstaciones = googleSheetData; const svgElement = viewof svgMapaRenderizado.querySelector("svg"); if (!svgElement) { console.error("El SVG no se ha cargado correctamente."); return; } console.log("Datos de las estaciones:", infoEstaciones); const tooltip = document.createElement("div"); tooltip.id = "tooltip"; tooltip.style.position = "absolute"; tooltip.style.display = "none"; tooltip.style.backgroundColor = "white"; tooltip.style.border = "1px solid black"; tooltip.style.padding = "5px"; 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 zoom = d3.zoom() .scaleExtent([0.5, 5]) .on("zoom", (event) => { mapaGroup.setAttribute("transform", event.transform); }); d3.select(svgElement).call(zoom).on("dblclick.zoom", null); const mostrarTooltip = (event, data) => { tooltip.style.display = "block"; tooltip.style.left = `${event.clientX + 10}px`; tooltip.style.top = `${event.clientY + 10}px`; tooltip.innerHTML = `${data.ESTACION}
${data.PRECIO} €/m2`; }; const ocultarTooltip = () => { tooltip.style.display = "none"; }; const hacerInteractivo = (elementos, infoEstaciones, esEstaciones2 = false) => { elementos.forEach(estacion => { const id = estacion.id; console.log("ID de la estación en el SVG:", id); const row = infoEstaciones.find(row => row.id == id); console.log("Datos asociados a la estación:", row); if (row) { estacion.addEventListener("mouseover", (event) => { mostrarTooltip(event, row); if (esEstaciones2) { estacion.style.stroke = "blue"; estacion.style.strokeWidth = "25"; estacion.style.opacity = "0.2"; } else { estacion.style.stroke = "red"; estacion.style.strokeWidth = "5"; estacion.style.opacity = "0.5"; } estacion.style.cursor = "pointer"; }); estacion.addEventListener("mouseout", () => { ocultarTooltip(); estacion.style.stroke = ""; estacion.style.strokeWidth = ""; estacion.style.opacity = ""; estacion.style.cursor = ""; }); estacion.addEventListener("click", (event) => { mostrarTooltip(event, row); }); } }); }; const estaciones1 = svgElement.querySelectorAll("#Estaciones *"); const estaciones2 = svgElement.querySelectorAll("#Estaciones2 *"); hacerInteractivo(estaciones1, infoEstaciones); hacerInteractivo(estaciones2, infoEstaciones, true); }4b:T1f1d,viewof interfazComparar = { const contenedor = document.createElement("div"); contenedor.style.position = "fixed"; contenedor.style.top = "10px"; contenedor.style.left = "50%"; contenedor.style.transform = "translateX(-50%)"; contenedor.style.backgroundColor = "#f9f9f9"; contenedor.style.border = "2px solid #01f3b3"; contenedor.style.padding = "10px"; contenedor.style.borderRadius = "8px"; contenedor.style.boxShadow = "0px 4px 8px rgba(0, 0, 0, 0.1)"; contenedor.style.zIndex = "1001"; contenedor.style.fontFamily = "Helvetica, Arial, sans-serif"; contenedor.style.display = "flex"; contenedor.style.flexDirection = "column"; contenedor.style.alignItems = "center"; const titulo = document.createElement("h2"); titulo.innerText = "Compara el precio del m2 entre dos estaciones"; titulo.style.fontFamily = "Helvetica, Arial, sans-serif"; titulo.style.textAlign = "center"; titulo.style.marginBottom = "20px"; titulo.style.fontSize = "18px"; const inputEstacion1 = document.createElement("input"); inputEstacion1.type = "text"; inputEstacion1.placeholder = "Estación 1"; inputEstacion1.style.marginRight = "5px"; inputEstacion1.style.fontFamily = "Helvetica, Arial, sans-serif"; const sugerencias1 = document.createElement("ul"); sugerencias1.style.listStyleType = "none"; sugerencias1.style.padding = "0"; sugerencias1.style.margin = "0"; sugerencias1.style.position = "absolute"; sugerencias1.style.backgroundColor = "white"; sugerencias1.style.border = "1px solid #ccc"; sugerencias1.style.maxHeight = "150px"; sugerencias1.style.overflowY = "auto"; sugerencias1.style.display = "none"; const inputEstacion2 = document.createElement("input"); inputEstacion2.type = "text"; inputEstacion2.placeholder = "Estación 2"; inputEstacion2.style.marginRight = "5px"; inputEstacion2.style.fontFamily = "Helvetica, Arial, sans-serif"; const sugerencias2 = document.createElement("ul"); sugerencias2.style.listStyleType = "none"; sugerencias2.style.padding = "0"; sugerencias2.style.margin = "0"; sugerencias2.style.position = "absolute"; sugerencias2.style.backgroundColor = "white"; sugerencias2.style.border = "1px solid #ccc"; sugerencias2.style.maxHeight = "150px"; sugerencias2.style.overflowY = "auto"; sugerencias2.style.display = "none"; // Contenedor de botones const contenedorBotones = document.createElement("div"); contenedorBotones.style.display = "flex"; contenedorBotones.style.justifyContent = "center"; contenedorBotones.style.marginTop = "5px"; const botonComparar = document.createElement("button"); botonComparar.innerText = "Comparar"; botonComparar.style.marginRight = "10px"; botonComparar.style.fontFamily = "Helvetica, Arial, sans-serif"; const botonMapaCompleto = document.createElement("button"); botonMapaCompleto.innerText = "Consulta el mapa completo"; botonMapaCompleto.style.fontFamily = "Helvetica, Arial, sans-serif"; botonMapaCompleto.style.backgroundColor = "#01f3b3"; botonMapaCompleto.style.color = "white"; botonMapaCompleto.style.border = "none"; botonMapaCompleto.style.padding = "10px 20px"; botonMapaCompleto.style.borderRadius = "5px"; botonMapaCompleto.style.cursor = "pointer"; const url = "https://observablehq.com/embed/737cf963625958c5@122?cells=viewof+zoomedImage"; botonMapaCompleto.addEventListener("click", () => { window.open(url, "_blank"); }); contenedorBotones.appendChild(botonComparar); contenedorBotones.appendChild(botonMapaCompleto); const resultado = document.createElement("div"); resultado.style.marginTop = "10px"; resultado.style.fontFamily = "Helvetica, Arial, sans-serif"; const botonReiniciar = document.createElement("button"); botonReiniciar.innerText = "Reiniciar"; botonReiniciar.style.display = "none"; botonReiniciar.style.marginTop = "10px"; botonReiniciar.style.fontFamily = "Helvetica, Arial, sans-serif"; contenedor.appendChild(titulo); contenedor.appendChild(inputEstacion1); contenedor.appendChild(sugerencias1); contenedor.appendChild(inputEstacion2); contenedor.appendChild(sugerencias2); contenedor.appendChild(contenedorBotones); contenedor.appendChild(resultado); contenedor.appendChild(botonReiniciar); const estacionesNombres = infoEstaciones.map(estacion => estacion.ESTACION); const normalizarTexto = (texto) => { return texto.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase(); }; const mostrarSugerencias = (input, sugerencias, estaciones) => { const valorInput = normalizarTexto(input.value); sugerencias.innerHTML = ""; sugerencias.style.display = "none"; if (valorInput.length > 0) { const coincidencias = estaciones.filter(estacion => normalizarTexto(estacion).includes(valorInput)); coincidencias.forEach(coincidencia => { const item = document.createElement("li"); item.innerText = coincidencia; item.style.cursor = "pointer"; item.addEventListener("click", () => { input.value = coincidencia; sugerencias.innerHTML = ""; sugerencias.style.display = "none"; }); sugerencias.appendChild(item); }); if (coincidencias.length > 0) { sugerencias.style.display = "block"; } } }; inputEstacion1.addEventListener("input", () => { mostrarSugerencias(inputEstacion1, sugerencias1, estacionesNombres); }); inputEstacion2.addEventListener("input", () => { mostrarSugerencias(inputEstacion2, sugerencias2, estacionesNombres); }); botonComparar.addEventListener("click", () => { const estacion1 = inputEstacion1.value.trim(); const estacion2 = inputEstacion2.value.trim(); if (!estacion1 || !estacion2) { resultado.innerHTML = "Por favor, introduce dos estaciones."; return; } const datosEstacion1 = infoEstaciones.find(row => row.ESTACION === estacion1); const datosEstacion2 = infoEstaciones.find(row => row.ESTACION === estacion2); if (!datosEstacion1 || !datosEstacion2) { resultado.innerHTML = "Una o ambas estaciones no se encontraron."; } else { const precio1 = parseFloat(datosEstacion1.PRECIO.replace(',', '.')); const precio2 = parseFloat(datosEstacion2.PRECIO.replace(',', '.')); let estacionMayor, estacionMenor, precioMayor, precioMenor; if (precio1 > precio2) { estacionMayor = datosEstacion1.ESTACION; estacionMenor = datosEstacion2.ESTACION; precioMayor = precio1; precioMenor = precio2; } else { estacionMayor = datosEstacion2.ESTACION; estacionMenor = datosEstacion1.ESTACION; precioMayor = precio2; precioMenor = precio1; } const diferencia = precioMayor - precioMenor; const porcentaje = Math.round(((precioMayor - precioMenor) / precioMenor) * 100); resultado.innerHTML = ` ${datosEstacion1.ESTACION}: ${precio1.toLocaleString('es-ES', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} €/m2
${datosEstacion2.ESTACION}: ${precio2.toLocaleString('es-ES', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} €/m2

El m2 en alquiler en ${estacionMayor} es un ${porcentaje}% más caro que en ${estacionMenor}: cuesta ${diferencia.toLocaleString('es-ES', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} € más. `; botonReiniciar.style.display = "inline-block"; } }); botonReiniciar.addEventListener("click", () => { inputEstacion1.value = ""; inputEstacion2.value = ""; resultado.innerHTML = ""; botonReiniciar.style.display = "none"; }); const svgContainer = viewof svgMapaRenderizado.closest("div"); svgContainer.style.position = "relative"; document.body.appendChild(contenedor); }4c:[{"id":"3d0bd35f1617b94d727b6c1b425197b53ebe56ec48f4aea57be8dbf427d8216bc6e936b939f80af84f044d047d1f2109da0cc56f652f74b767e46fdbaeddfba3","href":"https://static.observableusercontent.com/files/3d0bd35f1617b94d727b6c1b425197b53ebe56ec48f4aea57be8dbf427d8216bc6e936b939f80af84f044d047d1f2109da0cc56f652f74b767e46fdbaeddfba3","name":"MADRID_METRO_OBSERVABLE@1.svg","type":"image/svg+xml","lastModified":1729259271849.891,"size":53801},{"id":"3dea24758a6eda84c5b1f5cc0056081afb9d3e5ffb8a75f1a5655f564cbd58c2b580bddbce5865820c2726acc9715ac50f49d881820b974d6f549ba78e8eca0f","href":"https://static.observableusercontent.com/files/3dea24758a6eda84c5b1f5cc0056081afb9d3e5ffb8a75f1a5655f564cbd58c2b580bddbce5865820c2726acc9715ac50f49d881820b974d6f549ba78e8eca0f","name":"newtral_logo.png","type":"image/png","lastModified":1729264425897.043,"size":1409}] 29:{"id":"7d0d6f842356fe6a","slug":null,"title":"Mapa Metro de Madrid","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-10-16T14:07:03.154Z","update_time":"$D2025-07-23T07:07:56.113Z","view_time":null,"first_public_time":"$D2024-10-16T15:57:12.867Z","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":321,"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 Metro de Madrid","cells":[{"id":0,"value":"# Mapa Metro de Madrid","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"csvURL = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vSrgfOCdC8rpKkB8X-nqhigFBMNVjSlzuP-OJvzxU4ZfjdlfiUZgD860EVdjn9niLFLrfujuzKJcG9E/pub?gid=0&single=true&output=csv\";","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"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":81,"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":83,"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":85,"value":"viewof svgMapa = FileAttachment(\"MADRID_METRO_OBSERVABLE@1.svg\").text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"infoEstaciones = googleSheetData;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"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":"$W4c","stdlib":"1"}} 24:null 3f:[["$","title","0",{"children":"Mapa Metro de Madrid | Newtral Data | Observable"}],["$","meta","1",{"property":"og:title","content":"Mapa Metro de Madrid"}],["$","meta","2",{"property":"og:description","content":"An Observable notebook by Newtral Data"}],["$","meta","3",{"property":"og:url","content":"https://observablehq.com/d/7d0d6f842356fe6a"}],["$","meta","4",{"property":"og:site_name","content":"Observable"}],["$","meta","5",{"property":"og:image","content":"https://static.observableusercontent.com/thumbnail/49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899.jpg"}],["$","meta","6",{"property":"og:image:width","content":"640"}],["$","meta","7",{"property":"og:image:height","content":"400"}],["$","meta","8",{"property":"og:type","content":"article"}],["$","meta","9",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","10",{"name":"twitter:title","content":"Mapa Metro de Madrid"}],["$","meta","11",{"name":"twitter:description","content":"An Observable notebook by Newtral Data"}],["$","meta","12",{"name":"twitter:image","content":"https://static.observableusercontent.com/thumbnail/49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899.jpg"}],["$","meta","13",{"name":"twitter:image:width","content":"640"}],["$","meta","14",{"name":"twitter:image:height","content":"400"}],["$","link","15",{"rel":"icon","href":"/favicon.ico?favicon.2hqc0rwsy9zm6.ico","sizes":"96x96","type":"image/x-icon"}],["$","link","16",{"rel":"icon","href":"/icon.png?icon.1mhghqfpotdlb.png","sizes":"512x512","type":"image/png"}],["$","$L4d","17",{}]] 48:null