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

`; const svgElement = document.createElement("div"); svgElement.style.margin = "0"; svgElement.style.padding = "0"; svgElement.style.display = "block"; svgElement.innerHTML = viewof svgMapa; container.appendChild(svgElement); setTimeout(() => { const svg = svgElement.querySelector("svg"); if (!svg) { console.error("El SVG no se ha cargado correctamente."); return container; } svg.style.width = `${svg.getBBox().width}px`; svg.style.height = `${svg.getBBox().height}px`; svg.setAttribute("preserveAspectRatio", "none"); const mapaGroup = svg.querySelector("#mapa"); const svgWidth = svg.getBBox().width; const svgHeight = svg.getBBox().height; const containerWidth = container.clientWidth; const containerHeight = container.clientHeight; const centroX = (containerWidth - svgWidth * 0.5) / 2; const centroY = (containerHeight - svgHeight * 0.5) / 2; 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); const escalaInicial = 0.5; const transformacionInicial = d3.zoomIdentity.translate(centroX, centroY).scale(escalaInicial); mapaGroup.setAttribute("transform", `translate(${centroX}, ${centroY}) scale(${escalaInicial})`); d3.select(svg).call(zoom.transform, transformacionInicial); const ajustarTamañoSVG = () => { const svgHeight = svg.getBoundingClientRect().height; container.style.height = `${svgHeight}px`; }; ajustarTamañoSVG(); }, 100); 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:T1f1c,viewof interfazComparar = { const contenedor = document.createElement("div"); contenedor.style.position = "absolute"; 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/ee7cb54bcfaf0811?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:T436,estilos = html`

NewtralData `4d:[{"id":"3dea24758a6eda84c5b1f5cc0056081afb9d3e5ffb8a75f1a5655f564cbd58c2b580bddbce5865820c2726acc9715ac50f49d881820b974d6f549ba78e8eca0f","href":"https://static.observableusercontent.com/files/3dea24758a6eda84c5b1f5cc0056081afb9d3e5ffb8a75f1a5655f564cbd58c2b580bddbce5865820c2726acc9715ac50f49d881820b974d6f549ba78e8eca0f","name":"newtral_logo.png","type":"image/png","lastModified":1729591069778.345,"size":1409},{"id":"443904a7b9723eb290f4980ba249ae13fa5260e4c8831b2eb5e56644005c648d196246fcccfa46ea5c01bb166c9f17a4f08af126a0745b9e0505dfd1192493fe","href":"https://static.observableusercontent.com/files/443904a7b9723eb290f4980ba249ae13fa5260e4c8831b2eb5e56644005c648d196246fcccfa46ea5c01bb166c9f17a4f08af126a0745b9e0505dfd1192493fe","name":"final_metro_barcelona.svg","type":"image/svg+xml","lastModified":1729846142418.817,"size":55858}] 29:{"id":"26f35bdab591d147","slug":null,"title":"Mapa metro de Barcelona","thumbnail":"157b44d5bb55c3c1fb6bc585c480d2b7f71be7606b82db603b33b0a5d4ed8337","access_level":"public","create_time":"$D2024-10-22T09:41:26.312Z","update_time":"$D2024-10-25T10:11:17.021Z","view_time":null,"first_public_time":"$D2024-10-22T09:53:29.905Z","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 metro de Barcelona","cells":[{"id":0,"value":"# Mapa metro de Barcelona","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"csvURL = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vSrgfOCdC8rpKkB8X-nqhigFBMNVjSlzuP-OJvzxU4ZfjdlfiUZgD860EVdjn9niLFLrfujuzKJcG9E/pub?gid=123798527&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":7,"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":119,"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":121,"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":16,"value":"viewof svgMapa = FileAttachment(\"final_metro_barcelona.svg\").text()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"infoEstaciones = googleSheetData;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null